/* ==========================================================================
   TSS Adana Yardım Merkezi — Design Prototype Stylesheet
   Static, dependency-free CSS (no build step). Tokens sourced from
   design-system/tss-adana-yardim-merkezi/MASTER.md
   ========================================================================== */

:root {
  /* Color tokens */
  --color-primary: #0F172A;
  --color-on-primary: #FFFFFF;
  --color-secondary: #334155;
  --color-on-secondary: #FFFFFF;
  --color-accent: #0369A1;
  --color-on-accent: #FFFFFF;
  --color-background: #F8FAFC;
  --color-foreground: #020617;
  --color-card: #FFFFFF;
  --color-card-foreground: #020617;
  --color-muted: #E8ECF1;
  --color-muted-foreground: #475569;
  --color-border: #E2E8F0;
  --color-destructive: #DC2626;
  --color-ring: #0F172A;
  --color-amber: #B45309;
  --color-amber-surface: #FEF3E2;

  /* Text roles.
     --color-primary / --color-secondary / --color-accent are GROUND/brand roles:
     they fill the hero, the audience band, pressed chips and solid buttons, and
     therefore keep the same value in both themes. The three tokens below are the
     TEXT counterparts of the same hues. Splitting them lets dark mode lighten
     type without inverting a ground that must stay navy. Use these for `color:`
     and for hover/border affordances; use the ground tokens for fills. */
  --color-heading: #0F172A;
  --color-label: #334155;
  --color-link: #0369A1;

  /* Spacing scale */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(2, 6, 23, 0.06);
  --shadow-md: 0 4px 6px rgba(2, 6, 23, 0.1);
  --shadow-lg: 0 10px 15px rgba(2, 6, 23, 0.12);
  --shadow-xl: 0 20px 25px rgba(2, 6, 23, 0.16);

  /* Type */
  --font-heading: "Segoe UI Variable Display", "Aptos Display", "Segoe UI", system-ui, sans-serif;
  --font-body: "Segoe UI Variable Text", "Aptos", "Segoe UI", system-ui, sans-serif;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;

  --container-max: 1200px;
}

/* Dark-mode token overrides (system default; explicit toggle can add [data-theme] later) */
@media (prefers-color-scheme: dark) {
  :root {
    --color-background: #0B1220;
    --color-foreground: #F1F5F9;
    --color-card: #131C2E;
    --color-card-foreground: #F1F5F9;
    --color-muted: #1E293B;
    --color-muted-foreground: #94A3B8;
    --color-border: #263248;
    --color-amber-surface: #2A1B0A;
    --color-amber: #FBBF24;

    /* Text roles only. Verified against the dark grounds (#0B1220 page,
       #131C2E card, #1E293B muted): heading ~17:1, label ~10:1, link ~10:1. */
    --color-heading: #F1F5F9;
    --color-label: #CBD5E1;
    --color-link: #7DD3FC;
  }
  /* --color-primary / --color-secondary / --color-accent are deliberately NOT
     overridden here: they are the hero / audience-band / pressed-chip / solid-
     button grounds and must stay navy in both themes, which is also why
     --color-on-primary and --color-on-accent stay light. Anything that needs a
     readable *hue on the page ground* uses --color-heading/-label/-link above. */
}

/* ---------- Reset-lite ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-foreground);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  line-height: 1.2;
  margin: 0 0 var(--space-md);
  font-weight: 700;
}
p { margin: 0 0 var(--space-md); color: var(--color-muted-foreground); }

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-lg);
}

/* Focus visibility (WCAG) */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 3px solid var(--color-link);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Skip link */
.skip-link {
  position: absolute;
  left: var(--space-md);
  top: -60px;
  background: var(--color-primary);
  color: var(--color-on-primary);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  z-index: 100;
  transition: top 150ms ease;
}
.skip-link:focus { top: var(--space-md); }

