/* ============================================================================
   What a Friend — web İris theme.
   Single source of truth for the site's colour, type, spacing and components.
   Ported from the mobile app's design tokens (mobile/theme/tokens.ts): a soft
   lavender→peach ground, frosted white surfaces lifted by shadow (not borders),
   and violet (#6C4CE0) as the single accent. Edit THIS file to re-theme.
   ============================================================================ */

/* ---- design tokens (light) ---- */
:root {
  --bg: #f0edf5;
  --bg-from: #e9e6f6;
  --bg-to: #faf1e9;
  --surface: #ffffff;
  --surface-2: #f1edf7;
  --border: #ebe7f1;
  --text: #2c2542;
  --text-soft: #5d5675;
  --text-mute: #9c96ac;
  --accent: #6c4ce0;
  --accent-soft: #ede8fb;
  --accent-text: #ffffff;
  --success: #3f8065;
  --warning: #b5854a;
  --danger: #bc5a43;
  --info: #4e7ca8;
  --overlay: rgba(28, 22, 42, 0.45);
  /* hairlines: the site's structural material. --rule separates content sitting
     on the page ground, --rule-strong marks an edge that has to be felt. */
  --rule: rgba(44, 37, 66, 0.13);
  --rule-strong: rgba(44, 37, 66, 0.22);
  /* the one dark chapter band */
  --band-dark: #221b38;

  /* on-photo layer (scheme-independent, mirrors mobile onPhoto) */
  --on-photo-text: #ffffff;
  --on-photo-soft: rgba(255, 255, 255, 0.85);
  --on-photo-mute: rgba(255, 255, 255, 0.7);
  --member-card-from: #8265f2;
  --member-card-to: #5a3ec9;

  /* radii + shadows (mobile radius/shadow scale) */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-full: 999px;
  --shadow-sm: 0 1px 2px rgba(28, 22, 42, 0.06);
  --shadow-md: 0 4px 16px rgba(28, 22, 42, 0.08);
  --shadow-lg: 0 20px 50px rgba(28, 22, 42, 0.14);

  /* motion (mobile motion.ts durations) */
  --t-fast: 0.16s;
  --t-base: 0.24s;
  --t-slow: 0.36s;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* rhythm: one section pad and one head-to-content gap for the whole site */
  --sec-pad: clamp(70px, 6.6vw, 100px);
  --sec-gap: clamp(38px, 4vw, 56px);
  --nav-h: 68px;
}

/* ---- dark scheme (mobile darkColors) ----
   Applied via the [data-theme="dark"] attribute the inline head script sets from
   localStorage (falling back to the OS preference), so the nav toggle can override
   the device setting and the choice persists across pages. */
:root[data-theme="dark"] {
  --bg: #1d1826;
  --bg-from: #17131f;
  --bg-to: #221b28;
  --surface: #282232;
  --surface-2: #2f2838;
  --border: #362f44;
  --text: #eae6f4;
  --text-soft: #ada7be;
  --text-mute: #8e88a0;
  --accent: #7b5fe0;
  --accent-soft: #2a2340;
  --success: #57a97c;
  --warning: #cba268;
  --danger: #d07254;
  --info: #6c9bc7;
  --overlay: rgba(0, 0, 0, 0.55);
  --rule: rgba(234, 230, 244, 0.14);
  --rule-strong: rgba(234, 230, 244, 0.26);
  --band-dark: #16121f;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 18px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.5);
}

/* ---- reset + base ---- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
}
body {
  counter-reset: sec;
  background: var(--bg);
  background-image: linear-gradient(180deg, var(--bg-from) 0%, var(--bg) 45%, var(--bg-to) 100%);
  background-attachment: scroll;
  background-repeat: no-repeat;
  color: var(--text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, h4 {
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.08;
  color: var(--text);
  text-wrap: balance;
}
p {
  text-wrap: pretty;
}
a {
  color: inherit;
  text-decoration: none;
}
img {
  max-width: 100%;
  display: block;
}
::selection {
  background: var(--accent-soft);
  color: var(--text);
}

/* ---- icons (lucide, hydrated by icons.js into [data-icon]) ---- */
.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.icon svg {
  display: block;
  width: 1em;
  height: 1em;
}
/* inline icons that sit next to text (feature headings, brand-more, circle rows) */
.icon-text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ============================================================================
   LAYOUT SYSTEM
   The page is built on one spine: a fixed content column, a single vertical
   rhythm, and a hairline rule under every section head. Surfaces are earned —
   only photographs and the two violet conversion blocks get a filled box;
   everything else is separated by rules and space, not by cards.
   ============================================================================ */
.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
}
.wrap-narrow {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 32px;
}
.section {
  padding: var(--sec-pad) 0;
}
.section-tight {
  padding: calc(var(--sec-pad) * 0.62) 0;
}
/* The first section after a page-hero already has the hero's rule above it. */
.page-hero + .section {
  padding-top: calc(var(--sec-pad) * 0.72);
}
@media (max-width: 640px) {
  .wrap,
  .wrap-narrow {
    padding: 0 22px;
  }
}

/* ---- section head ------------------------------------------------------
   Two columns on one baseline: the label and the title on the left, the
   description on the right, a rule underneath spanning both. This is what
   stops a short paragraph from floating alone in a 1180px band. Sections with
   no description keep the same rule, so the rhythm never breaks. */
.sec-head {
  counter-increment: sec;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  column-gap: 64px;
  row-gap: 18px;
  align-items: end;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--sec-gap);
}
.sec-head > .sec-head-title {
  grid-column: 1;
}
.sec-head > .sec-desc {
  grid-column: 2;
  margin-bottom: 4px;
}
.sec-head-aside {
  grid-column: 2;
  justify-self: end;
  align-self: end;
  margin-bottom: 4px;
}
@media (max-width: 860px) {
  .sec-head {
    grid-template-columns: 1fr;
    row-gap: 14px;
  }
  .sec-head > .sec-desc,
  .sec-head-aside {
    grid-column: 1;
    justify-self: start;
  }
}

