/* ============================================================================
   Page composition.

   Loaded by the home page and by the three pages that share its layout
   families (/ne-yapiyoruz/, /arastirma/, /politikalar/). pursula.css carries
   the design system; this file carries the shapes built out of it.

   THE STANDING RULE OF THIS FILE: the sentence is the design.

   There is no photography, no illustration, no diagram and no animated figure
   on any of these pages. Every one of them was removed on purpose, and adding
   one back is a decision, not a tidy-up:

     - The hero was a steerable SVG instrument with a drawn trail. It cost a
       full viewport of height, pushed the headline and both calls to action
       below the fold, and its only affordance was a tabindex, so almost
       nobody ever discovered it was interactive.
     - The ridge panorama and the bee-eater were atmosphere, not argument.
     - The loop was a rendered video. Its source is still in motion/ and its
       renders are still in assets/video, so it is one block of markup away
       from coming back.

   What is left is type, space and the ink/bone alternation. That alternation
   IS the page structure (DESIGN.md 5), so sections still take turns and never
   run three of the same in a row.

   TWO SHAPES DO ALL THE WORK. .hero__grid sets a headline against a single
   supporting paragraph. .split sets a section heading against its body. Both
   collapse to one column below 900px. Everything else is a list inside one of
   them.
   ========================================================================= */

/* ================================================================== hero == */

/* Not 100svh. A full-viewport hero on a laptop guarantees that the first thing
   under the headline is off screen, and the thing under this headline is the
   paragraph that explains it. The section is as tall as its content plus the
   page's own rhythm, so the whole block reads at 1440x900 without scrolling. */
.hero {
  padding-block: var(--pu-8) var(--pu-9);
}
@media (min-width: 768px) { .hero { padding-block: var(--pu-9) var(--pu-10); } }
@media (min-width: 1280px) { .hero { padding-block: var(--pu-10) var(--pu-11); } }

/* NO EYEBROW ON THIS HERO (founder's decision, 31 August 2026). The
   eyebrow-against-the-display-line pairing is the typographic signature of the
   system (DESIGN.md 4.2) and every composed page still opens on one; the home
   page is the one surface that does not have to label itself, and "Teknoloji
   şirketi · Ankara" named a category the first sentence already carries. If it
   comes back it is its own full-width grid row above the display line, and
   .hero__grid needs row-gap: 0 again so it sits tight against it. */

.hero__grid { display: grid; gap: var(--pu-6); }
@media (min-width: 900px) {
  /* TOP alignment, not bottom. The aside holds the paragraph AND the link
     cluster, so `end` aligned the LINKS and left the headline sitting 86px
     below the paragraph it belongs to. Top is what actually puts the headline
     and the paragraph on one optical line however many lines the headline
     takes in either language.

     The row-gap: 0 that used to be here went with the eyebrow: it existed to
     hold that one full-width row tight against the display line, and with two
     items in a single row it decides nothing. */
  .hero__grid {
    grid-template-columns: 7fr 5fr;
    column-gap: var(--pu-9);
    align-items: start;
  }
}
/* The hero shares the page's ONE left edge, so above 1200 the headline buys
   its width back from the column split rather than from a wider container:
   7fr of 1152 is 616px, which wraps this sentence to the four lines the 5.5rem
   ceiling exists to prevent. 8fr is 704px and holds it at two. */
@media (min-width: 1200px) { .hero__grid { grid-template-columns: 8fr 4fr; } }

/* NO max-width here on purpose: the 7fr column IS the measure, so the headline
   cannot be constrained twice and end up short of its own column. The ceiling
   is 5.5rem rather than .display's 7.5rem, because one sentence at 120px is a
   poster and not a headline - it wraps to four lines on a laptop and stops
   reading as a sentence at all. */