/* ---------- Draft banner ---------- */
.draft-banner {
  background: var(--color-primary);
  color: var(--color-on-primary);
  text-align: center;
  font-size: 0.875rem;
  padding: var(--space-sm) var(--space-md);
}
.draft-banner strong { color: #FCD34D; }

/* ---------- Offline trust strip ---------- */
.trust-strip {
  background: #0F172A;
  color: #FFFFFF;
  border-bottom: 1px solid rgba(125, 211, 252, 0.28);
}
.trust-strip-inner {
  min-height: 68px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-md);
  padding-block: 10px;
}
.trust-status-mark {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
}
.trust-status-mark span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #7DD3FC;
  box-shadow: 0 0 0 6px rgba(125, 211, 252, 0.14);
}
.trust-strip[data-state="preparing"] .trust-status-mark span {
  animation: trust-pulse 1.8s ease-in-out infinite;
}
.trust-strip[data-state="ready"] .trust-status-mark span { background: #4ADE80; box-shadow: 0 0 0 6px rgba(74, 222, 128, 0.14); }
.trust-strip[data-state="offline"] .trust-status-mark span,
.trust-strip[data-state="update"] .trust-status-mark span { background: #FBBF24; box-shadow: 0 0 0 6px rgba(251, 191, 36, 0.14); }
.trust-strip[data-state="error"] .trust-status-mark span { background: #F87171; box-shadow: 0 0 0 6px rgba(248, 113, 113, 0.14); }
.trust-copy {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--space-sm);
  align-items: baseline;
}
.trust-kicker {
  grid-column: 1 / -1;
  color: #7DD3FC;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.trust-title {
  color: #FFFFFF;
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  line-height: 1.35;
}
.trust-detail {
  color: #CBD5E1;
  font-size: 0.875rem;
  line-height: 1.35;
}
.trust-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.trust-actions[hidden],
.trust-action[hidden] { display: none !important; }
.trust-action {
  min-height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: transparent;
  color: #FFFFFF;
  white-space: nowrap;
}
.trust-action:hover { background: rgba(255, 255, 255, 0.1); }
@keyframes trust-pulse {
  0%, 100% { transform: scale(0.82); opacity: 0.72; }
  50% { transform: scale(1); opacity: 1; }
}
@media (max-width: 720px) {
  .trust-strip-inner { grid-template-columns: auto minmax(0, 1fr); }
  .trust-copy { grid-template-columns: 1fr; }
  .trust-actions { grid-column: 2; }
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-card);
  border-bottom: 1px solid var(--color-border);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: 72px;
}
.logo {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--color-heading);
  white-space: nowrap;
}
.logo .logo-mark {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--color-accent);
  color: var(--color-on-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
}
.primary-nav {
  display: flex;
  gap: var(--space-lg);
}
.primary-nav a {
  font-weight: 600;
  color: var(--color-label);
  padding: var(--space-sm) 0;
  border-bottom: 2px solid transparent;
  transition: color 150ms ease, border-color 150ms ease;
}
.primary-nav a:hover,
.primary-nav a:focus-visible { color: var(--color-link); border-color: var(--color-link); }

.header-actions { display: flex; align-items: center; gap: var(--space-sm); }
.icon-btn {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-label);
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}
.icon-btn:hover { background: var(--color-muted); color: var(--color-heading); }

.nav-toggle { display: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 12px 24px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  border: none;
  transition: transform 150ms ease, opacity 150ms ease, background 150ms ease;
  min-height: 44px;
}
.btn-primary { background: var(--color-accent); color: var(--color-on-accent); }
.btn-primary:hover { opacity: 0.92; transform: translateY(-1px); }
.btn-secondary {
  background: transparent;
  color: var(--color-heading);
  border: 2px solid var(--color-heading);
}
.btn-secondary:hover { background: var(--color-primary); color: var(--color-on-primary); }
.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.btn-sm { padding: 8px 16px; font-size: 0.875rem; min-height: 36px; }
/* AUTH is frozen/deferred project-wide: this control is intentionally inert. */
.btn-inert { background: var(--color-muted); color: var(--color-muted-foreground); }

