/* HMC Atölye — modern minimal SaaS teması (nötr yüzey + tek vurgu) */
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap");

:root {
  color-scheme: light;

  --hmc-font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Nötr yüzeyler (warm-neutral / stone) */
  --hmc-ink: #1c1917;
  --hmc-ink-soft: #44403c;
  --hmc-muted: #78716c;
  --hmc-faint: #a8a29e;
  --hmc-line: #e7e5e4;
  --hmc-line-soft: #f1efee;
  --hmc-paper: #fafaf9;
  --hmc-surface: #ffffff;
  --hmc-surface-2: #f5f5f4;

  /* Tek marka vurgusu (terracotta / clay) */
  --hmc-accent: #c2603a;
  --hmc-accent-dark: #9f4a29;
  --hmc-accent-darker: #7c3a20;
  --hmc-accent-soft: #fbeadf;
  --hmc-accent-line: #f1cdb8;

  /* Koyu kenar çubuğu (stone-950) */
  --hmc-cocoa: #1c1917;
  --hmc-cocoa-dark: #0c0a09;
  --hmc-cocoa-soft: #f5f5f4;

  /* Geriye uyumluluk: eski marka adları artık tek vurguya işaret eder */
  --hmc-terracotta: var(--hmc-accent);
  --hmc-terracotta-dark: var(--hmc-accent-dark);
  --hmc-terracotta-soft: var(--hmc-accent-soft);

  --hmc-sage: var(--hmc-accent);
  --hmc-sage-dark: var(--hmc-accent-dark);
  --hmc-sage-soft: var(--hmc-accent-soft);

  --hmc-gold: #b08a3c;
  --hmc-gold-soft: #f6efdd;

  /* Anlamsal renkler */
  --hmc-danger: #dc2626;
  --hmc-danger-soft: #fef2f2;
  --hmc-warn: #b45309;
  --hmc-warn-soft: #fffbeb;
  --hmc-ok: #15803d;
  --hmc-ok-soft: #f0fdf4;
  --hmc-info: #1d4ed8;
  --hmc-info-soft: #eff6ff;

  /* Yarıçap */
  --hmc-radius: 14px;
  --hmc-radius-sm: 9px;
  --hmc-radius-lg: 20px;

  /* Gölge ölçeği (yumuşak, nötr) */
  --hmc-shadow-xs: 0 1px 2px rgba(28, 25, 23, 0.05);
  --hmc-shadow-sm: 0 1px 2px rgba(28, 25, 23, 0.05), 0 4px 12px -6px rgba(28, 25, 23, 0.10);
  --hmc-shadow: 0 1px 2px rgba(28, 25, 23, 0.04), 0 12px 30px -14px rgba(28, 25, 23, 0.16);
  --hmc-shadow-hover: 0 2px 6px rgba(28, 25, 23, 0.06), 0 22px 48px -18px rgba(28, 25, 23, 0.22);

  /* Tipografi ölçeği */
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-30: 30px;
  --fs-38: 38px;

  /* Boşluk ölçeği (4px ritmi) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;

  --hmc-sidebar: 256px;
  --hmc-focus: 0 0 0 3px rgba(194, 96, 58, 0.28);

  /* app_shell uyumluluk aliasları */
  --ai-bg: var(--hmc-paper);
  --ai-surface: var(--hmc-surface);
  --ai-surface-2: var(--hmc-surface-2);
  --ai-ink: var(--hmc-ink);
  --ai-muted: var(--hmc-muted);
  --ai-line: var(--hmc-line);
  --ai-teal: var(--hmc-accent);
  --ai-teal-dark: var(--hmc-accent-dark);
  --ai-teal-soft: var(--hmc-accent-soft);
  --ai-cyan: var(--hmc-accent);
  --ai-coral: var(--hmc-accent);
  --ai-amber: var(--hmc-gold);
  --ai-green: var(--hmc-ok);
  --ai-red: var(--hmc-danger);
  --ai-sidebar: var(--hmc-sidebar);
  --ai-radius: var(--hmc-radius);
  --ai-shadow: var(--hmc-shadow);
  --ai-shadow-hover: var(--hmc-shadow-hover);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--hmc-paper);
  color: var(--hmc-ink);
  font-family: var(--hmc-font);
  font-size: var(--fs-14);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0;
  color: var(--hmc-ink);
  letter-spacing: -0.02em;
  line-height: 1.18;
  font-weight: 700;
}

p {
  margin: 0;
}

a {
  color: inherit;
}

/* Erişilebilir odak halkası */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--hmc-focus);
  border-radius: var(--hmc-radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

button,
.button-link,
input[type="submit"] {
  min-height: 42px;
  border: 1px solid transparent;
  border-radius: var(--hmc-radius-sm);
  background: var(--hmc-accent);
  color: #fff;
  padding: 0 16px;
  font-family: inherit;
  font-size: var(--fs-14);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: var(--hmc-shadow-xs);
  transition: background 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

button:hover,
.button-link:hover,
input[type="submit"]:hover {
  background: var(--hmc-accent-dark);
  transform: translateY(-1px);
  box-shadow: var(--hmc-shadow-sm);
}

button:active,
.button-link:active {
  transform: translateY(0);
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.secondary,
.secondary-button,
.button-link.secondary,
.button-link.nav-link {
  background: var(--hmc-surface);
  color: var(--hmc-ink-soft);
  border-color: var(--hmc-line);
  box-shadow: var(--hmc-shadow-xs);
}

.secondary:hover,
.secondary-button:hover,
.button-link.secondary:hover,
.button-link.nav-link:hover {
  background: var(--hmc-surface-2);
  border-color: #d6d3d1;
  color: var(--hmc-ink);
  box-shadow: var(--hmc-shadow-xs);
}

.danger-button,
.danger-action {
  background: var(--hmc-danger-soft);
  color: var(--hmc-danger);
  border-color: #f3c6c6;
  box-shadow: none;
}

.danger-button:hover,
.danger-action:hover {
  background: #fce0e0;
  border-color: #ecb4b4;
  box-shadow: none;
}

input,
select,
textarea {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--hmc-line);
  border-radius: var(--hmc-radius-sm);
  background: var(--hmc-surface);
  color: var(--hmc-ink);
  padding: 10px 12px;
  font-family: inherit;
  font-size: var(--fs-14);
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

input::placeholder,
textarea::placeholder {
  color: var(--hmc-faint);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--hmc-accent);
  box-shadow: var(--hmc-focus);
}

.eyebrow {
  margin: 0 0 8px;
  color: var(--hmc-accent-dark);
  font-size: var(--fs-11);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.subtitle,
.section-note {
  color: var(--hmc-muted);
}

.status-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.status-strip span,
.draft-pill,
.state-pill {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  border: 1px solid var(--hmc-line);
  border-radius: 999px;
  background: var(--hmc-surface);
  color: var(--hmc-muted);
  padding: 0 12px;
  font-size: var(--fs-12);
  font-weight: 600;
}

.status-strip .ok,
.state-pill.ok {
  border-color: #bbf7d0;
  background: var(--hmc-ok-soft);
  color: var(--hmc-ok);
}

.status-strip .muted {
  color: var(--hmc-muted);
}

.error-text {
  color: var(--hmc-danger);
  font-weight: 600;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}