/* ===========================================================================
   READERP — inner pages, in the void
   ---------------------------------------------------------------------------
   The home page was rebuilt in the Dala language: pure black, weight-400
   display type at 42-113px, weight-200 body, one violet pill, no cards. These
   pages still carry the markup of the light version -- .card, .shot, .dark,
   .pill -- and rewriting nine pages of hard-won Turkish to change the paint
   would be a week of risk for a colour change.

   So the classes are redefined instead. Same names, same layout behaviour,
   the void's paint. Where a class existed only to draw a container, it now
   draws nothing: the reference is explicit that a background panel breaks the
   design, and half of these classes were panels.

   This is a repaint. Recomposing each page into the two-column typographic
   rhythm the home page uses is the next job, and it can be done one page at a
   time without the site ever looking half-finished.
   =========================================================================== */

/* void.css is linked alongside this file on every page rather than
   imported here: an @import serialises the two requests. */

/* ---------------------------------------------------------------- legacy map
   The old sheet's variable names, pointed at the void palette, so any inline
   style or page-local rule that still references them lands somewhere sane.

   These were all flattened to #000000 in the repaint, and that was the bug
   behind "the ground changed but it is still nearly black": the inner pages
   set their alternating bands inline with --paper-2 and --surface, so the
   home page went plum and every page behind it stayed pure black. They are
   aliases now rather than copies, so the ladder in void.css is the only place
   the ground is decided. */
:root {
  --paper:      var(--void);
  --paper-2:    var(--void-2);
  --surface:    var(--void-2);
  --navy:       var(--void);
  --navy-2:     var(--void-2);
  --navy-3:     var(--void-3);

  --ink:        #ffffff;
  --ink-1:      #ffffff;
  --ink-2:      #bdbdbd;
  --ink-3:      #9a9a9a;
  --on-navy:    #ffffff;
  --on-navy-2:  #bdbdbd;

  --line:       rgba(255,255,255,.09);
  --line-2:     rgba(255,255,255,.16);
  --line-navy:  rgba(255,255,255,.09);

  --amber:      #ffb829;
  --amber-2:    #ffb829;
  --amber-3:    rgba(255,184,41,.35);
  --amber-bg:   rgba(255,184,41,.10);

  --brand:      #8052ff;
  --brand-2:    #9670ff;

  --disp:       'Inter', ui-sans-serif, system-ui, sans-serif;
  --sh:         none;
  --sh-2:       none;
}

/* --------------------------------------------------------------- structure */

.pad-s { padding-block: clamp(36px, 5vw, 60px) !important; }

/* The old sheet used .dark for an inverted band. Everything is that band now,
   so the class has nothing left to do -- and leaving it as a fill would put a
   panel back on the page. */
.dark { background: transparent; color: var(--silver); }
.dark h2, .dark h3, .dark h4, .dark strong { color: var(--bone); }

/* Sections used to be separated by a background change. They are separated by
   a hairline now, which is the only divider the reference allows. */
section[style*="background"] { background: transparent !important; }
section[style*="border-block"] { border-block: 1px solid var(--hair) !important; }

.grid { display: grid; gap: var(--s24); }
.g2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* -------------------------------------------------------------- containers
   A card is a background, a border and a shadow. The void allows none of the
   three, so a card becomes what it was always trying to be: a block of text
   with space around it. */
.card {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--hair);
  border-radius: 0;
  padding: var(--s30) 0 0;
  transition: none;
}
.card:hover { transform: none; box-shadow: none; }
.card h3 { font-size: 24px; letter-spacing: -.02em; margin-bottom: var(--s12); }
.card p  { color: var(--silver); font-size: 16px; }