.hero__display {
  font-size: clamp(2.25rem, 1rem + 4.4vw, 5.5rem);
  line-height: 1.0;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.hero__aside .lead { max-width: 34ch; color: var(--fg); font-size: clamp(1.0625rem, 1rem + .45vw, 1.3125rem); }
@media (min-width: 900px) { .hero__aside { padding-bottom: var(--pu-2); } }

/* ================================================================= split == */

/* Heading left, body right. The one layout family every section below the
   hero uses, so a new section is a heading and a body and never a new grid. */
.split { display: grid; gap: var(--pu-6); }
@media (min-width: 900px) {
  /* 5fr of the wrap minus a 96px gutter is 309px at 900px, and the base clamp
     is sized off the VIEWPORT, so it dropped 41px type into that column: a
     long heading broke to seven lines here and to three one pixel below the
     breakpoint. A 64px gutter and a shallower slope keep the type tracking the
     column it lives in. Above about 1280 the 22ch cap takes over and this
     changes nothing. */
  .split { grid-template-columns: 5fr 7fr; gap: var(--pu-8); }
  .split__lead { font-size: clamp(1.75rem, 0.55rem + 2.6vw, 2.75rem); }
}
.split__lead {
  font-size: clamp(1.75rem, 1.1rem + 2.6vw, 2.75rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-wrap: balance;
  max-width: 22ch;
}
.split__body > p { max-width: 62ch; }
.split__body .lead { max-width: 52ch; }

/* ============================================================== numbered == */

/* A short enumerated argument. Hairline above each item, the number in the
   link colour, never a card and never a bullet. */
.numbered { list-style: none; counter-reset: part; }
.numbered__item {
  counter-increment: part;
  padding-block: var(--pu-5);
  border-top: 1px solid var(--rule);
}
.numbered__item h3 { display: flex; align-items: baseline; gap: var(--pu-4); }
.numbered__item h3::before {
  content: counter(part, decimal-leading-zero);
  font-family: var(--pu-font-mono);
  font-size: .8125rem;
  color: var(--link);
  font-variant-numeric: tabular-nums;
}
.numbered__item p { margin-top: var(--pu-3); color: var(--muted); max-width: 58ch; }

/* ================================================================== loop == */

/* Eight stages in four columns, full container width. Every colour here comes
   from a SURFACE token rather than from --pu-sand and --pu-ember directly, so
   the section can sit on bone or on ink without the numerals falling to
   1.43:1. That was not true while this list was ink-only. */
.loop__list {
  list-style: none;
  counter-reset: stage;
  display: grid;
  gap: 0;
}
.loop__stage {
  counter-increment: stage;
  padding-block: var(--pu-5);
  border-top: 1px solid var(--rule);
}
.loop__stage::before {
  content: counter(stage, decimal-leading-zero);
  display: block;
  font-family: var(--pu-font-mono);
  font-size: .75rem;
  color: var(--link);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--pu-2);
}
.loop__stage h3 { font-size: 1.125rem; font-stretch: 100%; }
.loop__stage p { margin-top: var(--pu-2); font-size: .9375rem; color: var(--muted); }

@media (min-width: 600px) {
  .loop__list { grid-template-columns: repeat(2, 1fr); column-gap: var(--pu-6); }
}
@media (min-width: 900px) {
  .loop__list { grid-template-columns: repeat(4, 1fr); column-gap: var(--pu-6); }
}

/* The eighth stage returns to the first. The layout has to say so at EVERY
   width or the list reads as a pipeline with an end. --signal is the one
   accent each surface reserves for the single thing that matters on it. */
.loop__stage--return { border-top-color: var(--signal-ui, var(--signal)); }
.loop__stage--return::before { color: var(--signal); }

/* ============================================================== products == */

/* NOTHING USES .products__grid OR .product--quiet TODAY, and both stay. There
   is one product on the site right now, so every products block is a single
   .product at full width: a two-column grid holding one article reads as a
   missing second item. These two rules are the shape the second product comes
   back into, and Pursuits was taken off the surfaces for now, not for good. */
.products__grid { display: grid; gap: var(--pu-7); }
@media (min-width: 900px) {
  /* Deliberately unequal. They are not peers: one is a named product with a
     live domain, one is in development. */
  .products__grid { grid-template-columns: 7fr 5fr; gap: var(--pu-8); align-items: start; }
}
.product {
  display: grid;
  gap: var(--pu-4);
  align-content: start;
  padding-top: var(--pu-5);
  border-top: 1px solid var(--rule);
}
.product__head { display: flex; align-items: center; gap: var(--pu-4); flex-wrap: wrap; }
.product__name { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem); font-weight: 700; letter-spacing: -0.025em; }
.product__line { font-size: 1.0625rem; color: var(--fg); }
.product__body { color: var(--muted); }
.product--quiet .product__name { color: var(--muted); }

/* THE MADVISE LOCKUP STANDS IN FOR THE TYPESET PRODUCT NAME.
   There is no vector master for it, only a 267px raster, so it is displayed
   well under native width: at ~150px that is 1.8x, which stays crisp on a 2x
   screen, and the cap is what stops a wide viewport from scaling it to the
   point where the raster shows. The <picture> around it on .surf-read swaps
   the ink mark for the amber one in dark theme, because .surf-read is bone in
   light and ink-deep in dark and one flat colour cannot serve both; .surf-brand
   is ink in BOTH themes, so the card there carries the amber mark alone.
   Both files are cropped to the same canvas, so the swap moves nothing. */