/* ---- section labels ---- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 16px;
}
.eyebrow::before {
  content: "";
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}
/* inside a numbered section head the rule is replaced by the section number,
   which carries the accent while the label itself drops back to a quiet tone */
.sec-head .eyebrow {
  color: var(--text-mute);
  gap: 12px;
}
.sec-head .eyebrow::before {
  content: counter(sec, decimal-leading-zero);
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  color: var(--accent);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.band-dark .sec-head .eyebrow {
  color: rgba(255, 255, 255, 0.5);
}
.band-dark .sec-head .eyebrow::before {
  color: #fff;
}
.sec-title {
  font-size: clamp(2.05rem, 3.9vw, 3.3rem);
  letter-spacing: -0.036em;
  line-height: 1.04;
  margin: 0;
}
.sec-desc {
  font-size: 0.98rem;
  line-height: 1.75;
  color: var(--text-mute);
  max-width: 44ch;
}
/* A note that trails a block: quieter than body copy, tied to what precedes it. */
.sec-note {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--text-mute);
  max-width: 78ch;
}

/* ---- buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 26px;
  border-radius: var(--r-full);
  font-weight: 600;
  font-size: 0.94rem;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-base) var(--ease),
    background var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.btn:active {
  transform: scale(0.97);
}
.btn-primary {
  background: var(--accent);
  color: var(--accent-text);
  box-shadow: var(--shadow-md);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(108, 76, 224, 0.35);
}
.btn-ghost {
  background: transparent;
  color: var(--on-photo-text);
  border: 1px solid rgba(255, 255, 255, 0.4);
}
.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.12);
}
/* Quiet secondary: an outlined action that does not compete with .btn-primary. */
.btn-tonal {
  background: transparent;
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--rule-strong);
}
.btn-tonal:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 1px var(--accent);
  color: var(--accent);
}
/* Text link that behaves like an action: used in section heads and after grids. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--accent);
  transition: gap var(--t-fast) var(--ease);
}
.link-arrow:hover {
  gap: 12px;
}

/* ---- nav ---------------------------------------------------------------
   Fixed and translucent by default. On a page whose first element is the photo
   hero (body[data-nav="over"]) the bar starts fully transparent and inverted so
   the photograph runs edge to edge behind it; app.js adds .scrolled past the
   fold and the normal bar fades back in. */
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  backdrop-filter: saturate(1.4) blur(16px);
  -webkit-backdrop-filter: saturate(1.4) blur(16px);
  border-bottom: 1px solid var(--border);
  transition: background var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.nav-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 15px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (max-width: 640px) {
  .nav-inner {
    padding: 13px 22px;
  }
}
/* Brand lockup: the ring mark followed by the "What a Friend" wordmark. The mark
   is hydrated into [data-logo] by icons.js and sized off font-size, so it tracks
   the wordmark automatically; 0.95em puts its height just above the wordmark's
   cap height. `color` here feeds the mark's left ring via currentColor, so it
   inverts with the scheme. */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-weight: 800;
  font-size: 1.42rem;
  letter-spacing: -0.035em;
  color: var(--text);
  transition: color var(--t-base) var(--ease);
}
.wordmark b {
  color: var(--accent);
  font-weight: 800;
  transition: color var(--t-base) var(--ease);
}
.wordmark .mark {
  display: inline-flex;
  font-size: 0.95em;
  line-height: 0;
}
.wordmark .mark svg {
  display: block;
  overflow: visible;
}
/* The full name is long, so step it down once the nav collapses to the drawer and
   the bar has to hold the lockup plus both buttons on a phone-width screen. */
@media (max-width: 560px) {
  .wordmark {
    font-size: 1.18rem;
  }
}
.nav-links {
  display: flex;
  gap: 32px;
  align-items: center;
}
.nav-links a {
  color: var(--text-soft);
  font-size: 0.89rem;
  font-weight: 500;
  transition: color var(--t-fast);
}
.nav-links a:hover,
.nav-links a.active {
  color: var(--text);
}
.nav-cta {
  background: var(--accent);
  color: var(--accent-text) !important;
  padding: 10px 20px;
  border-radius: var(--r-full);
  font-weight: 600;
  font-size: 0.86rem;
  box-shadow: var(--shadow-sm);
}
.nav-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}
.theme-toggle {
  width: 38px;
  height: 38px;
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--t-fast), transform var(--t-fast), border-color var(--t-base),
    color var(--t-base);
}
.theme-toggle:hover {
  transform: translateY(-1px);
  background: var(--accent-soft);
}
.theme-toggle svg {
  width: 18px;
  height: 18px;
}
.theme-toggle .icon-sun {
  display: none;
}
.theme-toggle .icon-moon {
  display: block;
}
:root[data-theme="dark"] .theme-toggle .icon-sun {
  display: block;
}
:root[data-theme="dark"] .theme-toggle .icon-moon {
  display: none;
}
.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--text);
  font-size: 1.5rem;
  cursor: pointer;
  transition: color var(--t-base);
}