/* ===========================================================================
   THE WINDOW

   Emre, about the filled rectangles down the right-hand side of the inner
   pages: "duzelt bu 'Fiyati belirleyen dort sey' gibi bloklari. mac safari
   mockup icine koy .. baska turlu halledemeyeceksin sanirim."

   Right about the diagnosis and right about the fix. Those blocks were a flat
   tint of white on a dark ground with no edge, no shadow and no header -- a
   card with none of the things that make a card read as an object. On a plum
   background that is not a panel, it is a rendering artefact.

   A window solves it because a window is a thing everybody already knows how
   to look at. It has a top edge, it sits ON the page rather than in it, and
   its chrome says in one glance what kind of content is inside.

   TWO VARIANTS, AND THE DIFFERENCE MATTERS.

     .mac          a macOS panel: lights and a title. For our own prose --
                   "Fiyati belirleyen dort sey" is not a web page, and giving
                   it an address bar would be a small lie.
     .mac.safari   adds the address field. For the twelve product frames,
                   which really are screens of panel.readerp.com.

   The traffic lights keep their real colours. Everywhere else the palette is
   one violet and one amber and that rule holds -- but the lights are a
   depiction of somebody else's software rather than our accent, and three
   grey dots read as a disabled window instead of as macOS.
   =========================================================================== */

.mac,
.shot,
.deep {
  position: relative;
  border-radius: 12px;
  border: 0;
  /* Darker than the ground, not lighter. A window is a hole in the page; the
     tint-of-white version floated in front of it with no depth at all. */
  background: #1a0f24;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .07),
    0 1px 1px rgba(0, 0, 0, .42),
    0 26px 64px -22px rgba(0, 0, 0, .72);
  overflow: hidden;
}

.mac-bar,
.shot-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 15px;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, .085) 0%, rgba(255, 255, 255, .032) 100%);
  border-bottom: 1px solid rgba(0, 0, 0, .42);
  color: var(--ash);
}

.mac-bar > i,
.shot-bar > i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex: none;
  /* The inset lifts the dot off the bar the way a real one is lit. */
  box-shadow: inset 0 -1px 1px rgba(0, 0, 0, .22),
              inset 0 1px 0 rgba(255, 255, 255, .28);
}
.mac-bar > i:nth-of-type(1), .shot-bar > i:nth-of-type(1) { background: #ec6a5f; }
.mac-bar > i:nth-of-type(2), .shot-bar > i:nth-of-type(2) { background: #f4bf50; }
.mac-bar > i:nth-of-type(3), .shot-bar > i:nth-of-type(3) { background: #61c454; }

/* The title, centred in the bar rather than trailing the lights, because that
   is where a Mac puts it. */
.mac-bar > span {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100% - 150px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: var(--w-semi);
  color: rgba(255, 255, 255, .60);
  letter-spacing: -.01em;
}

/* Safari: the same span becomes an address field.
   Same markup, different chrome -- the pages already carry
   <span>alacak yaslandirma</span> and there is no reason to rewrite twelve of
   them to gain a rectangle. */
.mac.safari .mac-bar > span,
.shot-bar > span {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  min-width: 44%;
  max-width: calc(100% - 150px);
  padding: 4px 30px 4px 34px;
  border-radius: 7px;
  background: rgba(0, 0, 0, .30);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: var(--w-reg);
  color: rgba(255, 255, 255, .56);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0;
}

/* Safari puts "aA" at the left of the field and a reload glyph at the right.
   Two pseudo-elements, and the frame stops being a rectangle with text in it. */
.mac.safari .mac-bar > span::before,
.shot-bar > span::before {
  content: "aA";
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: -.02em;
  color: rgba(255, 255, 255, .34);
}
.mac.safari .mac-bar > span::after,
.shot-bar > span::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -5px;
  border: 1.4px solid rgba(255, 255, 255, .30);
  border-right-color: transparent;
  border-radius: 50%;
  transform: rotate(-35deg);
}

.mac-b,
.shot-b {
  background: transparent;
  padding: 22px;
}

/* Wide content scrolls inside the window rather than out through the corner
   the radius clips. */
.mac-b > table, .shot-b > table,
.mac-b > .tblwrap, .shot-b > .tblwrap { max-width: 100%; }
.mac-b > .tblwrap, .shot-b > .tblwrap { overflow-x: auto; }

/* A window's first and last child should not fight its padding. */
.mac-b > :first-child, .shot-b > :first-child { margin-top: 0; }
.mac-b > :last-child,  .shot-b > :last-child  { margin-bottom: 0; }

@media (max-width: 560px) {
  .mac-bar, .shot-bar { height: 34px; padding: 0 11px; gap: 6px; }
  .mac-bar > i, .shot-bar > i { width: 9px; height: 9px; }
  .mac.safari .mac-bar > span,
  .shot-bar > span { min-width: 0; max-width: calc(100% - 96px); padding: 4px 10px; }
  .mac.safari .mac-bar > span::before, .shot-bar > span::before,
  .mac.safari .mac-bar > span::after,  .shot-bar > span::after { display: none; }
  .mac-b, .shot-b { padding: 16px; }
}

/* ---------------------------------------------------------------- the aside
   .deep is the same window without chrome: an aside for the reader who wants
   the account codes. It keeps the accent stripe, which is the one thing that
   told you which kind of note you were reading. */
.deep {
  padding: 18px 20px;
  border-left: 3px solid var(--iris);
  border-radius: 0 12px 12px 0;
  margin: 24px 0;
}
.deep.warn { border-left-color: var(--saffron); }
.deep > :first-child { margin-top: 0; }
.deep > :last-child  { margin-bottom: 0; }

/* ------------------------------------------------------------- numbered list
   The ordered lists inside these blocks used the browser's own markers, which
   sit outside the box and wrap under the text. A hanging number in the accent
   colour is the same information, aligned. */
.mac-b ol, .shot-b ol, .deep ol {
  list-style: none;
  counter-reset: macn;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 11px;
}
.mac-b ol > li, .shot-b ol > li, .deep ol > li {
  counter-increment: macn;
  position: relative;
  padding-left: 30px;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--silver);
}
.mac-b ol > li::before, .shot-b ol > li::before, .deep ol > li::before {
  content: counter(macn);
  position: absolute;
  left: 0;
  top: 1px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--iris-lift);
  background: rgba(128, 82, 255, .16);
}
.mac-b ol > li b, .shot-b ol > li b, .deep ol > li b { color: var(--bone); }

