/* ═══════════════════════════════════════════════════════════════
   Demir Hukuk — Araçlar sayfası
   Paylaşılan header/footer/btn/lang/booking home.css'ten gelir.
   ═══════════════════════════════════════════════════════════════ */

:root { --tools-hero-display: clamp(2.4rem, 5vw + 1rem, 4.5rem); }

/* ════════ Hero ════════ */
.tools-hero {
  position: relative;
  background: var(--surface-ink);
  color: var(--text-on-ink);
  overflow: hidden;
  margin-top: -5rem;
  padding: clamp(8rem, 16vh, 11rem) 0 clamp(3rem, 7vh, 4.5rem);
}
.tools-hero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 82% 0%, rgba(185, 138, 82, 0.18), transparent 55%);
  pointer-events: none;
}
.tools-hero__motif {
  position: absolute; inset: 0;
  background: url("../assets/motif-meander.svg") repeat;
  background-size: 38px 38px; opacity: 0.05; pointer-events: none;
}
.tools-hero__inner { position: relative; max-width: 52rem; }
.tools-hero__crumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  font-family: var(--font-ui); font-size: var(--text-xs);
  color: var(--text-on-ink-muted); margin-bottom: var(--space-5);
}
.tools-hero__crumb a { color: var(--text-on-ink-muted); text-decoration: none; }
.tools-hero__crumb a:hover { color: var(--copper-300); text-decoration: underline; text-underline-offset: 0.18em; }
.tools-hero__crumb a:focus-visible { outline: none; box-shadow: var(--ring-focus); border-radius: var(--radius-xs); }
.tools-hero__crumb .ph-light { color: var(--ink-500); }
.tools-hero__crumb [aria-current="page"] { color: var(--copper-300); }
.tools-hero__eyebrow { color: var(--text-accent-on-ink); margin-bottom: var(--space-4); }
.tools-hero__title { font-size: var(--tools-hero-display); color: var(--paper-50); letter-spacing: -0.025em; text-wrap: balance; margin: 0 0 var(--space-5); }
.tools-hero__lede { font-size: var(--text-md); line-height: 1.6; color: var(--ink-200); max-width: 54ch; text-wrap: pretty; margin: 0; }

/* ════════ Araç dizini ════════ */
.tools-dir { padding-block: var(--section-y); }
.tools-dir .section-head { max-width: 52rem; }

.tools-dir__bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-4); margin-bottom: var(--space-6);
}
.tools-search {
  position: relative; flex: 1 1 22rem; max-width: 32rem;
}
.tools-search .ph-light {
  position: absolute; left: var(--space-4); top: 50%; transform: translateY(-50%);
  color: var(--text-muted); font-size: 1.25rem; pointer-events: none;
}
.tools-search input {
  width: 100%;
  font-family: var(--font-body); font-size: var(--text-base); color: var(--text-body);
  padding: 0.8em 0.9em 0.8em 2.9em;
  background: var(--surface-card);
  border: var(--hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-inset);
  transition: border-color var(--dur-fast) var(--ease-standard);
}
.tools-search input:hover { border-color: var(--border-strong); }
.tools-search input:focus-visible { outline: none; border-color: var(--brand); box-shadow: var(--ring-focus); }
.tools-dir__count {
  font-family: var(--font-ui); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-muted);
  white-space: nowrap;
}

.tools-cats {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin-bottom: var(--space-6);
}
.tools-cat {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-family: var(--font-ui); font-weight: var(--weight-medium); font-size: var(--text-sm);
  color: var(--text-body);
  padding: 0.5em 0.9em;
  background: var(--surface-card);
  border: var(--hairline);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: var(--transition-color), border-color var(--dur-fast) var(--ease-standard);
}
.tools-cat .ph-light { font-size: 1.1em; color: var(--brand-deep); }
.tools-cat:hover { border-color: var(--border-strong); }
.tools-cat:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.tools-cat[aria-pressed="true"] { background: var(--ink-900); color: var(--paper-50); border-color: var(--ink-900); }
.tools-cat[aria-pressed="true"] .ph-light { color: var(--copper-300); }

.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: var(--space-4);
}
.tool-card {
  display: flex; align-items: flex-start; gap: var(--space-4);
  padding: var(--space-5);
  background: var(--surface-card);
  border: var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  text-decoration: none;
  transition: var(--transition-transform), var(--transition-shadow), border-color var(--dur-base) var(--ease-standard);
}
.tool-card:hover {
  transform: translateY(var(--hover-lift));
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
  text-decoration: none;
}
.tool-card:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.tool-card__icon { color: var(--brand-deep); font-size: 1.6rem; flex-shrink: 0; margin-top: 0.1em; }
.tool-card__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.tool-card__name { font-family: var(--font-ui); font-weight: var(--weight-semibold); font-size: var(--text-base); color: var(--text-strong); line-height: 1.3; }
.tool-card__desc { font-size: var(--text-sm); line-height: 1.5; color: var(--text-muted); }
.tool-card__go { color: var(--text-faint); font-size: 1.1rem; flex-shrink: 0; transition: transform var(--dur-base) var(--ease-out), color var(--dur-fast) var(--ease-standard); }
.tool-card:hover .tool-card__go { color: var(--brand-deep); transform: translateX(0.25em); }

.tools-empty { grid-column: 1 / -1; color: var(--text-muted); font-size: var(--text-base); padding: var(--space-6) 0; text-align: center; }
.tools-dir__note { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-faint); font-style: italic; margin: var(--space-6) 0 0; max-width: 70ch; }
.tools-dir__cta { margin-top: var(--space-6); }