/* Screen-reader-only utility */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Hero ---------- */
.hero {
  background: linear-gradient(180deg, var(--color-primary) 0%, #16213A 60%, var(--color-background) 100%);
  color: var(--color-on-primary);
  padding-block: var(--space-3xl) var(--space-2xl);
}
.hero-inner { max-width: 760px; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25);
  color: #FCD34D;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: var(--space-lg);
}
.hero h1 {
  font-size: clamp(2rem, 4.5vw, 3rem);
  color: var(--color-on-primary);
  max-width: 18ch;
}
.hero p.lead {
  color: rgba(255,255,255,0.82);
  font-size: 1.125rem;
  max-width: 56ch;
}
.search-form {
  display: flex;
  gap: var(--space-sm);
  background: var(--color-card);
  padding: var(--space-sm);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xl);
  margin-block: var(--space-xl);
  max-width: 560px;
}
.search-form input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 1rem;
  padding: 10px var(--space-md);
  color: var(--color-foreground);
  background: transparent;
  min-height: 44px;
}
.search-form input::placeholder { color: var(--color-muted-foreground); }
/* `.search-form input { outline: none }` above ties on specificity with the global
   `input:focus-visible` rule and, being later in the source, was silently winning —
   the search field had no focus ring at all. The input is borderless inside the pill,
   so the ring belongs on the pill itself. The pill always sits on the navy hero, so
   the ring colour is fixed rather than themed: #7DD3FC on #0F172A is ~10.8:1, well
   past the 3:1 that WCAG 2.4.11 asks of a focus indicator. */
.search-form input:focus-visible { outline: none; }
.search-form:focus-within {
  outline: 3px solid #7DD3FC;
  outline-offset: 2px;
}
.search-form button {
  border: none;
  background: var(--color-accent);
  color: var(--color-on-accent);
  border-radius: var(--radius-sm);
  padding: 0 var(--space-lg);
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: 44px;
  transition: opacity 150ms ease;
}
.search-form button:hover { opacity: 0.9; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: var(--space-md); }
.hero-ctas .btn-secondary { border-color: rgba(255,255,255,0.6); color: var(--color-on-primary); }
.hero-ctas .btn-secondary:hover { background: rgba(255,255,255,0.12); color: var(--color-on-primary); }

/* ---------- Section shell ---------- */
section { padding-block: var(--space-3xl); }
.section-head { max-width: 640px; margin-bottom: var(--space-2xl); }
.section-head .kicker {
  color: var(--color-link);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: block;
  margin-bottom: var(--space-sm);
}
.section-head h2 { font-size: clamp(1.5rem, 3vw, 2rem); color: var(--color-heading); }

/* ---------- Quick access grid ---------- */
.quick-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}
.quick-card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  cursor: pointer;
  transition: box-shadow 150ms ease, transform 150ms ease, border-color 150ms ease;
  min-height: 44px;
}
.quick-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--color-link); }
.quick-card .icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--color-amber-surface);
  color: var(--color-amber);
  display: flex;
  align-items: center;
  justify-content: center;
}
.quick-card .quick-name { font-weight: 600; color: var(--color-card-foreground); }
.quick-card .quick-count {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-muted-foreground);
  margin-top: auto;
}

/* ---------- Filter bar ---------- */
.services-section { background: var(--color-card); }
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}
.filter-groups { display: flex; flex-direction: column; gap: var(--space-sm); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.chip {
  border: 1px solid var(--color-border);
  background: var(--color-background);
  color: var(--color-label);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  min-height: 40px;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.chip:hover { border-color: var(--color-link); color: var(--color-link); }
.chip[aria-pressed="true"] {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
}
.result-summary {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-muted-foreground);
}

/* ---------- Load / error / empty states ---------- */
.state-note {
  margin: 0 0 var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-sm);
  background: var(--color-background);
  border: 1px solid var(--color-border);
  color: var(--color-muted-foreground);
  font-weight: 600;
}
.state-note[hidden] { display: none; }
.state-error {
  background: color-mix(in srgb, var(--color-destructive) 8%, transparent);
  border-color: color-mix(in srgb, var(--color-destructive) 40%, transparent);
  color: var(--color-destructive);
}

/* ---------- Catalog ---------- */
.category { padding-block: 0; margin-bottom: var(--space-2xl); }
.category:last-child { margin-bottom: 0; }
.category-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
  padding-bottom: var(--space-md);
  margin-bottom: var(--space-lg);
  border-bottom: 2px solid var(--color-border);
}
.category-title { font-size: 1.375rem; color: var(--color-heading); margin: 0; }
.category-count {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-amber);
  background: var(--color-amber-surface);
  padding: 2px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: var(--space-lg);
}