.tblwrap { max-width: 100%; }
.shot-b > .tblwrap { overflow-x: auto; }

.tblwrap {
  overflow-x: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
}

/* --------------------------------------------------------------- type bits */

.eyebrow {
  font-size: 14px;
  font-weight: var(--w-semi);
  letter-spacing: .025em;
  text-transform: uppercase;
  color: var(--saffron);
  margin: 0 0 var(--s18);
}
.lede { font-size: clamp(18px, 1.5vw, 21px); color: var(--bone); max-width: 52ch; }
.sm   { font-size: 15px; color: var(--ash); }
.legal { max-width: 74ch; color: var(--silver); }
.legal h2 { margin-top: var(--s60); }
.legal h3 { margin-top: var(--s36); }
.narrow { max-width: 720px; margin-inline: auto; }

.num, .count { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* A quote keeps its amber rule: it is the one border the old sheet used that
   carried meaning rather than shape. */
.quote {
  border-left: 2px solid var(--saffron);
  padding-left: var(--s24);
  font-size: clamp(20px, 2.6vw, 30px);
  line-height: 1.25;
  letter-spacing: -.03em;
  font-weight: var(--w-reg);
  color: var(--bone);
  font-family: var(--sans);
}

.pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: var(--w-semi);
  letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 12px; border-radius: var(--pill);
  background: transparent; color: var(--saffron);
  box-shadow: inset 0 0 0 1px rgba(255,184,41,.32);
}

/* The old icon chip was a coloured tile with an emoji in it.
 *
 * Gone rather than restyled. There is no emoji anywhere in this language, an
 * emoji ignores the colour it is given so it cannot join the palette, and not
 * one of them said anything the heading beside it did not already say. */
.ico { display: none; }

.demo-tag {
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ash);
  display: inline-flex; align-items: center; gap: 6px; margin-top: var(--s12);
}

