/* ---------- Home hero: text only (user decision 2026-09-25: the dragon hero is archived, "figürsüz, sade") ----------
   No image, video or canvas: the H1 is the LCP element and nothing is preloaded for it. The ground is ink-0 with one soft
   ember glow behind the seal (right, away from the text) and a faint seal of thin rings; both static. No animation
   beyond the CTA's hover/press transitions (the global reduced-motion rule in base.css covers those).
   CTA plate (SANAT-YONETIMI): mandarin fill, ink-0 Barlow Condensed 700 capitals, 1 px inset mandarin-deep edge, a 1 px
   mandarin-light catch light top-left, three ink-0 studs on each side. It does not glow or sweep. */
.hf {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--ink-0); color: var(--cream);
  border-bottom: 1px solid var(--line);
}
/* the glow: static radial light, strongest behind the seal, never under the text column */
.hf::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(42% 60% at 78% 50%, color-mix(in srgb, var(--mandarin-deep) 26%, transparent), transparent 70%),
    radial-gradient(70% 90% at 82% 55%, color-mix(in srgb, var(--ember) 30%, transparent), transparent 75%);
}
.hf__inner {
  display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: var(--s-8);
  padding-block: var(--s-8) var(--s-12);
}
.hf__content { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.hf__trust {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 var(--s-4);
  font: 800 0.8125rem/1.2 var(--font-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mandarin);
}
.hf__trust .icon { width: 1.1em; height: 1.1em; flex: none; }
.hf__heading { margin: 0 0 var(--s-6); }
.hf__title {
  margin: 0; font: 900 clamp(2.1rem, 8.6vw, 4.2rem)/1.06 var(--font-display); color: var(--cream); text-wrap: balance;
}
.hf__kicker {
  margin: 14px 0 0; font: 800 clamp(0.8rem, 2.6vw, 0.95rem)/1.35 var(--font-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-2);
}
.hf__cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.7em; min-height: 60px; padding: 0.7em 1em;
  font: 700 clamp(1.3rem, 5.6vw, 1.8rem)/1 var(--font-label); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
  color: var(--cta-label); background: var(--brand); text-decoration: none; border-radius: 4px;
  box-shadow: inset 0 0 0 1px var(--mandarin-deep), inset 1px 1px 0 1px var(--mandarin-light), 0 14px 40px rgba(0, 0, 0, 0.6);
  transition: background-color var(--dur-fast), translate var(--dur-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.hf__studs {
  flex: none; width: 8px; height: 1.9em;
  background: radial-gradient(circle at 36% 36%, var(--mandarin-light) 0 0.6px, transparent 1.1px) 50% 0 / 8px 33.333% repeat-y, radial-gradient(circle, var(--ink-0) 0 2.8px, transparent 3.3px) 50% 0 / 8px 33.333% repeat-y;
}
.hf__cta-label { display: block; padding-block: 0.12em; } /* room for the İ/Ü marks */
.hf__cta-label--long { font-size: 0.84em; }
@media (hover: hover) { .hf__cta:hover { background: var(--cta-hover); translate: 0 -1px; } }
.hf__cta:active, .hf__cta.is-going { background: var(--cta-pressed); translate: 0 1px; transition-duration: 50ms; }
.hf__cta:focus-visible { outline: 2px solid var(--mandarin-light); outline-offset: 3px; }
/* "Adres güncel": 6 px status dot + text-2 */
.hf__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: var(--s-4) 0 0; font: 800 0.8125rem/1.3 var(--font-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); }
.hf__meta::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--status); }
.hf__meta a { position: relative; color: var(--mandarin); min-height: 32px; display: inline-flex; align-items: center; letter-spacing: 0.06em; }
.hf__meta a::after { content: ""; position: absolute; inset: -8px -6px; } /* ≥44px hit area, same look */
.hf__chips { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); list-style: none; padding: 0; margin: var(--s-6) 0 0; }
.hf__chips li { margin: 0; }
.hf__chips a {
  display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; padding: 0 var(--s-4);
  font-weight: 600; font-size: 0.9375rem; text-decoration: none; color: var(--cream);
  background: var(--ink-1); border: 1px solid var(--line); border-radius: 4px; transition: border-color var(--dur-fast), color var(--dur-fast);
}
.hf__chips a:hover { border-color: var(--mandarin); color: var(--mandarin-light); }
.hf__chips .icon { width: 1.05em; height: 1.05em; color: var(--mandarin); }
/* the seal: thin mandarin rings and the M of the logo mark, drawn in outline at low opacity (decoration only) */
.hf__seal { display: none; fill: none; stroke: var(--mandarin); stroke-width: 1; opacity: 0.22; }
.hf__seal path { stroke-width: 1.4; stroke-linejoin: round; }

/* Phones: the H1 and the CTA stay in the first screen above the bottom bar; the CTA spans the column. */
@media (max-width: 767px) {
  .hf::before { background: radial-gradient(80% 50% at 85% 0%, color-mix(in srgb, var(--ember) 34%, transparent), transparent 75%); }
  .hf__inner { padding-block: var(--s-6) var(--s-8); }
  .hf__heading { margin-bottom: var(--s-4); }
  .hf__cta { align-self: stretch; }
}
/* Desktop: text left, the seal right */
@media (min-width: 900px) {
  .hf__inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); min-height: clamp(460px, 64svh, 640px); padding-block: var(--s-16); }
  .hf__seal { display: block; justify-self: center; width: min(100%, 400px); height: auto; }
  .hf__title { font-size: clamp(3rem, 4.6vw, 4.2rem); }
}