/* ---------- Record card ---------- */
.record-card {
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  transition: box-shadow 150ms ease, border-color 150ms ease;
}
.record-card:hover { box-shadow: var(--shadow-md); border-color: var(--color-link); }
.record-meta { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.record-type,
.record-risk {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.01em;
}
.record-type { background: var(--color-muted); color: var(--color-label); }
.record-risk.risk-low { background: #DCFCE7; color: #166534; }
.record-risk.risk-medium { background: var(--color-amber-surface); color: var(--color-amber); }
.record-title { font-size: 1.125rem; color: var(--color-card-foreground); margin: 0; }
.record-description { margin: 0; color: var(--color-muted-foreground); }

.eligibility-wrap { margin: 0; }
.eligibility-label {
  margin: 0 0 var(--space-xs);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-label);
}
.eligibility {
  margin: 0;
  padding-left: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  color: var(--color-muted-foreground);
  font-size: 0.9375rem;
}

.record-warning {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  margin: 0;
  padding: var(--space-md);
  border-radius: var(--radius-sm);
  background: var(--color-amber-surface);
  border-left: 3px solid var(--color-amber);
  color: var(--color-amber);
  font-size: 0.9375rem;
  line-height: 1.5;
}
.record-warning svg { flex-shrink: 0; margin-top: 2px; }

.resource-list { display: flex; flex-direction: column; gap: var(--space-sm); margin-top: auto; }
.resource-link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: 10px var(--space-md);
  min-height: 44px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-card);
  color: var(--color-link);
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.resource-link:hover { border-color: var(--color-link); background: var(--color-muted); }
.resource-link.primary {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
}
.resource-link.primary:hover { opacity: 0.92; background: var(--color-accent); }
.resource-link svg { flex-shrink: 0; }

.record-owner { margin: 0; font-size: 0.8125rem; color: var(--color-muted-foreground); }

.routing-options {
  border-top: 1px dashed var(--color-border);
  padding-top: var(--space-md);
}
.routing-options-label {
  margin: 0 0 var(--space-sm);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-label);
}
.routing-links { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.routing-link {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--color-link);
  color: var(--color-link);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}
.routing-link:hover { background: var(--color-accent); color: var(--color-on-accent); }

.record-title-link {
  color: inherit;
  display: inline-block;
  min-height: 24px;
  border-bottom: 2px solid transparent;
  transition: color 150ms ease, border-color 150ms ease;
}
.record-title-link:hover,
.record-title-link:focus-visible { color: var(--color-link); border-color: var(--color-link); }

/* Sits under the official-resource CTA: a quiet, secondary affordance so it never
   competes with the primary "go to the official source" action. */
.detail-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 24px;
  align-self: flex-start;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-link);
}
.detail-link:hover { text-decoration: underline; }

.category-link {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-link);
  white-space: nowrap;
}
.category-link:hover { text-decoration: underline; }

/* ---------- Official-source index ---------- */
.source-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-lg);
}
.source-card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.source-type {
  align-self: flex-start;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--color-muted);
  color: var(--color-label);
}
.source-title { font-size: 1rem; margin: 0; color: var(--color-card-foreground); }
.source-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 24px;
  color: var(--color-link);
}
.source-link:hover { text-decoration: underline; }
.source-owner { margin: 0; font-size: 0.9375rem; color: var(--color-muted-foreground); }
.source-checked {
  margin: auto 0 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-muted-foreground);
}

/* ---------- Inner pages (service detail / category) ---------- */
#landing-view[hidden],
#detail-view[hidden] { display: none; }

.inner-page { display: block; padding-block: var(--space-2xl) var(--space-3xl); }
.page-title { font-size: clamp(1.625rem, 3.4vw, 2.25rem); color: var(--color-heading); }
.page-title:focus-visible { outline: 3px solid var(--color-link); outline-offset: 4px; }

.breadcrumb { margin-bottom: var(--space-lg); }
.breadcrumb-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  font-size: 0.875rem;
}
.breadcrumb-item { display: inline-flex; align-items: center; gap: var(--space-sm); }
.breadcrumb-link {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  font-weight: 600;
  color: var(--color-link);
}
.breadcrumb-link:hover { text-decoration: underline; }
.breadcrumb-current { color: var(--color-muted-foreground); font-weight: 600; }
.breadcrumb-sep { color: var(--color-muted-foreground); }