/* ------------------------------------------------------------------ tables */
table { width: 100%; border-collapse: collapse; font-size: 16px; }
thead th {
  text-align: left; font-size: 12px; font-weight: var(--w-semi);
  letter-spacing: .07em; text-transform: uppercase; color: var(--ash);
  padding: 0 var(--s18) var(--s18) 0;
  border-bottom: 1px solid var(--hair-2);
  background: transparent;
}
tbody td {
  padding: var(--s18) var(--s18) var(--s18) 0;
  border-bottom: 1px solid var(--hair);
  color: var(--silver); vertical-align: top;
}
tbody td:first-child { color: var(--bone); }
tbody tr:last-child td { border-bottom: 0; }
.yes { color: var(--verdant); }
.no  { color: var(--ash); }

/* ------------------------------------------------------------------- stats */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--s30); }
.stat-v {
  display: block; font-size: clamp(36px, 4vw, 60px); font-weight: var(--w-reg);
  line-height: 1; letter-spacing: -.04em; color: var(--bone);
  font-variant-numeric: tabular-nums;
}
.stat-l { display: block; font-size: 14px; color: var(--ash); margin-top: var(--s12); }

/* ------------------------------------------------------------------- steps */
.steps { counter-reset: s; display: grid; gap: var(--s36); }
.step { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: var(--s24); }
.step::before {
  counter-increment: s;
  content: counter(s, decimal-leading-zero);
  font-family: var(--mono); font-size: 13px; color: var(--iris);
  background: none; width: auto; height: auto; border-radius: 0;
  display: block; padding-top: 6px;
}
.step h3 { margin-bottom: var(--s6); }
.step p  { color: var(--silver); font-size: 16px; }

/* ----------------------------------------------------------------- charts
   The data palette the old charts used was tuned for a light ground and goes
   muddy on black. Redirected to the brand's own colours. */
.ch { display: block; width: 100%; height: auto; }
.bar { transform-origin: bottom; }
.draw { stroke-dasharray: var(--len, 1200); stroke-dashoffset: var(--len, 1200); }
:root {
  --d1: #8052ff; --d2: #ffb829; --d3: #15846e; --d4: #4b9fd5; --d5: #b78bff;
  --grid-line: rgba(255,255,255,.10);
}

/* ---------------------------------------------------------------- controls */
.btns { display: flex; flex-wrap: wrap; gap: var(--s18); margin-top: var(--s30); align-items: center; }
.btn-s {
  background: transparent; color: var(--bone);
  box-shadow: inset 0 0 0 1px var(--hair-2); border: 0;
}
.btn-s:hover { color: var(--saffron); }

/* ------------------------------------------------------------------- foot */
.foot { padding-block: var(--s60) var(--s36); border-top: 1px solid var(--hair); background: transparent; }
.foot-g { display: grid; gap: var(--s36); grid-template-columns: 1.6fr 1fr 1fr 1fr; }
.foot-g h4 {
  font-size: 12px; font-weight: var(--w-semi); letter-spacing: .08em;
  text-transform: uppercase; color: var(--ash); margin-bottom: var(--s18);
}
.foot-g a { display: block; font-size: 15px; color: var(--silver); margin-bottom: var(--s12); }
.foot-g a:hover { color: var(--bone); }
.foot-b {
  margin-top: var(--s36); padding-top: var(--s24);
  border-top: 1px solid var(--hair);
  display: flex; flex-wrap: wrap; gap: 14px 26px; font-size: 13px; color: var(--ash);
}
.foot-legal, .foot-meta { font-size: 12px; line-height: 1.6; color: var(--ash); }
.foot-legal a, .foot-meta a { color: var(--silver); }

@media (max-width: 820px) {
  .foot-g { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .foot-g { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------- cta */
.cta-band { text-align: center; background: transparent; }
.cta-band h2 { margin-inline: auto; max-width: 18ch; }
.cta-band .btns { justify-content: center; }

/* ------------------------------------------------------------------ reveal */
.fade { opacity: 0; transform: translateY(14px); }
.fade.in {
  opacity: 1; transform: none;
  transition: opacity .7s cubic-bezier(.22,.61,.36,1),
              transform .7s cubic-bezier(.22,.61,.36,1);
}
@media (prefers-reduced-motion: reduce) {
  .fade, .fade.in { opacity: 1; transform: none; transition: none; }
  .bar, .draw { transform: none; stroke-dashoffset: 0; }
}