/* transparent-over-photo state */
body[data-nav="over"] nav:not(.scrolled) {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}
body[data-nav="over"] nav:not(.scrolled) .wordmark,
body[data-nav="over"] nav:not(.scrolled) .wordmark b,
body[data-nav="over"] nav:not(.scrolled) .nav-toggle {
  color: var(--on-photo-text);
}
body[data-nav="over"] nav:not(.scrolled) .nav-links a {
  color: rgba(255, 255, 255, 0.78);
}
body[data-nav="over"] nav:not(.scrolled) .nav-links a:hover,
body[data-nav="over"] nav:not(.scrolled) .nav-links a.active {
  color: #fff;
}
body[data-nav="over"] nav:not(.scrolled) .nav-cta {
  background: rgba(255, 255, 255, 0.16);
  color: #fff !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
body[data-nav="over"] nav:not(.scrolled) .nav-cta:hover {
  background: rgba(255, 255, 255, 0.26);
}
body[data-nav="over"] nav:not(.scrolled) .theme-toggle {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
}
/* the drawer is a solid panel, so it always uses the page colours */
@media (max-width: 820px) {
  .nav-links {
    position: fixed;
    top: var(--nav-h);
    left: 0;
    right: 0;
    background: var(--surface);
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 22px 28px;
    gap: 18px;
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    transform: translateY(-160%);
    transition: transform var(--t-slow) var(--ease);
  }
  .nav-links.open {
    transform: translateY(0);
  }
  body[data-nav="over"] nav:not(.scrolled) .nav-links a {
    color: var(--text-soft);
  }
  body[data-nav="over"] nav:not(.scrolled) .nav-links a.active {
    color: var(--text);
  }
  body[data-nav="over"] nav:not(.scrolled) .nav-cta {
    background: var(--accent);
    color: var(--accent-text) !important;
    box-shadow: var(--shadow-sm);
  }
  .nav-toggle {
    display: block;
  }
}

/* ---- hero ----
   Full-bleed photo hero: community-*.jpg photos cross-fade behind a gradient
   scrim, with the eyebrow / headline / CTA layered on top as HTML. The photos
   carry no baked-in type, so a dark scrim guarantees text contrast in both
   schemes. Cross-fade is driven by heroSlider() in app.js via the .active class. */
.hero {
  position: relative;
  width: 100%;
  min-height: min(92vh, 880px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: #1a1530;
}
.hero-slides {
  position: absolute;
  inset: 0;
}
.hero .hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1.2s var(--ease), transform 7s linear;
}
.hero .hero-slide.active {
  opacity: 1;
  transform: scale(1);
}
/* scrim: darkens the bottom-left where the copy sits, plus a short top wash so
   the transparent nav keeps its contrast against a bright frame */
.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(18, 14, 32, 0.5) 0%, rgba(18, 14, 32, 0.12) 22%, rgba(18, 14, 32, 0.06) 40%, rgba(18, 14, 32, 0.78) 100%),
    linear-gradient(75deg, rgba(18, 14, 32, 0.58) 0%, rgba(18, 14, 32, 0.12) 55%, transparent 80%);
}
.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-top: calc(var(--nav-h) + 40px);
  padding-bottom: 68px;
  max-width: 1180px;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.71rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-photo-soft);
  margin-bottom: 22px;
}
.hero-eyebrow::before {
  content: "";
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}
.hero-title {
  color: var(--on-photo-text);
  font-size: clamp(2.3rem, 5.2vw, 4.1rem);
  line-height: 1.03;
  letter-spacing: -0.038em;
  max-width: 16ch;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}
.hero-sub {
  color: var(--on-photo-soft);
  font-size: clamp(1rem, 1.5vw, 1.16rem);
  line-height: 1.6;
  max-width: 44ch;
  margin: 22px 0 32px;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.3);
}
.btn-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
/* glass button for use over photos */
.btn-glass {
  background: rgba(255, 255, 255, 0.14);
  color: var(--on-photo-text);
  border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.btn-glass:hover {
  background: rgba(255, 255, 255, 0.24);
}
@media (max-width: 640px) {
  .hero {
    min-height: 86vh;
  }
  .hero-content {
    padding-bottom: 52px;
  }
}

/* ---- marquee band ------------------------------------------------------
   A quiet ticker directly under the hero, masked at both edges so it fades into
   the page ground instead of sitting in a coloured strip of its own. */
.marquee-band {
  background: none;
  border-bottom: 1px solid var(--rule);
  padding: 17px 0;
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 44s linear infinite;
}
.marquee-band:hover .marquee-track {
  animation-play-state: paused;
}
@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
.marquee-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 26px;
  white-space: nowrap;
  font-size: 0.82rem;
  letter-spacing: 0.01em;
  color: var(--text-mute);
}
.marquee-item .dot {
  color: var(--rule-strong);
  font-size: 0.42rem;
}
.marquee-item b {
  font-weight: 600;
  color: var(--text-soft);
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track {
    animation: none;
  }
}

/* ---- rule grid ---------------------------------------------------------
   The de-boxed replacement for card grids: cells sit directly on the page
   ground and are separated by hairlines. Columns divide vertically on wide
   screens and stack into horizontal rules on narrow ones, so the structure
   survives the breakpoint instead of dissolving into a list. */