.detail-head { margin-bottom: var(--space-2xl); max-width: 68ch; }
.detail-head .record-meta { margin-bottom: var(--space-md); }
.detail-lead { font-size: 1.125rem; color: var(--color-muted-foreground); margin: 0; }

.detail-body {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: var(--space-2xl);
  align-items: start;
}
.detail-main { display: flex; flex-direction: column; gap: var(--space-lg); }
.detail-main .eligibility { font-size: 1rem; }
.detail-actions {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.detail-actions-title {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-label);
}
.detail-actions .resource-list { margin-top: 0; }

.detail-aside {
  background: var(--color-muted);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  position: sticky;
  top: 96px;
}
.aside-title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-label);
  margin-bottom: var(--space-md);
}
.provenance-list {
  list-style: none;
  margin: 0 0 var(--space-md);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.provenance-item {
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-border);
}
.provenance-item:last-child { border-bottom: none; padding-bottom: 0; }
.provenance-label { margin: 0 0 var(--space-xs); font-weight: 600; color: var(--color-heading); font-size: 0.9375rem; }
.provenance-owner { margin: 0 0 var(--space-xs); font-size: 0.875rem; color: var(--color-muted-foreground); }
.provenance-facts { margin: 0; font-size: 0.8125rem; color: var(--color-muted-foreground); }
.provenance-note {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-muted-foreground);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-md);
}

.related { padding-block: 0; margin-top: var(--space-3xl); }
.related-title {
  font-size: 1.25rem;
  color: var(--color-heading);
  padding-bottom: var(--space-md);
  border-bottom: 2px solid var(--color-border);
  margin-bottom: var(--space-lg);
}

.back-link { margin-top: var(--space-2xl); }

@media (max-width: 900px) {
  .detail-body { grid-template-columns: 1fr; gap: var(--space-xl); }
  .detail-aside { position: static; }
}

/* ---------- Audience band ---------- */
.audience-band {
  background: var(--color-primary);
  color: var(--color-on-primary);
}
/* This band's ground is --color-primary in BOTH themes, so its type must use the
   on-primary roles. The generic .section-head rules use --color-heading/--color-link,
   which resolve to navy in light mode and would vanish against this navy ground. */
.audience-band .section-head h2 { color: var(--color-on-primary); }
.audience-band .section-head .kicker { color: #7DD3FC; }
.audience-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
}
.audience-col h3 { color: var(--color-on-primary); font-size: 1.125rem; }
.audience-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-sm); }
/* min-height keeps these list links at the WCAG 2.2 (2.5.8) 24px target minimum
   outright, rather than relying on the spacing exception. */
.audience-col a { color: rgba(255,255,255,0.78); transition: color 150ms ease; display: inline-flex; align-items: center; min-height: 24px; }
.audience-col a:hover { color: #fff; }
.audience-col p { color: rgba(255,255,255,0.72); margin: 0; }
.audience-col .icon-wrap {
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-md);
  color: #FCD34D;
}

