@charset "UTF-8";

/* =============================================================================
   جستجوی شناسه کالا و خدمات — stylesheet
   -----------------------------------------------------------------------------
   This is an instrument, not a brochure. The reader is an accountant who needs
   one 13-digit code, its VAT rate and whether it is still valid, then wants to
   get back to the invoice they were filling in. So the code is the loudest
   thing in every row, state is encoded in form as well as words, and the accent
   colour is kept clear of the semantic greens and ambers so "valid / expired"
   never has to compete with "this is a link".
   ========================================================================== */

/* ------------------------------------------------------------------ fonts -- */
/* Already present on this host and used by the parent site, so the widget and
   kariyahesab.com share a voice. swap keeps first paint instant. */
@font-face {
  font-family: "Yekan Bakh";
  src: url("/fonts/Yekan-Bakh-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Yekan Bakh";
  src: url("/fonts/Yekan-Bakh-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

/* ----------------------------------------------------------------- tokens -- */
:root {
  color-scheme: light;

  /* Body/border/background greys sampled from kariyahesab.com's own
     stylesheet. --accent is the actual corporate colour, given directly
     (#2a84e0) rather than sampled — the marketing site's own primary
     (#124497) is close but not it. */
  --ground:      #edf3fc;
  --surface:     #ffffff;
  --surface-2:   #f1f5f9;
  --ink:         #0c1e21;
  --muted:       #67787a;
  --faint:       #a9b8b8;
  --line:        #dbe2e9;
  --line-strong: #c9d1d1;

  --brand-navy:     #2a84e0;
  --brand-navy-ink: #ffffff;

  --accent:      #2a84e0;
  --accent-hi:   #1c6dc0;
  --accent-soft: #e3f0fc;
  --accent-ink:  #ffffff;

  /* No more separate input-focus token: it existed only to keep the ring
     blue while --accent was green. Now that --accent is the same corporate
     blue, the ring can just use it directly. */

  --ok:          #16a34a;
  --ok-soft:     #dcfce7;
  --warn:        #c22a1f;
  --warn-soft:   #fbe7e5;

  --shadow-sm: 0 1px 2px rgb(11 25 30 / 6%), 0 1px 3px rgb(11 25 30 / 4%);
  --shadow-md: 0 2px 6px rgb(11 25 30 / 7%), 0 8px 24px rgb(11 25 30 / 6%);

  --radius:    10px;
  --radius-sm: 7px;

  --step--1: clamp(.75rem, .72rem + .12vw, .8rem);
  --step-0:  clamp(.875rem, .85rem + .14vw, .95rem);
  --step-1:  clamp(1rem, .96rem + .2vw, 1.1rem);
  --step-2:  clamp(1.2rem, 1.1rem + .5vw, 1.5rem);
  --step-3:  clamp(1.45rem, 1.3rem + .8vw, 2rem);

  --gutter: clamp(.85rem, .5rem + 1.6vw, 1.75rem);
  --wrap:   1120px;
}

/* Light is the default and stays the default regardless of the operating
   system's setting — this is a work tool that sits beside spreadsheets and
   invoices, and it should look the same on every machine in an office.
   Dark applies only when the reader asks for it with the toggle, which stamps
   data-theme="dark" on the root element. There is deliberately no
   prefers-color-scheme rule here. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --ground:      #0a1220;
  --surface:     #101a2e;
  --surface-2:   #16223b;
  --ink:         #e7ebfa;
  --muted:       #97a3c4;
  --faint:       #6f7ba0;
  --line:        #223257;
  --line-strong: #304776;

  --brand-navy:     #2a84e0;
  --brand-navy-ink: #ffffff;

  --accent:      #4e9fe8;
  --accent-hi:   #6fb2ec;
  --accent-soft: #14304f;
  --accent-ink:  #06192e;

  --ok:          #4ade80;
  --ok-soft:     #0f2e1c;
  --warn:        #ff6b5e;
  --warn-soft:   #391613;

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 40%);
  --shadow-md: 0 2px 6px rgb(0 0 0 / 45%), 0 10px 28px rgb(0 0 0 / 35%);
}

/* ------------------------------------------------------------------ base -- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: "Yekan Bakh", Tahoma, "Segoe UI", system-ui, sans-serif;
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 700; text-wrap: balance; line-height: 1.3; }

button, input, select { font: inherit; color: inherit; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.wrap {
  width: min(var(--wrap), 100%);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* Codes are Latin digits inside RTL prose; without isolation the bidi
   algorithm reorders them against adjacent punctuation. */
.ltr {
  direction: ltr;
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------- masthead -- */
.masthead {
  border-block-end: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
}

.masthead__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding-block: .85rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-inline-end: auto;
  text-decoration: none;
  color: inherit;
}

/* Intrinsic size is 528×154; height is fixed and width follows so the box is
   reserved before the image lands and the header does not jump. The logo is
   fixed-blue artwork, so it keeps a small white card behind it regardless of
   theme — guarantees contrast against a dark masthead without needing a
   separate dark-mode filter, and is harmless on the light one. */
.brand__logo {
  /* content-box on purpose: the global border-box rule made block-size include
     the padding, so a declared 28px with 5px top and bottom left the artwork
     itself only 18px tall — which is why the logo looked shrunken. Here
     block-size is the artwork and the padding is the card around it. */
  box-sizing: content-box;
  block-size: 42px;
  inline-size: auto;
  flex: none;
  display: block;
  background: #fff;
  border-radius: 8px;
  padding: 6px 11px;
}

.brand__rule {
  inline-size: 1px;
  block-size: 26px;
  background: var(--line);
  flex: none;
}

.brand__tool { min-inline-size: 0; }
.brand__name { font-size: var(--step-0); font-weight: 700; letter-spacing: -.01em; display: block; line-height: 1.25; }
.brand__sub  { display: block; font-size: var(--step--1); color: var(--muted); line-height: 1.2; }

/* On a narrow screen the tool name would push the logo off; the logo alone
   still identifies the page. */
@media (max-width: 480px) {
  .brand__rule, .brand__sub { display: none; }
  .brand__logo { block-size: 30px; padding: 5px 8px; }
}

.iconbtn {
  display: grid;
  place-items: center;
  inline-size: 36px;
  block-size: 36px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.iconbtn:hover { color: var(--accent); border-color: var(--line-strong); }
.iconbtn svg { inline-size: 18px; block-size: 18px; }

/* ------------------------------------------------------------------ hero -- */
/* Deliberately small. The search field is the point of the page, so it gets the
   emphasis a hero image would otherwise take. */
.intro { padding-block: clamp(1.25rem, 3vw, 2.25rem) .5rem; }
.intro h1 { font-size: var(--step-3); letter-spacing: -.02em; }
.intro p {
  margin: .5rem 0 0;
  color: var(--muted);
  max-inline-size: 60ch;
}

/* ---------------------------------------------------------------- search -- */
.searchbar {
  position: sticky;
  inset-block-start: 0;
  z-index: 20;
  padding-block: .75rem;
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: blur(10px);
  border-block-end: 1px solid transparent;
  transition: border-color .2s, box-shadow .2s;
}
.searchbar[data-stuck="true"] {
  border-block-end-color: var(--line);
  box-shadow: var(--shadow-sm);
}

.field {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .3rem .3rem .3rem .9rem;
  padding-inline-start: 1rem;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: border-color .15s, box-shadow .15s;
}
.field:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.field__icon { color: var(--faint); flex: none; inline-size: 20px; block-size: 20px; }
.field input {
  flex: 1 1 auto;
  min-inline-size: 0;
  border: 0;
  background: none;
  padding-block: .7rem;
  font-size: var(--step-1);
}
.field input:focus { outline: none; }
.field input::placeholder { color: var(--faint); }

/* Tells the user which of the two lookup modes their input triggered — a
   13-digit code takes a different path than free text, and saying so out loud
   prevents "why did nothing match" confusion. */
.field__mode {
  flex: none;
  font-size: var(--step--1);
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .2rem .65rem;
  white-space: nowrap;
}
.field__mode[hidden] { display: none; }

.field__clear {
  flex: none;
  border: 0;
  background: none;
  color: var(--faint);
  cursor: pointer;
  padding: .45rem;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
}
.field__clear:hover { color: var(--ink); background: var(--surface-2); }
.field__clear[hidden] { display: none; }

/* ----------------------------------------------------------------- terms -- */
/* The parsed query, one chip per token. A شناسه and a word are different kinds
   of search, so they are marked differently rather than left to look alike. */
.terms {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  align-items: center;
  padding-block: .6rem .1rem;
}
.terms[hidden] { display: none; }

.terms__label {
  font-size: var(--step--1);
  color: var(--faint);
  margin-inline-end: .15rem;
}

.term {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .2rem .35rem .2rem .7rem;
  padding-inline: .7rem .35rem;
  font-size: var(--step--1);
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  background: var(--accent-soft);
  color: var(--accent);
  max-inline-size: 22ch;
}
.term--code {
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
  border-style: dashed;
}
.term__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.term__x {
  flex: none;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  padding: 0;
  inline-size: 16px;
  block-size: 16px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  opacity: .65;
}
.term__x:hover { opacity: 1; background: color-mix(in srgb, var(--accent) 20%, transparent); }
.term__x svg { inline-size: 10px; block-size: 10px; }

/* --------------------------------------------------------------- filters -- */

/* Two-state switch for how words combine. A segmented control rather than a
   dropdown because there are exactly two states and the current one should be
   readable without opening anything. */
.segmented {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  padding: 2px;
  gap: 2px;
}
.segmented button {
  border: 0;
  background: none;
  border-radius: 999px;
  padding: .25rem .8rem;
  font-size: var(--step--1);
  color: var(--muted);
  cursor: pointer;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.segmented button:hover { color: var(--ink); }
.segmented button[aria-pressed="true"] {
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
}
.segmented[data-disabled="true"] { opacity: .45; pointer-events: none; }

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  padding-block: .7rem .25rem;
}

.chipselect { position: relative; display: inline-flex; }
.chipselect select {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 999px;
  padding: .34rem 2rem .34rem .85rem;
  padding-inline: .95rem 2rem;
  font-size: var(--step--1);
  color: var(--muted);
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.chipselect select:hover { border-color: var(--line-strong); color: var(--ink); }
.chipselect::after {
  content: "";
  position: absolute;
  inset-inline-end: .7rem;
  inset-block-start: 50%;
  inline-size: 7px; block-size: 7px;
  border-inline-end: 1.5px solid currentColor;
  border-block-end: 1.5px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  color: var(--faint);
  pointer-events: none;
}
/* An active filter must be obvious, otherwise people forget why results look
   thin. Both colour and weight change, so it survives a greyscale print. */
.chipselect[data-active="true"] select {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
}

/* A checkbox popover for filters where several values combine (currently just
   VAT rate). Same pill language as .chipselect so it reads as one control
   family, but opens a panel instead of a native <select> because the point is
   picking several rates at once — something <select multiple> needs Ctrl-click
   for, which nobody discovers. */
.multiselect { position: relative; display: inline-flex; }
.multiselect__btn {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 999px;
  padding: .34rem 2rem .34rem .95rem;
  padding-inline: .95rem 2rem;
  font-size: var(--step--1);
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .15s, color .15s, background .15s;
}
.multiselect__btn:hover { border-color: var(--line-strong); color: var(--ink); }
.multiselect::after {
  content: "";
  position: absolute;
  inset-inline-end: .7rem;
  inset-block-start: 50%;
  inline-size: 7px; block-size: 7px;
  border-inline-end: 1.5px solid currentColor;
  border-block-end: 1.5px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  color: var(--faint);
  pointer-events: none;
}
.multiselect[data-active="true"] .multiselect__btn {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
}
.multiselect__panel {
  position: absolute;
  inset-block-start: calc(100% + .4rem);
  inset-inline-start: 0;
  z-index: 30;
  min-inline-size: 15rem;
  max-block-size: 16rem;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: .4rem;
}
.multiselect__panel[hidden] { display: none; }
.multiselect__opt {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .4rem .5rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--step--1);
}
.multiselect__opt:hover { background: var(--surface-2); }
.multiselect__check { flex: none; accent-color: var(--accent); inline-size: 16px; block-size: 16px; }
.multiselect__opttext { flex: 1 1 auto; font-variant-numeric: tabular-nums; }
.multiselect__count { flex: none; color: var(--faint); font-variant-numeric: tabular-nums; }

.filters__reset {
  border: 0;
  background: none;
  color: var(--muted);
  font-size: var(--step--1);
  cursor: pointer;
  padding: .34rem .6rem;
  border-radius: 999px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.filters__reset:hover { color: var(--ink); }
.filters__reset[hidden] { display: none; }

.filters__export {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-inline-start: auto;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  font-size: var(--step--1);
  padding: .34rem .85rem;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.filters__export:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.filters__export svg { inline-size: 15px; block-size: 15px; flex: none; }

/* --------------------------------------------------------------- results -- */
.statusline {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  flex-wrap: wrap;
  padding-block: .9rem .55rem;
  font-size: var(--step--1);
  color: var(--muted);
  min-block-size: 2.1rem;
}
.statusline strong { color: var(--ink); font-size: var(--step-0); }
.statusline .timing { color: var(--faint); font-variant-numeric: tabular-nums; }

.results { display: grid; gap: .55rem; padding-block-end: 1rem; list-style: none; margin: 0; padding-inline: 0; }

.row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .35rem 1rem;
  padding: .85rem 1rem;
  padding-inline-start: 1.15rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .15s, box-shadow .15s;
}
.row:hover { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }

/* Validity as an edge stripe: real state, readable before any text is parsed. */
.row::before {
  content: "";
  position: absolute;
  inset-block: .55rem;
  inset-inline-start: 0;
  inline-size: 3px;
  border-radius: 999px;
  background: var(--ok);
}
.row[data-expired="true"]::before { background: var(--warn); }

.row__title {
  grid-column: 1;
  font-size: var(--step-0);
  line-height: 1.6;
  margin: 0;
  overflow-wrap: anywhere;
}
.row__title mark {
  background: var(--accent-soft);
  color: inherit;
  border-radius: 3px;
  padding-inline: .1em;
}

.row__code {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: start;
  display: flex;
  align-items: center;
  gap: .4rem;
}

.code {
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
}

.copy {
  display: grid;
  place-items: center;
  inline-size: 32px;
  block-size: 32px;
  flex: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--muted);
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.copy:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.copy svg { inline-size: 15px; block-size: 15px; }
.copy[data-copied="true"] { color: var(--ok); border-color: var(--ok); background: var(--ok-soft); }

.meta {
  grid-column: 1;
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .4rem;
  align-items: center;
}

.tag {
  font-size: var(--step--1);
  line-height: 1.5;
  padding: .1rem .5rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
  background: var(--surface-2);
  white-space: nowrap;
}
/* Rate is the number an accountant is actually scanning for, so it gets the
   brand accent rather than sitting neutral like the rest of the metadata. */
.tag--vat { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--accent); background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.tag--kind { color: var(--brand-navy); background: color-mix(in srgb, var(--brand-navy) 9%, var(--surface)); border-color: color-mix(in srgb, var(--brand-navy) 25%, transparent); }
:root[data-theme="dark"] .tag--kind { color: var(--ink); background: var(--surface-2); border-color: var(--line-strong); }
.tag--exempt { color: var(--ok); background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 28%, transparent); }
.tag--expired { color: var(--warn); background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 32%, transparent); font-weight: 700; }

/* --------------------------------------------------- superseded 9% notice -- */
/* Shown only when someone looks up a retired 9% شناسه by its code. It is a
   redirection, not an error, so it reads in the warning colour without the
   alarm of the expired styling. */
.supersede {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  margin: .55rem 0 0;
  padding: .5rem .7rem;
  border-radius: var(--radius-sm);
  background: var(--warn-soft);
  border: 1px solid color-mix(in srgb, var(--warn) 28%, transparent);
  font-size: var(--step--1);
  color: var(--warn);
}
.supersede__label { font-weight: 700; }
.supersede__code {
  font-size: var(--step-0);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ink);
}
.copy--sm { inline-size: 26px; block-size: 26px; }
.copy--sm svg { inline-size: 13px; block-size: 13px; }

.row[data-superseded="true"]::before { background: var(--warn); }

@media (max-width: 640px) {
  .row { grid-template-columns: minmax(0, 1fr); }
  .row__code { grid-column: 1; grid-row: auto; justify-content: space-between; }
}

/* ---------------------------------------------------------------- states -- */
.state {
  text-align: center;
  padding: clamp(2rem, 8vw, 4rem) 1rem;
  color: var(--muted);
  background: var(--surface);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
}
.state h2 { font-size: var(--step-2); color: var(--ink); margin-block-end: .4rem; }
.state p { margin: 0 auto; max-inline-size: 46ch; }
.state--error { border-style: solid; border-color: color-mix(in srgb, var(--warn) 40%, transparent); background: var(--warn-soft); color: var(--warn); }
.state--error h2 { color: var(--warn); }

.skeleton { display: grid; gap: .55rem; }
.skeleton__row {
  block-size: 86px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background:
    linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--ink) 5%, transparent) 50%, transparent 100%),
    var(--surface);
  background-size: 220% 100%, auto;
  animation: shimmer 1.15s linear infinite;
}
@keyframes shimmer { from { background-position: 120% 0, 0 0; } to { background-position: -120% 0, 0 0; } }