.rule-grid {
  display: grid;
  gap: 0;
}
.rule-grid > * {
  padding: 6px 34px 4px;
  border-left: 1px solid var(--rule);
}
.rule-grid > *:first-child {
  padding-left: 0;
  border-left: none;
}
.rule-grid.cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.rule-grid.cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.rule-grid.cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* rows past the first need a rule above them too */
.rule-grid.cols-4 > *:nth-child(4n + 1),
.rule-grid.cols-3 > *:nth-child(3n + 1),
.rule-grid.cols-2 > *:nth-child(2n + 1) {
  padding-left: 0;
  border-left: none;
}
.rule-grid.cols-4 > *:nth-child(n + 5),
.rule-grid.cols-3 > *:nth-child(n + 4),
.rule-grid.cols-2 > *:nth-child(n + 3) {
  margin-top: 38px;
  padding-top: 34px;
  border-top: 1px solid var(--rule);
}
@media (max-width: 980px) {
  .rule-grid.cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .rule-grid.cols-4 > *:nth-child(odd) {
    padding-left: 0;
    border-left: none;
  }
  .rule-grid.cols-4 > *:nth-child(even) {
    border-left: 1px solid var(--rule);
    padding-left: 34px;
  }
  .rule-grid.cols-4 > *:nth-child(n + 3) {
    margin-top: 38px;
    padding-top: 34px;
    border-top: 1px solid var(--rule);
  }
}
@media (max-width: 760px) {
  .rule-grid.cols-4,
  .rule-grid.cols-3,
  .rule-grid.cols-2 {
    grid-template-columns: 1fr;
  }
  .rule-grid > * {
    padding: 26px 0 0 !important;
    border-left: none !important;
    border-top: 1px solid var(--rule) !important;
    margin-top: 26px !important;
  }
  .rule-grid > *:first-child {
    padding-top: 0 !important;
    margin-top: 0 !important;
    border-top: none !important;
  }
}

/* cell contents (why / club / value blocks all share this shape) */
.cell-icon {
  display: block;
  font-size: 1.45rem;
  color: var(--accent);
  margin-bottom: 18px;
  line-height: 1;
}
.rule-grid h3,
.rule-grid h4 {
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.018em;
  margin-bottom: 10px;
}
.rule-grid p {
  font-size: 0.89rem;
  line-height: 1.7;
  color: var(--text-mute);
}
.rule-grid ul {
  margin: 10px 0 0 17px;
  font-size: 0.9rem;
  line-height: 1.75;
  color: var(--text-soft);
}
.rule-grid .badge,
.rule-grid .tagline {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.rule-grid .name {
  font-size: 1.04rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-bottom: 9px;
}

/* ---- definition rows ---------------------------------------------------
   Long-form entries: the label sits in a narrow left column, the prose in a
   wide right one, separated from the previous row by a rule. Used wherever a
   heading introduces one or more paragraphs (event formats, membership steps,
   fee terms). */
.def-list {
  display: block;
}
.def-row {
  display: grid;
  grid-template-columns: minmax(0, 0.44fr) minmax(0, 1fr);
  column-gap: 64px;
  padding: 30px 0;
  border-top: 1px solid var(--rule);
}
.def-row:first-child {
  border-top: none;
  padding-top: 4px;
}
.def-row h3 {
  grid-column: 1;
  grid-row: 1;
  font-size: 1.12rem;
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin: 0;
  align-self: start;
}
.def-row > *:not(h3) {
  grid-column: 2;
}
.def-row p {
  color: var(--text-soft);
  line-height: 1.75;
  font-size: 0.96rem;
}
.def-row p + p {
  margin-top: 12px;
}
.def-row ul {
  margin: 12px 0 0 18px;
  color: var(--text-soft);
  line-height: 1.8;
  font-size: 0.96rem;
}
@media (max-width: 800px) {
  .def-row {
    grid-template-columns: 1fr;
    row-gap: 10px;
    padding: 24px 0;
  }
  .def-row > *:not(h3) {
    grid-column: 1;
  }
}

/* ---- checklist ---------------------------------------------------------
   Conditions and steps. A marker (a number or a tick) in the accent colour,
   the line beside it, a rule above each entry — no card. */
.checklist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 64px;
}
.checklist.one-col {
  grid-template-columns: 1fr;
}
.check-item {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 17px 0;
  border-top: 1px solid var(--rule);
}
.checklist > .check-item:nth-child(-n + 2),
.checklist.one-col > .check-item:first-child {
  border-top: none;
  padding-top: 0;
}
.checklist.one-col > .check-item:nth-child(2) {
  border-top: 1px solid var(--rule);
  padding-top: 17px;
}
.check-mark {
  flex-shrink: 0;
  min-width: 20px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  line-height: 1.7;
}
.check-mark .icon {
  font-size: 0.95rem;
  transform: translateY(2px);
}
.check-item p {
  font-size: 0.96rem;
  line-height: 1.6;
  color: var(--text);
}
@media (max-width: 700px) {
  .checklist {
    grid-template-columns: 1fr;
  }
  .checklist > .check-item:nth-child(2) {
    border-top: 1px solid var(--rule);
    padding-top: 17px;
  }
}

/* ---- media grid (events, deals) ----------------------------------------
   The photograph is the object; the caption sits on the page ground beneath it
   rather than inside a white box. Nothing here is a card. */
.media-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px 28px;
}
@media (max-width: 860px) {
  .media-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px 22px;
  }
}
@media (max-width: 560px) {
  .media-grid {
    grid-template-columns: 1fr;
  }
}

.ev-card,
.deal-card {
  display: flex;
  flex-direction: column;
}
.ev-cover,
.deal-cover {
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--surface-2);
  box-shadow: var(--shadow-sm);
}
.ev-cover {
  aspect-ratio: 4 / 3;
}
/* the partner banners are generated at ~23:10 with their offer text baked in,
   so the frame has to match the artwork or the wording gets cropped away */