/* ---------- Footer ---------- */
.site-footer {
  background: #0B1220;
  color: rgba(255,255,255,0.75);
  padding-block: var(--space-2xl) var(--space-lg);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--space-xl);
  padding-bottom: var(--space-2xl);
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.site-footer h4 { color: #fff; font-size: 0.9375rem; margin-bottom: var(--space-md); }
.footer-logo { color: #fff; }
.footer-about { margin-top: var(--space-md); color: rgba(255,255,255,0.6); max-width: 34ch; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-sm); }
.site-footer ul a { display: inline-flex; align-items: center; min-height: 24px; }
.site-footer a:hover { color: #fff; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-md);
  padding-top: var(--space-lg);
  font-size: 0.8125rem;
}
.footer-disclaimer {
  background: rgba(252, 211, 77, 0.12);
  border: 1px solid rgba(252, 211, 77, 0.35);
  color: #FCD34D;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
}

/* ---------- Search overlay ----------
   A second entry point into the SAME real-time search wired on #search-form (hero):
   reachable from the sticky header at any scroll position. Shares `state.query` with
   the hero field (see site.mjs) — one source of truth, two places to reach it. */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  justify-content: center;
  padding: 10vh var(--space-lg) var(--space-lg);
}
.search-overlay[hidden] { display: none; }
.search-overlay-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, 0.6);
  backdrop-filter: blur(4px);
}
.search-overlay-panel {
  position: relative;
  z-index: 1;
  background: var(--color-card);
  color: var(--color-card-foreground);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  width: 100%;
  max-width: 560px;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.search-overlay-form {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--color-border);
}
.search-overlay-icon { color: var(--color-muted-foreground); flex-shrink: 0; }
.search-overlay-form input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 1.0625rem;
  color: var(--color-foreground);
  min-height: 44px;
}
.search-overlay-form input::placeholder { color: var(--color-muted-foreground); }
.search-overlay-close { border: none; flex-shrink: 0; }
.search-overlay-results {
  overflow-y: auto;
  padding: var(--space-sm);
}
.search-overlay-hint,
.search-overlay-empty {
  margin: 0;
  padding: var(--space-lg);
  text-align: center;
  color: var(--color-muted-foreground);
  font-size: 0.9375rem;
}
.search-result-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  min-height: 44px;
  justify-content: center;
  transition: background 150ms ease;
}
.search-result-item:hover,
.search-result-item:focus-visible { background: var(--color-muted); }
.search-result-category {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-link);
}
.search-result-title { font-weight: 600; color: var(--color-card-foreground); }
.search-result-reason {
  font-size: 0.8125rem;
  color: var(--color-muted-foreground);
}
.search-result-reason strong { font-weight: 600; color: var(--color-label); }
.search-overlay-more {
  display: block;
  text-align: center;
  padding: var(--space-md);
  margin-top: var(--space-xs);
  border-top: 1px solid var(--color-border);
  font-weight: 600;
  color: var(--color-link);
  min-height: 44px;
  line-height: 44px;
}
.search-overlay-more:hover { text-decoration: underline; }

/* Applied to <body> while the search overlay or the template modal is open, so the
   page behind a fixed, full-viewport panel cannot be scrolled with it. */
body.no-scroll { overflow: hidden; }