.product-lockup {
  display: block;
  width: clamp(126px, 12vw, 152px);
  height: auto;
}
.product-lockup--lg { width: clamp(150px, 16vw, 190px); }

/* ============================================================ principles == */

/* Nine short lines. The only motion permitted here is feedback about where
   the reader currently is: nine items animating in individually would read as
   a slideshow. Used by /arastirma/. */
.principles__list { list-style: none; counter-reset: p; position: relative; }
.principle {
  counter-increment: p;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--pu-4);
  align-items: baseline;
  padding-block: var(--pu-4);
  padding-inline-start: var(--pu-4);
  border-inline-start: 2px solid transparent;
  transition: border-color var(--pu-dur-base) var(--pu-ease), color var(--pu-dur-base) var(--pu-ease);
  color: var(--muted);
}
.principle::before {
  content: counter(p, decimal-leading-zero);
  font-family: var(--pu-font-mono);
  font-size: .75rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  /* transition is not inherited: without this the counter snapped to the
     accent while the row it belongs to eased over 240ms. */
  transition: color var(--pu-dur-base) var(--pu-ease);
}
.principle[data-active='true'] { border-inline-start-color: var(--link); color: var(--fg); }
.principle[data-active='true']::before { color: var(--link); }

/* The home page's company-identity section was removed: the trade name,
   address, VKN, registry number and phone are published where a verification
   reviewer and a regulator are sent, which is /yasal-bilgiler/, with the short
   form on /iletisim/ and /kurumsal/. Its `.identity` rules went with it. The
   identity grid those pages use is `.identity__grid`, in pursula.css. */

/* =============================================================== contact == */

.close__grid { display: grid; gap: var(--pu-6); }
@media (min-width: 900px) {
  .close__grid { grid-template-columns: 5fr 7fr; gap: var(--pu-9); align-items: start; }
}
.close__grid .lead { max-width: 40ch; }
.close__mail {
  display: inline-flex;
  align-items: center;
  font-family: var(--pu-font-mono);
  font-size: 1rem;
  color: var(--link);
  text-decoration: none;
  min-height: 44px;
}
.close__mail:hover { text-decoration: underline; text-underline-offset: .25em; }

/* ================================================================ policy == */

/* The policy index. One group per obligation family, each a heading and a
   list of the documents that satisfy it, so a reader can see what exists AND
   what does not apply yet. */
.policy-group + .policy-group {
  margin-top: var(--pu-8);
  padding-top: var(--pu-8);
  border-top: 1px solid var(--rule);
}
.policy-group__head { display: grid; gap: var(--pu-3); }
.policy-group__head h2 { font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.75rem); }
.policy-group__head p { color: var(--muted); max-width: 60ch; }

.policy-list { list-style: none; margin-top: var(--pu-6); display: grid; gap: 0; }
@media (min-width: 768px) {
  .policy-list { grid-template-columns: repeat(2, 1fr); column-gap: var(--pu-7); }
}
.policy-item { border-top: 1px solid var(--rule); }
.policy-item__link {
  display: grid;
  gap: var(--pu-2);
  padding-block: var(--pu-5);
  text-decoration: none;
  color: inherit;
  transition: opacity var(--pu-dur-fast) var(--pu-ease);
}
.policy-item__title {
  display: flex;
  align-items: baseline;
  gap: var(--pu-3);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--link);
}
.policy-item__title::after {
  content: '';
  width: 1.1em; height: 1px;
  background: currentColor;
  transition: width var(--pu-dur-base) var(--pu-ease);
  flex-shrink: 0;
}
@media (hover: hover) and (pointer: fine) {
  .policy-item__link:hover .policy-item__title::after { width: 1.9em; }
}
.policy-item p { font-size: .9375rem; color: var(--muted); max-width: 52ch; }

/* A row for an obligation that is real but NOT yet in force for this company.
   It is not a link, because there is nothing to link to, and saying so is
   more honest than leaving the reader to wonder whether we forgot. */
.policy-item__pending {
  display: grid;
  gap: var(--pu-2);
  padding-block: var(--pu-5);
}
/* A pending row is NOT a link, so it must not wear the link colour or the
   link's trailing hairline. It keeps the title's size and weight, which is
   what keeps the two grid columns aligned. */
.policy-item__pending .policy-item__title { color: var(--fg); }
.policy-item__pending .policy-item__title::after { display: none; }

.policy-item__when {
  font-size: .75rem;
  font-weight: 600;
  font-stretch: 82%;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}