.deal-cover {
  aspect-ratio: 23 / 10;
}
.ev-cover img,
.deal-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease);
}
.ev-card:hover .ev-cover img,
.deal-card:hover .deal-cover img {
  transform: scale(1.04);
}
.ev-cover-empty {
  background: linear-gradient(135deg, var(--accent-soft), var(--surface-2));
}
.ev-body,
.deal-body {
  padding: 16px 2px 0;
}
.ev-tagline,
.deal-body .badge {
  display: block;
  font-size: 0.69rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 9px;
}
.ev-card:hover .ev-title,
.deal-card:hover .deal-body .name {
  color: var(--accent);
}
.ev-title {
  transition: color var(--t-fast);
  font-size: 1.08rem;
  line-height: 1.28;
  letter-spacing: -0.02em;
  margin-bottom: 7px;
}
.ev-meta {
  font-size: 0.88rem;
  color: var(--text-soft);
}
.deal-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.deal-logo {
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  object-fit: cover;
  background: var(--surface-2);
}
.deal-body .name {
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  transition: color var(--t-fast);
}
.deal-body p {
  font-size: 0.9rem;
  color: var(--text-soft);
  line-height: 1.6;
}
/* A featured partner is marked in the caption, not by outlining the photo. */
.deal-card.featured .badge::after {
  content: " · öne çıkan";
  color: var(--text-mute);
}
/* ---- lead item ----------------------------------------------------------
   A uniform grid gives the eye nowhere to land. The first item in a live grid
   runs across two columns with a wider crop and a larger caption, so each
   section opens on one clear focal point and the remaining cards read as the
   list beneath it. Five items then fill two even rows: 2, then 3. */
@media (min-width: 861px) {
  .media-grid > *:first-child {
    grid-column: span 2;
  }
  .media-grid > *:first-child .ev-cover {
    aspect-ratio: 16 / 9;
  }
  .media-grid > *:first-child .ev-title {
    font-size: 1.5rem;
    line-height: 1.2;
    margin-bottom: 9px;
  }
  .media-grid > *:first-child .ev-meta,
  .media-grid > *:first-child .deal-body p {
    font-size: 0.95rem;
  }
  .media-grid > *:first-child .deal-body .name {
    font-size: 1.4rem;
  }
  .media-grid > *:first-child .deal-logo {
    width: 34px;
    height: 34px;
  }
}

/* trailing count line under a capped grid */
.live-more {
  margin-top: 30px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  font-size: 0.9rem;
  color: var(--text-mute);
}

/* ---- full-bleed band ---------------------------------------------------
   One dark chapter break in the middle of the page. It runs edge to edge so the
   scroll reads as sections rather than as one continuous wash. */
.band-dark {
  background: var(--band-dark);
  color: #fff;
  padding: calc(var(--sec-pad) * 0.94) 0;
}
.band-dark h2,
.band-dark h3,
.band-dark h4 {
  color: #fff;
}
.band-dark .sec-head {
  border-bottom-color: rgba(255, 255, 255, 0.16);
}
.band-dark .eyebrow {
  color: rgba(255, 255, 255, 0.72);
}
.band-dark .sec-desc,
.band-dark p {
  color: rgba(255, 255, 255, 0.74);
}
.band-dark .rule-grid > * {
  border-left-color: rgba(255, 255, 255, 0.16);
}
.band-dark .rule-grid > *:nth-child(n + 3) {
  border-top-color: rgba(255, 255, 255, 0.16);
}
.band-dark .cell-icon {
  color: rgba(255, 255, 255, 0.9);
}
.band-dark .link-arrow {
  color: #fff;
}
@media (max-width: 760px) {
  .band-dark .rule-grid > * {
    border-top-color: rgba(255, 255, 255, 0.16) !important;
  }
}

/* ---- app showcase (inside the dark band) ---- */
.showcase-lead {
  font-size: 1.05rem;
  line-height: 1.75;
  max-width: 52ch;
}
.feature-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 64px;
}
.feature {
  padding: 22px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.feature-row > .feature:nth-child(-n + 2) {
  border-top: none;
  padding-top: 0;
}
.feature h4 {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-bottom: 7px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.feature h4 .icon {
  color: rgba(255, 255, 255, 0.72);
}
.feature p {
  font-size: 0.91rem;
  line-height: 1.6;
}
@media (max-width: 720px) {
  .feature-row {
    grid-template-columns: 1fr;
  }
  .feature-row > .feature:nth-child(2) {
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    padding-top: 22px;
  }
}

/* ---- CTA band ----------------------------------------------------------
   The one deliberately loud surface on the site: the violet member-card
   gradient, used only where the page asks for the application. */
.cta-band {
  background: linear-gradient(135deg, var(--member-card-from), var(--member-card-to));
  border-radius: var(--r-xl);
  padding: 58px 52px;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 36px;
  flex-wrap: wrap;
  box-shadow: var(--shadow-lg);
}
.cta-band h2 {
  color: #fff;
  font-size: clamp(1.55rem, 2.4vw, 2rem);
  letter-spacing: -0.03em;
  max-width: 460px;
}
.cta-band p {
  color: rgba(255, 255, 255, 0.85);
  margin-top: 10px;
  max-width: 420px;
  line-height: 1.6;
}
.btn-light {
  background: #fff;
  color: var(--member-card-to);
}
.btn-light:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}
@media (max-width: 640px) {
  .cta-band {
    padding: 40px 26px;
    flex-direction: column;
    align-items: flex-start;
  }
}
.cta-inline {
  margin-top: 38px;
}

/* ---- footer ---- */
footer {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 62px 0 26px;
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.1fr;
  gap: 40px;
  padding-bottom: 38px;
  border-bottom: 1px solid var(--border);
}
.foot-brand .wordmark {
  margin-bottom: 14px;
}
.foot-brand p {
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--text-soft);
  max-width: 280px;
}
footer h5 {
  color: var(--text-mute);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 16px;
}
footer ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
footer li a {
  font-size: 0.88rem;
  color: var(--text-soft);
  transition: color var(--t-fast);
}
footer li a:hover {
  color: var(--accent);
}
.foot-bottom {
  display: flex;
  justify-content: space-between;
  padding-top: 22px;
  font-size: 0.8rem;
  color: var(--text-mute);
  flex-wrap: wrap;
  gap: 10px;
}
@media (max-width: 820px) {
  .foot-grid {
    grid-template-columns: 1fr 1fr;
    row-gap: 32px;
  }
}