/* ---------- Modal (template generator) ----------
   Shell for "Dinamik Dilekçe/Form Üreticisi", opened for `template`-type records.
   UI only — see the HTML comment above #template-modal-overlay and the one above
   wireTemplateModal in site.mjs for what is deliberately left for a follow-up slice.
   Token choice: the design-system spec (MASTER.md) shows a literal `background: white`
   for `.modal`; that is swapped for `--color-card` / `--color-card-foreground` here so
   the panel inverts correctly in dark mode, matching every other surface on this page. */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
}
.modal-overlay[hidden] { display: none; }
.modal-overlay-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, 0.6);
  backdrop-filter: blur(4px);
}
.modal {
  position: relative;
  z-index: 1;
  background: var(--color-card);
  color: var(--color-card-foreground);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  width: 100%;
  max-width: 560px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  padding: var(--space-xl);
  gap: var(--space-md);
  overflow-y: auto;
}
.modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
}
.modal-head-meta { display: flex; flex-direction: column; gap: var(--space-xs); }
.modal-kicker {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-link);
}
.modal-title { margin: 0; font-size: 1.375rem; color: var(--color-heading); }
.modal-close { flex-shrink: 0; border: none; }
.modal-desc { margin: 0; color: var(--color-muted-foreground); }
.modal-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-lg);
  background: var(--color-background);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  min-height: 120px;
}
.modal-placeholder {
  margin: 0;
  color: var(--color-muted-foreground);
  font-size: 0.9375rem;
  text-align: center;
}
.modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border);
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .quick-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  /* Collapsed into a panel under the header. .site-header is position:sticky, so
     it is the containing block for this absolutely positioned panel. Visibility is
     driven by [data-open], which site.mjs keeps in sync with the toggle's
     aria-expanded — the button is never a dead control. */
  .primary-nav {
    display: none;
    position: absolute;
    inset-inline: 0;
    top: 100%;
    flex-direction: column;
    gap: 0;
    padding: var(--space-sm) var(--space-md);
    background: var(--color-card);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
  }
  .primary-nav[data-open="true"] { display: flex; }
  .primary-nav a {
    display: flex;
    align-items: center;
    min-height: 44px;
    border-bottom: none;
  }
  .nav-toggle { display: inline-flex; }
  .quick-grid { grid-template-columns: repeat(2, 1fr); }
  .card-grid { grid-template-columns: 1fr; }
  .source-grid { grid-template-columns: 1fr; }
  .audience-grid { grid-template-columns: 1fr; gap: var(--space-2xl); }
  .footer-grid { grid-template-columns: 1fr; }
  .filter-bar { align-items: flex-start; }
  section { padding-block: var(--space-2xl); }
}
@media (max-width: 480px) {
  .header-actions .btn-inert { display: none; }
  .quick-grid { grid-template-columns: 1fr; }
  .card-grid { grid-template-columns: 1fr; }
  .search-form { flex-direction: column; }
  .search-form button { justify-content: center; }
  .category-head { flex-direction: column; align-items: flex-start; gap: var(--space-sm); }
  /* The stacked head has no horizontal room left to push against. */
  .category-link { margin-left: 0; }
  /* Both overlays become a bottom sheet: full-width, docked to the viewport edge,
     rounded only on the top corners so the panel reads as anchored, not floating. */
  .search-overlay { padding: 0; align-items: flex-end; }
  .search-overlay-panel { max-width: none; max-height: 85vh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .modal-overlay { padding: 0; align-items: flex-end; }
  .modal { max-width: none; max-height: 92vh; padding: var(--space-lg); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .modal-foot .btn { width: 100%; justify-content: center; }
}

/* ---------- Template Modal Form Elements ---------- */
.template-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.form-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-heading);
}
.form-hint {
  font-size: 0.75rem;
  color: var(--color-muted-foreground);
  margin-bottom: var(--space-xs);
}
.form-input {
  border: 1px solid var(--color-border);
  background: var(--color-background);
  color: var(--color-foreground);
  border-radius: var(--radius-sm);
  padding: 10px var(--space-md);
  font-size: 1rem;
  outline: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.form-input:focus-visible {
  border-color: var(--color-link);
  box-shadow: 0 0 0 2px rgba(3, 105, 161, 0.2);
}
.form-textarea {
  min-height: 8rem;
  resize: vertical;
}

/* ---------- Print Layout (High-Quality Institutional Petition) ---------- */
.print-container {
  display: none;
}

@media print {
  /* Hide all UI elements */
  .skip-link, .draft-banner, .trust-strip, .site-header, .search-overlay, main, .site-footer, .modal-overlay {
    display: none !important;
  }

  /* Show only the print container */
  .print-container {
    display: block !important;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    background: white;
  }

  body {
    background: white;
    margin: 0;
    padding: 0;
    color: black;
  }

  @page {
    size: A4;
    margin: 25mm 25mm 25mm 30mm; /* Standard official document margins */
  }

  .petition-page {
    font-family: "Times New Roman", Times, serif; /* Standard official Turkish document font */
    font-size: 12pt;
    line-height: 1.5;
    color: black;
    width: 100%;
  }

  .petition-header-row {
    text-align: right;
    margin-bottom: 40px;
  }

  .petition-date {
    display: inline-block;
  }

  .petition-target {
    text-align: center;
    font-size: 12pt;
    font-weight: bold;
    margin-bottom: 40px;
    line-height: 1.3;
  }

  .petition-subject {
    font-weight: bold;
    margin-bottom: 20px;
    text-align: justify;
  }

  .petition-body {
    text-align: justify;
    text-indent: 1.5cm;
    margin-bottom: 40px;
    white-space: pre-wrap;
  }

  .petition-sig-row {
    display: flex;
    justify-content: space-between;
    margin-top: 60px;
  }

  .petition-sig-left, .petition-sig-right {
    width: 45%;
  }

  .petition-sig-right {
    text-align: center;
  }

  .petition-sig-right p, .petition-sig-left p {
    margin: 0 0 5px 0;
    color: black;
  }

  .petition-signature-space {
    margin-top: 20px;
    height: 50px;
  }

  .petition-disclaimer {
    margin-top: 80px;
    font-size: 9pt;
    font-style: italic;
    color: #555;
    text-align: center;
    border-top: 1px solid #ccc;
    padding-top: 10px;
  }
}