/* gedik.tech home page. Layout only; tokens and components live in system.css */

/* ---------- Hero ---------- */
.hero { position: relative; padding: calc(var(--bar-h) + var(--s-5)) 0 var(--s-8); overflow: hidden; border-bottom: 1px solid var(--rule-strong); }
.hero .topo { top: var(--bar-h); }
.hero-inner { position: relative; }
.hero-strip .meta { background: var(--paper); padding: 0 6px; margin: 0 -6px; }
.hero-strip { display: flex; justify-content: space-between; gap: var(--s-5); padding-bottom: var(--s-3); border-bottom: 1px solid var(--rule); }

.hero-grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-5);
  grid-template-areas:
    "name name name name name name name name fig fig fig fig"
    "copy copy copy copy copy copy spec spec spec spec spec spec";
  padding-top: var(--s-7);
}
.hero-name {
  grid-area: name; align-self: end;
  font-family: var(--f-display); font-weight: 400; font-size: var(--fs-hero);
  line-height: .86; letter-spacing: -.025em; margin-left: -.04em;
}
.hero-name em { color: var(--signal); padding-left: .42em; }
.hero-fig { grid-area: fig; max-width: 360px; justify-self: end; width: 100%; }
.hero-fig .fig-frame { aspect-ratio: 4 / 5; }
.hero-fig img { object-position: 50% 30%; }
.hero-copy { grid-area: copy; padding-top: var(--s-6); }
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.hero-spec { grid-area: spec; align-self: end; margin-top: var(--s-6); background: var(--paper); }
.live { display: inline-block; width: 8px; height: 8px; background: var(--signal); margin-right: var(--s-2); vertical-align: 1px; }
@media (prefers-reduced-motion: no-preference) {
  .live { animation: blink 2.4s steps(1) infinite; }
}
@keyframes blink { 50% { opacity: .25; } }

/* ---------- About ---------- */
.about-lead { font-family: var(--f-display); font-size: clamp(1.45rem, 2.1vw, 1.8rem); line-height: 1.25; color: var(--ink) !important; max-width: 38ch !important; margin-bottom: var(--s-5); }
.about-lead b { font-weight: 400; }
.about-lead em { color: var(--signal); }
.about-stats { margin-top: var(--s-7); max-width: 640px; }

/* ---------- Work ---------- */
.work-lede { max-width: 52ch; }
.case:first-of-type { margin-top: var(--s-7); border-top: 1px solid var(--rule); }
.case-side { grid-column: 9 / -1; align-self: start; }
.case-side .callout { margin-top: 0; }
.fig-sq { aspect-ratio: 1 / 1; }
.fig-wide { aspect-ratio: 16 / 9; }

.ledger-wrap { margin-top: var(--s-8); }
.ledger-title { margin-bottom: var(--s-3); }
.ledger-title b { color: var(--signal); }
.ledger-title--gap { margin-top: var(--s-7); }
.ledger--record .ledger-row { grid-template-columns: 3.5ch minmax(0, 3fr) minmax(0, 5fr); }

/* ---------- Toolkit ---------- */
.toolkit div { grid-template-columns: 14ch 1fr; padding: var(--s-4) 0; }
.toolkit dd { font-size: var(--fs-body); }
.toolkit dd span { color: var(--ink-3); }

/* ---------- Contact ---------- */
.contact-line { font-family: var(--f-display); font-weight: 400; font-size: clamp(3rem, 7.5vw, 6.5rem); line-height: .95; letter-spacing: -.02em; margin-bottom: var(--s-5); }
.contact-line em { color: var(--signal); }

.foot-note { margin-top: var(--s-4); }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .hero-strip .hide-s:last-child { display: none; }
}
@media (max-width: 900px) {
  .hero-strip .hide-s { display: none; }
  .hero-grid {
    grid-template-columns: 1fr; gap: 0;
    grid-template-areas: "name" "fig" "copy" "spec";
    padding-top: var(--s-6);
  }
  .hero-fig { justify-self: start; max-width: 100%; margin-top: var(--s-6); }
  .hero-fig .fig-frame { aspect-ratio: 4 / 3; }
  .hero-name em { padding-left: .3em; }
  .hero .topo { -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 45%); mask-image: linear-gradient(180deg, #000 0%, transparent 45%); opacity: .7; }
  .case-side { grid-column: 1 / -1; order: 1; }
  .ledger--record .ledger-row { grid-template-columns: 3.5ch minmax(0, 1fr); }
  .toolkit div { grid-template-columns: 1fr; gap: var(--s-1); }
}

/* ---------- Home (client) page ---------- */
.hero-head {
  grid-area: name; align-self: end;
  font-family: var(--f-display); font-weight: 400; font-size: clamp(3.2rem, 7.4vw, 7rem);
  line-height: .95; letter-spacing: -.02em; max-width: 14ch;
}
.hero-head em { color: var(--signal); }
.hero-fig figcaption a.meta { text-decoration: none; white-space: nowrap; }
.hero-fig figcaption a.meta:hover { color: var(--signal); }

.areas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--rule-strong); }
.area { padding: var(--s-5) 0 var(--s-5); border-bottom: 1px solid var(--rule); }
.area:nth-child(odd) { padding-right: var(--s-5); border-right: 1px solid var(--rule); }
.area:nth-child(even) { padding-left: var(--s-5); }
.area-no { font-family: var(--f-mono); font-size: var(--fs-meta); letter-spacing: .06em; color: var(--signal); }
.area h3 { font-family: var(--f-display); font-weight: 400; font-size: 1.7rem; line-height: 1.15; margin: var(--s-2) 0 var(--s-3); }
.area p { color: var(--ink-2); font-size: var(--fs-small); max-width: 52ch; }
.area p.meta { margin-top: var(--s-3); color: var(--ink-3); font-size: var(--fs-meta); }

/* ---------- Contact form ---------- */
.form { margin-top: var(--s-7); max-width: 760px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }
.field { display: block; margin-bottom: var(--s-5); }
.field .meta { display: block; margin-bottom: var(--s-2); }
.field .meta i { font-style: normal; text-transform: none; letter-spacing: 0; }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: var(--fs-body); color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: var(--s-3) var(--s-4); transition: border-color .15s var(--ease);
}
.field select { appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: var(--s-7); }
.field textarea { resize: vertical; min-height: 9rem; line-height: 1.55; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink-3); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); }
.field textarea::placeholder { color: var(--ink-3); }
.form-foot { display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap; }
.form-foot .btn { cursor: pointer; }
.form-foot .btn[disabled] { opacity: .5; cursor: wait; }
.form-status b { color: var(--signal); }
.form-status a, .form-alt a { color: var(--ink); }
.form-alt { margin-top: var(--s-6); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 900px) {
  .areas { grid-template-columns: 1fr; }
  .area:nth-child(odd), .area:nth-child(even) { padding-left: 0; padding-right: 0; border-right: 0; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
}