/* ---- page hero (inner pages) -------------------------------------------
   The same two-column head as a section, at page scale: label and title left,
   the standfirst right, a rule underneath. Left-aligned so the inner pages
   share the home page's spine instead of centring on their own. */
.page-hero {
  padding: calc(var(--nav-h) + 74px) 0 0;
  text-align: left;
}
.page-hero > .wrap,
.page-hero > .wrap-narrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  column-gap: 64px;
  row-gap: 18px;
  align-items: end;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--rule);
}
.page-hero-title {
  grid-column: 1;
  grid-row: 1;
}
.page-hero .eyebrow {
  margin-bottom: 16px;
}
.page-hero h1 {
  font-size: clamp(2.1rem, 4vw, 3.1rem);
  letter-spacing: -0.035em;
  margin: 0;
}
.page-hero > * > p {
  grid-column: 2;
  grid-row: 1;
  font-size: 1.02rem;
  color: var(--text-soft);
  max-width: 46ch;
  margin: 0 0 4px;
  line-height: 1.7;
}
/* anything else the hero carries (contact shortcuts, the form stepper) spans
   both columns and sits under the title block, still above the rule */
.page-hero > * > *:not(.page-hero-title):not(p) {
  grid-column: 1 / -1;
  grid-row: 2;
  margin-top: 34px;
}
@media (max-width: 860px) {
  .page-hero > .wrap,
  .page-hero > .wrap-narrow {
    grid-template-columns: 1fr;
  }
  .page-hero-title,
  .page-hero > * > p,
  .page-hero > * > *:not(.page-hero-title):not(p) {
    grid-column: 1;
    grid-row: auto;
  }
}
/* a narrow hero (single-column pages) drops the second column entirely */
.page-hero-narrow > .wrap-narrow {
  grid-template-columns: 1fr;
}
.page-hero-narrow > .wrap-narrow > p {
  grid-column: 1;
  grid-row: auto;
  max-width: 60ch;
}
/* the legal pages carry only a title and a one-line date stamp */
.page-hero-tight .legal-meta {
  align-self: end;
  justify-self: end;
  text-align: right;
}

/* ---- reveal-on-scroll ---- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}
.reveal.in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ============================================================================
   Content pages (topluluk / üyelik / hakkımızda) — remaining blocks.
   ============================================================================ */
/* An alternate ground marks a chapter without a hard band. */
.section-alt {
  background: var(--surface);
}

/* trailing note after the partner grid */
.brand-more {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  font-size: 0.94rem;
  line-height: 1.7;
  color: var(--text-mute);
  align-items: flex-start;
}
.brand-more .icon {
  color: var(--accent);
  margin-top: 3px;
}

/* ---- lokaller ----------------------------------------------------------
   A single highlighted passage inside the clubs section. Kept flat: an accent
   rule down its left edge instead of a filled violet box, so it reads as an
   aside rather than a second call to action. */
.circle-box {
  margin-top: 46px;
  padding: 4px 0 4px 30px;
  border-left: 2px solid var(--accent);
}
.circle-box h3 {
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}
.circle-box p {
  color: var(--text-soft);
  line-height: 1.7;
  max-width: 68ch;
}
.circle-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  margin: 18px 0;
}
.circle-tag {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
}
.circle-tag .icon {
  color: var(--accent);
}
.circle-note {
  margin-top: 6px;
  font-size: 0.92rem;
  color: var(--text-mute);
  align-items: flex-start;
}
.circle-note .icon {
  color: var(--accent);
  margin-top: 3px;
}