.more {
  display: block;
  inline-size: 100%;
  padding: .8rem;
  margin-block: .3rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--accent);
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.more:hover { background: var(--accent-soft); border-color: var(--accent); }
.more[disabled] { color: var(--faint); cursor: default; background: var(--surface-2); }
.more[hidden] { display: none; }

/* ----------------------------------------------------------------- toast -- */
.toast {
  position: fixed;
  inset-block-end: 1.25rem;
  inset-inline-start: 50%;
  transform: translate(50%, 1rem);
  z-index: 60;
  background: var(--ink);
  color: var(--ground);
  padding: .55rem 1.1rem;
  border-radius: 999px;
  font-size: var(--step--1);
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s, transform .18s;
}
.toast[data-show="true"] { opacity: 1; transform: translate(50%, 0); }

/* ---------------------------------------------------------------- footer -- */
.footer {
  border-block-start: 1px solid var(--line);
  padding-block: 1.4rem 2.2rem;
  color: var(--muted);
  font-size: var(--step--1);
  text-align: center;
}
.footer a { font-weight: 700; }

/* -------------------------------------------------------------- embedded -- */
/* When the page runs inside the iframe on kariyahesab.com the surrounding site
   already provides chrome, so the page drops its own. */
body[data-embed="1"] { background: transparent; }
body[data-embed="1"] .masthead,
body[data-embed="1"] .intro,
body[data-embed="1"] .footer { display: none; }
body[data-embed="1"] .searchbar { position: static; backdrop-filter: none; background: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}