/* ---- story block ---- */
.story-wrap {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 64px;
  align-items: start;
}
.story-quote {
  font-size: 1.32rem;
  font-weight: 700;
  line-height: 1.42;
  letter-spacing: -0.024em;
  color: var(--text);
}
.story-stamp {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
}
.story-stamp b {
  font-size: 1.5rem;
  letter-spacing: -0.03em;
  color: var(--accent);
  display: block;
}
.story-stamp span {
  font-size: 0.88rem;
  color: var(--text-mute);
}
.story-body p {
  color: var(--text-soft);
  line-height: 1.8;
  margin-bottom: 16px;
}
@media (max-width: 800px) {
  .story-wrap {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* ---- prose / legal documents ---- */
.doc {
  max-width: 800px;
}
.doc h2 {
  font-size: 1.5rem;
  margin: 40px 0 14px;
}
.doc h3 {
  font-size: 1.1rem;
  margin: 26px 0 8px;
}
.doc p,
.doc li {
  color: var(--text-soft);
  line-height: 1.75;
  margin-bottom: 12px;
}
.doc ul,
.doc ol {
  margin: 0 0 14px 20px;
}
.doc .lead {
  font-size: 1.1rem;
  color: var(--text-soft);
  line-height: 1.7;
}

/* ---- accordion (KVKK / sözleşme / kurallar) ----------------------------
   Twenty-four rules is a long list, so it is set as ruled rows rather than a
   panel: the rule count is the structure, and the open state is the only place
   that gets a surface. */
.accordion {
  margin-top: 0;
  border-top: 1px solid var(--rule);
}
.acc-item {
  border-bottom: 1px solid var(--rule);
}
.acc-head {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  padding: 18px 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  transition: color var(--t-fast);
}
.acc-head:hover {
  color: var(--accent);
}
.acc-head .plus {
  color: var(--accent);
  font-size: 1.2rem;
  font-weight: 400;
  transition: transform var(--t-base) var(--ease);
  flex-shrink: 0;
}
.acc-item.open .plus {
  transform: rotate(45deg);
}
.acc-body {
  display: none;
  padding: 0 4px 22px;
  max-width: 78ch;
}
.acc-item.open .acc-body {
  display: block;
}
.acc-body p,
.acc-body li {
  color: var(--text-soft);
  line-height: 1.75;
  font-size: 0.94rem;
}

/* ============================================================================
   Forms (başvuru) + OTP.
   ============================================================================ */
.form-card {
  background: var(--surface);
  border-radius: var(--r-xl);
  padding: 44px;
  box-shadow: var(--shadow-md);
  margin-top: var(--sec-gap);
}
/* Mark at the head of the form card. Sits alone above the first block, sized in
   px rather than em because it has no wordmark next to it to track. */
.form-mark {
  display: flex;
  justify-content: center;
  color: var(--text);
  font-size: 30px;
  line-height: 0;
  margin-bottom: 34px;
}
@media (max-width: 640px) {
  .form-card {
    padding: 26px 20px;
  }
}
.form-block {
  margin-bottom: 34px;
}
/* the rule separates blocks; the first one sits directly under the mark */
.form-block + .form-block {
  padding-top: 30px;
  border-top: 1px solid var(--rule);
}
.form-block:last-of-type {
  margin-bottom: 0;
}
.form-block h3 {
  font-size: 1.1rem;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.form-block .hint {
  font-size: 0.88rem;
  color: var(--text-mute);
  margin-bottom: 20px;
}
.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field.full {
  grid-column: 1 / -1;
}
.field label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-soft);
}
.field .req {
  color: var(--danger);
}
.field input,
.field select,
.field textarea {
  font-family: inherit;
  font-size: 0.95rem;
  padding: 12px 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field input::placeholder,
.field textarea::placeholder {
  color: var(--text-mute);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.field textarea {
  resize: vertical;
  min-height: 84px;
}
@media (max-width: 600px) {
  .field-grid {
    grid-template-columns: 1fr;
  }
}

/* consents */
.consent-block {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 24px;
}
.consent-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--text-soft);
  line-height: 1.45;
  cursor: pointer;
}
.consent-row input {
  margin-top: 2px;
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
  flex-shrink: 0;
}
.link-inline {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
}
.form-note {
  text-align: center;
  font-size: 0.82rem;
  color: var(--text-mute);
  margin-top: 14px;
}
.form-error {
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  color: var(--danger);
  border-radius: var(--r-md);
  padding: 12px 14px;
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: 18px;
}
.hidden {
  display: none !important;
}

/* stepper (application progress) */
.stepper {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0 18px;
}
.step-pill {
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-mute);
  padding-top: 12px;
  border-top: 2px solid var(--rule);
}
.step-pill.now {
  color: var(--accent);
  border-top-color: var(--accent);
}
@media (max-width: 720px) {
  .stepper {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 14px;
  }
}

/* ---- OTP verify panel ---- */
.otp-card {
  max-width: 460px;
  margin: 40px auto 0;
  background: var(--surface);
  border-radius: var(--r-xl);
  padding: 40px 36px;
  box-shadow: var(--shadow-lg);
  text-align: center;
}
.otp-card h2 {
  font-size: 1.5rem;
  margin-bottom: 10px;
}
.otp-card p {
  color: var(--text-soft);
  line-height: 1.6;
  margin-bottom: 24px;
}
.otp-card p b {
  color: var(--text);
}
.otp-input {
  width: 100%;
  text-align: center;
  letter-spacing: 0.5em;
  font-size: 1.6rem;
  font-weight: 700;
  padding: 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
}
.otp-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.otp-resend {
  margin-top: 18px;
  font-size: 0.9rem;
  color: var(--text-mute);
}
.otp-resend button {
  background: none;
  border: none;
  color: var(--accent);
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.9rem;
}
.otp-resend button:disabled {
  color: var(--text-mute);
  cursor: default;
}

/* success panel */
.result-card {
  max-width: 500px;
  margin: 40px auto 0;
  background: var(--surface);
  border-radius: var(--r-xl);
  padding: 44px 36px;
  box-shadow: var(--shadow-lg);
  text-align: center;
}
.result-icon {
  width: 64px;
  height: 64px;
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--success) 16%, transparent);
  color: var(--success);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  margin: 0 auto 20px;
}
.result-card h2 {
  font-size: 1.6rem;
  margin-bottom: 12px;
}
.result-card p {
  color: var(--text-soft);
  line-height: 1.65;
  margin-bottom: 22px;
}
.btn-block {
  width: 100%;
  justify-content: center;
}
.spin {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---- legal document pages ------------------------------------------------
   The document body is rendered from markdown by assets/legal.js (same subset the
   app renders). Reading a contract is a long, dense task, so this block trades the
   marketing typography for measure and rhythm: a narrow column, generous leading
   and clear numbered headings. Tables are the lawyer's identity blocks — they scroll
   inside their own box rather than pushing the page sideways. */
.page-hero-tight {
  padding: calc(var(--nav-h) + 58px) 0 0;
}
.page-hero-tight > .wrap {
  grid-template-columns: minmax(0, 1fr) auto;
  padding-bottom: 26px;
}
.legal-meta {
  font-size: 0.85rem !important;
  color: var(--text-mute) !important;
}
.legal-body {
  color: var(--text-soft);
  font-size: 0.95rem;
  line-height: 1.75;
}
.legal-body h2 {
  font-size: 1.15rem;
  color: var(--text);
  margin: 34px 0 12px;
  line-height: 1.4;
}
.legal-body h3 {
  font-size: 1rem;
  color: var(--text);
  margin: 24px 0 8px;
}
.legal-body > *:first-child {
  margin-top: 0;
}
.legal-body p {
  margin-bottom: 14px;
}
.legal-body strong {
  color: var(--text);
  font-weight: 600;
}
.legal-body ul,
.legal-body ol {
  margin: 0 0 16px 20px;
}
.legal-body li {
  margin-bottom: 8px;
}
.legal-table-wrap {
  overflow-x: auto;
  margin: 0 0 18px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.legal-table-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.legal-table-wrap td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.legal-table-wrap tr:last-child td {
  border-bottom: none;
}
.legal-table-wrap td:first-child {
  white-space: nowrap;
  color: var(--text);
}
.legal-empty {
  color: var(--text-mute);
  padding: 28px 0;
}
.legal-foot {
  margin-top: 34px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: 0.85rem;
  color: var(--text-mute);
  line-height: 1.7;
}

/* ---- prose (hand-written long copy: hakkımızda) ---- */
.prose {
  color: var(--text-soft);
  line-height: 1.8;
}
.prose p {
  margin-bottom: 14px;
}

/* ---- info table (kurumsal künye) ----
   A definition list in table clothing. Label column stays narrow so the values line
   up; it collapses to stacked rows on a phone, where two columns would wrap badly. */
.info-table {
  border-top: 1px solid var(--rule);
}
.info-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 16px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--rule);
  font-size: 0.92rem;
}
.info-row:last-child {
  border-bottom: none;
}
.info-row span {
  color: var(--text-mute);
}
.info-row b {
  color: var(--text);
  font-weight: 500;
}
.info-row a {
  color: var(--accent);
}
@media (max-width: 620px) {
  .info-row {
    grid-template-columns: 1fr;
    gap: 3px;
  }
}

/* ---- legal index (iletisim.html) ---- */
.legal-index {
  display: grid;
  border-top: 1px solid var(--rule);
}
.legal-index-item {
  display: block;
  padding: 16px 4px;
  border-bottom: 1px solid var(--rule);
  transition: padding-left var(--t-base) var(--ease);
}
.legal-index-item:hover {
  padding-left: 12px;
}
.legal-index-item:hover b {
  color: var(--accent);
}
.legal-index-item b {
  display: block;
  color: var(--text);
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 3px;
  transition: color var(--t-fast);
}
.legal-index-item span {
  color: var(--text-mute);
  font-size: 0.86rem;
  line-height: 1.6;
}

/* ---- footer company block ----
   The seller's trade identity, static in the HTML rather than fetched: a payment
   provider's reviewer and the e-commerce regulation both expect to find it without
   running JavaScript. */
.foot-company {
  padding: 20px 0 4px;
  border-bottom: 1px solid var(--border);
  font-size: 0.78rem;
  line-height: 1.7;
  color: var(--text-mute);
}
.foot-company p {
  margin: 0;
}
.foot-company b {
  color: var(--text-soft);
  font-weight: 600;
}
.foot-company a {
  color: var(--text-mute);
}
.foot-company a:hover {
  color: var(--accent);
}

/* ---- contact page ----
   The two things a person actually wants (write us / call us) sit in the hero as
   real targets; the trade register lives at the foot of the page in a quieter
   version of the same table. */
.contact-direct {
  display: flex;
  gap: 0 56px;
  flex-wrap: wrap;
}
.contact-card {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: flex-start;
  transition: color var(--t-fast);
}
.contact-card:hover b {
  color: var(--accent);
}
.contact-card .icon-text {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-mute);
}
.contact-card b {
  font-size: 1.02rem;
  color: var(--text);
  font-weight: 600;
  transition: color var(--t-fast);
}
.info-table-quiet {
  font-size: 0.88rem;
}
.info-table-quiet b {
  font-weight: 500;
  color: var(--text-soft);
}

.btn-sm {
  padding: 8px 14px;
  font-size: 0.85rem;
}
.legal-actions {
  margin-top: 30px;
}

/* ---- print ----
   A legal page is the one thing on this site people actually print (or "save as
   PDF", which is the same pipeline). Chrome, the site furniture and the theme all
   drop away; what is left is the contract on white paper, with link targets spelled
   out because a printed link that only says "İletişim" is useless. */
@media print {
  nav,
  footer,
  .theme-toggle,
  .nav-toggle,
  .legal-actions,
  .legal-foot {
    display: none !important;
  }
  :root,
  :root[data-theme="dark"] {
    --bg: #fff;
    --surface: #fff;
    --text: #000;
    --text-soft: #1a1a1a;
    --text-mute: #444;
    --border: #bbb;
    --accent: #000;
  }
  body {
    background: #fff;
    color: #000;
  }
  .page-hero,
  .page-hero-tight {
    padding: 0 0 18px;
    text-align: left;
    border-bottom: 1px solid #bbb;
    margin-bottom: 18px;
  }
  .page-hero > .wrap,
  .page-hero > .wrap-narrow {
    display: block;
    padding-bottom: 0;
    border-bottom: none;
  }
  .section {
    padding: 0;
  }
  .wrap,
  .wrap-narrow {
    max-width: none;
    padding: 0;
  }
  .legal-body {
    font-size: 10.5pt;
    line-height: 1.55;
    color: #000;
  }
  .legal-body h2 {
    margin-top: 18px;
    page-break-after: avoid;
  }
  .legal-body h3 {
    page-break-after: avoid;
  }
  .legal-table-wrap {
    overflow: visible;
    page-break-inside: avoid;
  }
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
  a {
    text-decoration: underline;
  }
}

/* A disabled primary button still has to look like a button — just clearly not
   ready yet. Used by the application form, where submit stays locked until every
   consent is ticked. */
.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}