@import url('./fonts/archivo.css');

/* =============================================================
   turkish.jamals.uz — Mihrimah Jamal · Türk tili

   The visual system is lifted from the sales deck
   ("Turk tili - Mihrimah Jamal v2.dc.html"), not reinvented.
   Every colour, type role and layout device below traces to a
   measured value in that file. Where a value had to be invented
   it is because the deck is a fixed 1920×1080 canvas and this is
   a fluid page — those are marked WEB-ONLY.

   Three rules carried over verbatim, all load-bearing:
     1. ink = the story · paper = the terms · red = the promise
     2. no border-radius anywhere. Every corner is square.
     3. no bullet characters. Structure comes from 1px rules.
   ============================================================= */

:root {
  /* Root default so a ruled list outside a surface class still draws. */
  --rule: rgba(21, 16, 16, .15);

  /* ---- surfaces (verbatim from the deck) ---- */
  --ink: #151010;
  --ink-2: #241C1A;
  --paper: #F2ECE3;
  --white: #FFFFFF;
  --red: #C8151B;

  /* ---- text, every pair measured at AA for normal text ---- */
  --on-ink: #EDE6DD;      /* 15.23:1 on ink   */
  --on-ink-2: #B3A69A;    /*  7.94:1 on ink   */
  --on-paper: #151010;    /* 16.06:1 on paper */
  --on-paper-2: #5C5049;  /*  6.63:1 on paper */
  --on-red: #FFFFFF;      /*  5.87:1 on red   */
  --on-red-2: #FFE3E4;    /*  4.85:1 on red   */

  --rule-ink: rgba(237, 230, 221, .20);
  --rule-paper: rgba(21, 16, 16, .15);
  --rule-red: rgba(255, 255, 255, .34);

  /* WEB-ONLY. The deck has no form, so these are new. Verified
     numerically in docs/ai/CONTRAST.md alongside the deck's own. */
  --field-rule: rgba(21, 16, 16, .28);
  --field-rule-focus: var(--red);
  --on-white-2: #574C46;  /* 7.16:1 on #FFFFFF — helper/placeholder text */
  --error: #A81015;       /* 7.31:1 on #FFFFFF — the deck's spare --red-deep */

  /* ---- frame ----
     Deck: 88px sides on 1920 = 4.58%. Held as a percentage so the
     page keeps the same optical margin at any width, with a floor
     for phones and a ceiling so the measure never runs away. */
  --mx: clamp(20px, 4.58vw, 88px);
  --maxw: 1560px;

  /* ---- type scale ----
     Deck roles, re-expressed as fluid ramps between a 375px phone
     and a 1440px desktop. The deck's absolute px are the desktop
     end, scaled to the narrower web frame. */
  /* "Türkçe" is 3.32× its own font-size wide at stretch 76%. The ramp is set
     so the word fits the hero's left column with margin to spare at every
     width — measured, not guessed: at 1440 the column is 657px and the word
     lands at 615px. Raising this without re-measuring overflows the column. */
  --d1: clamp(66px, 32.2px + 10.61vw, 200px);  /* TÜRKÇE, once   */
  --d2: clamp(56px, 37.7px + 4.88vw, 108px);   /* prices, name   */
  --d3: clamp(40px, 27.3px + 3.38vw, 76px);    /* section heads  */
  --d4: clamp(34px, 27.7px + 1.69vw, 52px);    /* item titles    */
  --t1: clamp(26px, 23.2px + .75vw, 34px);
  --b1: clamp(20px, 18.6px + .38vw, 24px);
  --b2: clamp(17px, 16.3px + .19vw, 19px);     /* body           */
  --lbl: clamp(12px, 10.9px + .28vw, 15px);    /* eyebrows       */

  /* ---- vertical rhythm (WEB-ONLY: the deck is one screen per idea) ---- */
  /* Was 132px. Eleven sections x2 made ~630px of the page pure padding on
     a page the owner already found long to scroll. */
  --sec-y: clamp(46px, 4.4vw, 76px);

  color-scheme: light;
}

/* =============================================================
   RESET
   ============================================================= */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ink);
  color: var(--on-ink);
  font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* A failed font load must degrade honestly rather than fake weight 800. */
  font-synthesis-weight: none;
  font-size: var(--b2);
  line-height: 1.45;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
[hidden] { display: none !important; }

h1, h2, h3, h4, p, figure, fieldset, legend { margin: 0; }
fieldset { border: 0; padding: 0; min-width: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* Nothing in this system is round. */
input, select, button, textarea { border-radius: 0; font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 2px;
}
/* On the red surface a red ring is invisible — flip it. */
.red :focus-visible, .plate-red :focus-visible {
  outline-color: var(--on-red);
}

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

.skip-link {
  position: absolute; left: var(--mx); top: -100px; z-index: 100;
  background: var(--red); color: var(--on-red);
  padding: 14px 22px; font-size: var(--lbl); font-weight: 650;
  font-stretch: 112%; letter-spacing: .075em; text-transform: uppercase;
  text-decoration: none;
}
.skip-link:focus { top: 14px; }

/* =============================================================
   TYPE ROLES — the deck's eight, no more
   ============================================================= */

.dsp {
  font-weight: 800;
  font-stretch: 80%;
  letter-spacing: -.018em;
  /* Negative tracking on condensed caps eats the word space. Put it back. */
  word-spacing: .09em;
  line-height: .92;
  text-transform: uppercase;
  text-wrap: balance;
}
.sub { font-weight: 600; font-stretch: 100%; line-height: 1.24; letter-spacing: -.005em; }
.bd  { font-weight: 400; line-height: 1.45; text-wrap: pretty; }

/* The signature inversion: display condenses, labels expand. */
.lbl {
  font-size: var(--lbl);
  font-weight: 650;
  font-stretch: 112%;
  letter-spacing: .075em;
  text-transform: uppercase;
}

.num { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1; }

.h-sec { font-size: var(--d3); }
.h-item { font-size: var(--t1); font-weight: 800; font-stretch: 92%; line-height: 1.08; letter-spacing: -.012em; }

/* =============================================================
   SURFACES
   ============================================================= */

.ink   { background: var(--ink);   color: var(--on-ink);   }
.paper { background: var(--paper); color: var(--on-paper); }
.white { background: var(--white); color: var(--on-paper); }
.red   { background: var(--red);   color: var(--on-red);   }

.ink   .muted { color: var(--on-ink-2);   }
.paper .muted { color: var(--on-paper-2); }
.white .muted { color: var(--on-white-2); }
.red   .muted { color: var(--on-red-2);   }

/* --rule is the surface's own hairline colour. It MUST be defined on every
   surface and have a root default: `border-top: 1px solid var(--rule)` is
   thrown away wholesale at parse time if --rule does not resolve, which
   silently removes the width and style too — setting only border-top-color
   afterwards then leaves a 0px none border that looks like no rule at all.
   That is exactly the bug this replaced. */
.ink   { --rule: var(--rule-ink);   }
.paper { --rule: var(--rule-paper); }
.white { --rule: var(--rule-paper); }
.red   { --rule: var(--rule-red);   }
.pnl-ink   { --rule: var(--rule-ink);   }
.pnl-white { --rule: var(--rule-paper); }
.pnl-red   { --rule: var(--rule-red);   }

/* =============================================================
   FRAME + FOLIO
   The folio rule is the deck's most portable device: eyebrow left,
   marker right, baseline aligned, 1px rule beneath in a colour that
   belongs to the surface — never a fixed grey.
   ============================================================= */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--mx);
}

.section { padding-block: var(--sec-y); position: relative; }

.folio {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 16px;
  margin-bottom: clamp(32px, 4vw, 64px);
  border-bottom: 1px solid var(--rule);
}
.ink   .folio { border-color: var(--rule-ink);   }
.paper .folio { border-color: var(--rule-paper); }
.white .folio { border-color: var(--rule-paper); }
.red   .folio { border-color: var(--rule-red);   }

.folio .lbl { color: inherit; }
.ink   .folio > * { color: var(--on-ink-2);   }
.paper .folio > * { color: var(--on-paper-2); }
.white .folio > * { color: var(--on-white-2); }
.red   .folio > * { color: var(--on-red-2);   }

/* =============================================================
   RULED LISTS — the deck has no bullet characters at all
   ============================================================= */

.ruled > * {
  border-top: 1px solid var(--rule);
  padding-top: clamp(16px, 1.6vw, 22px);
}
/* The "heavy" variant takes the text colour rather than the translucent rule. */
.ruled.ruled-h > * { border-top-width: 2px; border-top-color: currentColor; }

.feat > * {
  font-size: var(--b2);
  line-height: 1.34;
  padding-top: 17px;
  border-top: 1px solid var(--rule);
}

/* =============================================================
   GRIDS
   ============================================================= */

.grid { display: grid; gap: clamp(24px, 3vw, 44px); }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 900px) {
  .g-3, .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .g-2, .g-3, .g-4 { grid-template-columns: minmax(0, 1fr); }
}

/* =============================================================
   PHOTO BLEEDS + SCRIMS
   Two layers: a short top band that protects the folio from a bright
   sky, and a directional wash that keeps the text zone opaque while
   the outer quarter of the photo stays a real photograph.

   Light text over an uncontrolled photo needs far more veil than dark
   text does — that is why the ink scrim is heavier and why ink-surface
   text is width-constrained and the paper one is not. Measured in the
   deck against a pure-white photo: ink body inside 74% → 6.70:1.
   ============================================================= */

.bleed { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.bleed img { width: 100%; height: 100%; object-fit: cover; }
.bleed.on-ink { background: var(--ink-2); }     /* backing so a slow image never flashes white */
.bleed.on-paper { background: #DED4C7; }

.scrim { position: absolute; inset: 0; pointer-events: none; z-index: 1; }

.scrim-ink {
  background:
    linear-gradient(180deg, rgba(21,16,16,.93) 0%, rgba(21,16,16,.62) 11%, rgba(21,16,16,0) 19%),
    linear-gradient(96deg, rgba(21,16,16,.97) 0%, rgba(21,16,16,.95) 60%, rgba(21,16,16,.90) 74%, rgba(21,16,16,.30) 100%);
}
.scrim-paper {
  background:
    linear-gradient(180deg, rgba(242,236,227,.94) 0%, rgba(242,236,227,.64) 11%, rgba(242,236,227,0) 19%),
    linear-gradient(90deg, rgba(242,236,227,.98) 0%, rgba(242,236,227,.96) 52%, rgba(242,236,227,.86) 69%, rgba(242,236,227,.12) 100%);
}

/* Below the 2-column breakpoint the photo is behind everything rather
   than beside it, so the directional wash no longer protects anything —
   go flat and heavy instead. */
@media (max-width: 900px) {
  .scrim-ink { background: linear-gradient(180deg, rgba(21,16,16,.90) 0%, rgba(21,16,16,.94) 100%); }
  .scrim-paper { background: linear-gradient(180deg, rgba(242,236,227,.93) 0%, rgba(242,236,227,.96) 100%); }
}

/* Text on a bleed must stay inside the veiled zone — it has to end before the
   wash thins out. The deck constrains this on ink slides only, because dark
   text over a light scrim needs far less veil than light text does. But the
   paper scrim still thins to .12 at the right edge, so a four-column grid
   running the full width puts its last column on bare photograph. Both
   surfaces get a constraint here; the paper one is looser because it starts
   from a far better ratio. */
.safe-ink { max-width: 69.375%; }
.safe-paper { max-width: 82%; }
@media (max-width: 900px) {
  .safe-ink, .safe-paper { max-width: 100%; }
}

.above { position: relative; z-index: 2; }

/* =============================================================
   HERO
   ============================================================= */

.hero {
  position: relative;
  min-height: min(100svh, 900px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(88px, 10vw, 132px) clamp(48px, 6vw, 80px);
  overflow: hidden;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
  gap: clamp(32px, 4vw, 72px);
  align-items: center;
}
@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}

.hero-chip {
  display: inline-block;
  align-self: flex-start;
  background: var(--red);
  color: var(--on-red);
  padding: clamp(11px, 1.1vw, 15px) clamp(16px, 1.6vw, 24px);
  font-size: var(--b1);
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: clamp(10px, 1.2vw, 18px);
}

.hero h1 {
  font-size: var(--d1);
  font-stretch: 76%;    /* the bigger the type, the narrower */
  letter-spacing: -.018em;
  margin-bottom: clamp(20px, 2.4vw, 36px);
  /* The deck sets this one word to pure white rather than the cream body
     colour -- it is the brightest thing on the cover and that is deliberate. */
  color: var(--white);
}

.hero-rail {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px clamp(14px, 1.6vw, 26px);
  padding-top: 18px;
  border-top: 1px solid var(--rule-ink);
}
.hero-rail .sep { opacity: .4; }

/* =============================================================
   THE FORM — WEB-ONLY.
   The deck has no form. Built from the same parts: square corners,
   expanded caps labels, a 1px rule under every field, red reserved
   for the one action that matters.
   ============================================================= */

.form-card {
  background: var(--white);
  color: var(--on-paper);
  padding: clamp(24px, 2.6vw, 40px);
  box-shadow: 0 30px 90px rgba(21, 16, 16, .45);   /* the deck's only shadow */
  position: relative;
  z-index: 2;
}
.form-card.on-paper { box-shadow: 0 24px 70px rgba(21, 16, 16, .22); }

.form-card h2 { font-size: var(--d4); font-stretch: 84%; line-height: 1.0; }
.form-card .form-lead { margin-top: 10px; font-size: var(--b2); color: var(--on-white-2); }

.field { margin-top: clamp(18px, 2vw, 26px); }
.field > label {
  display: block;
  font-size: var(--lbl);
  font-weight: 650;
  font-stretch: 112%;
  letter-spacing: .075em;
  text-transform: uppercase;
  color: var(--on-white-2);
  margin-bottom: 8px;
}

.field input,
.field select {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--field-rule);
  padding: 10px 0 12px;
  /* 16px minimum or iOS Safari zooms the whole page on focus. */
  font-size: max(16px, var(--b1));
  font-weight: 600;
  line-height: 1.3;
  color: var(--on-paper);

}
.field input::placeholder { color: var(--on-white-2); font-weight: 400; opacity: 1; }

.field select {
  appearance: none;
  padding-right: 28px;
  /* Chevron drawn in CSS — Archivo ships no arrow glyph. */
  background-image:
    linear-gradient(45deg, transparent 50%, var(--on-paper) 50%),
    linear-gradient(135deg, var(--on-paper) 50%, transparent 50%);
  background-position: right 10px center, right 4px center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.field input:focus,
.field select:focus { outline: none; border-bottom-color: var(--field-rule-focus); border-bottom-width: 2px; padding-bottom: 11px; }
.field input:focus-visible,
.field select:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }

.field .err {
  display: block;
  margin-top: 7px;
  font-size: var(--lbl);
  font-stretch: 100%;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 600;
  color: var(--error);
}
.field.is-invalid input,
.field.is-invalid select { border-bottom-color: var(--error); border-bottom-width: 2px; padding-bottom: 11px; }

/* Honeypot. Never display:none — some bots skip hidden inputs, and a
   screen reader must not read it either, hence aria-hidden + tabindex. */
.hp {
  position: absolute; left: -9999px; top: 0;
  width: 1px; height: 1px; overflow: hidden;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 56px;         /* comfortably over the 44px touch floor */
  padding: 16px 24px;
  border: 2px solid transparent;
  background: var(--red);
  color: var(--on-red);
  font-size: var(--lbl);
  font-weight: 800;
  font-stretch: 112%;
  letter-spacing: .075em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;

}
.btn:hover { background: #A81015; }
.btn:disabled { opacity: .55; cursor: progress; }

.btn-ghost {
  background: transparent;
  color: var(--on-paper);
  border-color: var(--field-rule);
}
.btn-ghost:hover { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }

.btn-row { margin-top: clamp(20px, 2.2vw, 28px); display: grid; gap: 12px; }

.form-note { margin-top: 14px; font-size: var(--lbl); font-stretch: 100%; letter-spacing: 0; text-transform: none; color: var(--on-white-2); line-height: 1.4; }

/* Success + failure states replace the form in place. */
.form-done { display: grid; gap: 14px; }
.form-done h2 { font-size: var(--d4); font-stretch: 84%; line-height: 1.0; }
.form-status[role="alert"] { margin-top: 16px; font-weight: 600; color: var(--error); }

/* =============================================================
   MENTOR — a cut-out figure crossing a flat colour ground is what
   produces the depth. Red was chosen because her navy clothing
   would have merged into ink.
   ============================================================= */

.mentor-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  gap: clamp(24px, 3vw, 56px);
  align-items: end;
  position: relative;
}
@media (max-width: 900px) { .mentor-grid { grid-template-columns: minmax(0, 1fr); } }

.mentor-name { font-size: var(--d2); line-height: .86; }
.mentor-slab { width: clamp(96px, 10vw, 184px); height: clamp(7px, .6vw, 11px); background: var(--red); margin: clamp(20px, 2vw, 30px) 0 clamp(14px, 1.4vw, 20px); }
.mentor-role { font-size: var(--b1); font-weight: 700; color: var(--red); }
.mentor-bio { margin-top: clamp(26px, 3vw, 44px); }
.mentor-bio > * { font-size: var(--b2); }

/* She is the section, not an illustration beside it.

   The figure is deliberately LARGER than the column that holds it and rises
   out of the section's top padding, so the cut-out crosses the boundary
   instead of sitting boxed inside it. Two things make that safe:
   `object-fit: contain` guarantees nothing is ever cropped — hands included —
   and the lift is tuned to eat the section's own padding rather than collide
   with the section above it.

   The red ground stays put and does NOT follow her up: the whole effect is
   the figure breaking the plane of the flat colour behind it. */
.figure-wrap {
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: flex-end;
  min-height: clamp(440px, 56vw, 780px);
  /* Enough lift that the crown of her head crosses the folio rule — the
     cut-out breaking a hairline is the whole point of the device. Tuned
     against the section number so they never collide; see the overlap
     check in the commit message. */
  margin-top: clamp(-210px, -13.5vw, -60px);
  overflow: visible;
}
/* The plate spans exactly the width of the photograph, and that is deliberate.

   The supplied cut-out is cropped at the arms: the subject touches the source's
   left edge for 30% of its height and the right edge for 43%. Those pixels do
   not exist, so the forearms cannot be completed. Ending them in mid-air over
   the cream reads as an accident; ending them ON the red edge reads as a framed
   portrait. Same cut, deliberate instead of broken. */
.figure-ground {
  position: absolute; left: 0; right: 0;
  top: 30%; bottom: 0;
  background: var(--red); z-index: 0;
}
.figure-wrap img {
  position: relative; z-index: 1;
  /* Exactly the plate's width, so the cropped forearms end where the red ends. */
  width: 100%; max-width: none;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
}

@media (max-width: 900px) {
  .figure-wrap { min-height: 460px; margin-top: 8px; }
  .figure-ground { left: 0; right: 0; top: 24%; }
}

/* =============================================================
   TILES — photographs are cropped, official marks never are
   ============================================================= */

.tile { position: relative; overflow: hidden; height: clamp(180px, 22vw, 300px); }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile-mark { background: var(--white); }
.tile-mark img { object-fit: contain; padding: clamp(18px, 2.4vw, 34px) clamp(26px, 3.6vw, 56px); }

.tile-cap { margin-top: 18px; }
.tile-cap .n { font-size: var(--d4); }
.tile-cap .t { font-size: var(--b2); margin-top: 6px; }

/* =============================================================
   PROGRAMME PANELS
   ============================================================= */

.pnl { position: relative; padding: clamp(26px, 3vw, 48px); }
.pnl-white { background: var(--white); color: var(--on-paper); }
.pnl-ink { background: var(--ink); color: var(--on-ink); }
.pnl-red { background: var(--red); color: var(--on-red); }

.pnl-ink .muted { color: var(--on-ink-2); }
.pnl-white .muted { color: var(--on-white-2); }
.pnl-red .muted { color: var(--on-red-2); }

.pnl-name { font-size: var(--d4); }
.pnl-aud { margin-top: 8px; font-size: var(--b2); }

.price-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 16px; margin: clamp(18px, 2vw, 28px) 0 clamp(18px, 2vw, 26px); }
.price { font-size: var(--d2); font-weight: 800; font-stretch: 76%; line-height: .88; letter-spacing: -.02em; }
.price-per { font-size: var(--b2); font-weight: 600; }
.price-sum { font-size: var(--lbl); font-weight: 600; }

.tag {
  position: absolute; top: 0; right: 0;
  background: var(--red); color: var(--on-red);
  padding: 9px 16px;
  font-size: var(--lbl); font-weight: 800; font-stretch: 112%;
  letter-spacing: .075em; text-transform: uppercase;
}
.pnl-red .tag { background: var(--ink); color: var(--on-ink); }

.callout { border-left: 5px solid var(--red); padding-left: clamp(16px, 1.8vw, 26px); }

/* =============================================================
   INVERSE BAND — bleeds to the page edge, its own padding restores
   the text to the frame
   ============================================================= */

.band {
  background: var(--ink);
  color: var(--on-ink);
  margin-inline: calc(var(--mx) * -1);
  padding: clamp(24px, 3vw, 34px) var(--mx);
  margin-top: clamp(32px, 4vw, 56px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(16px, 2.4vw, 40px);
}
.band .hair { width: 1px; align-self: stretch; background: var(--rule-ink); }
@media (max-width: 700px) { .band .hair { display: none; } }
.band .big { font-size: var(--d4); }

/* =============================================================
   PRICE TABLE — not a <table>: four repeated grid rows so the
   layout can collapse honestly on a phone.
   ============================================================= */

.ptable { margin-top: clamp(20px, 2.4vw, 34px); }

.ptable-head,
.ptable-row {
  display: grid;
  grid-template-columns: 1.3fr .55fr .95fr 1.15fr;
  column-gap: clamp(16px, 2.4vw, 44px);
  align-items: center;
  padding: clamp(18px, 1.8vw, 26px) 0;
}
.ptable-head { padding-top: 0; padding-bottom: 14px; border-bottom: 2px solid var(--on-paper); }
.ptable-head > * { color: var(--on-white-2); }
.ptable-row { border-bottom: 1px solid var(--rule-paper); }

.ptable-row.is-popular {
  padding-left: 22px;
  margin-left: -27px;
  border-left: 5px solid var(--red);
}
.ptable-name { font-size: var(--t1); }
.ptable-amt { font-size: var(--t1); font-weight: 800; }
.ptable-sum { font-size: var(--lbl); font-weight: 600; margin-top: 4px; }
.cell-l {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.ptable-tag { display: inline-block; background: var(--red); color: var(--on-red); font-size: 12px; font-weight: 800; font-stretch: 112%; letter-spacing: .075em; text-transform: uppercase; padding: 5px 10px; margin-top: 8px; }

/* On a phone a 4-column price grid is unreadable, so each row becomes
   a small labelled block. The label text lives in data-l attributes so
   the markup stays one source of truth. */
@media (max-width: 820px) {
  .ptable-head { display: none; }
  .ptable-row,
  .ptable-row.is-popular {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 12px;
    padding: 24px 0 24px 18px;
    margin-left: 0;
    border-left: 5px solid var(--rule-paper);
  }
  .ptable-row.is-popular { border-left-color: var(--red); }
  .cell-l {
    position: static;
    width: auto; height: auto; margin: 0; overflow: visible;
    clip-path: none; white-space: normal;
    display: block;
    font-size: var(--lbl);
    font-weight: 650;
    font-stretch: 112%;
    letter-spacing: .075em;
    text-transform: uppercase;
    color: var(--on-white-2);
    margin-bottom: 4px;
  }
}

/* =============================================================
   CLOSING — the red card floats over the photo, so the text sits on
   an opaque ground and the scrim can stay light enough to keep the
   photograph alive.
   ============================================================= */

.close-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, .92fr);
  gap: clamp(32px, 4vw, 72px);
  align-items: center;
}
@media (max-width: 1000px) { .close-grid { grid-template-columns: minmax(0, 1fr); } }

/* The deck's slide-11 scrim is a single light wash, and it was safe there
   because every word on that slide sits inside an opaque red card. Here the
   folio, the h2 and the lead sit directly ON the photo, and the light wash
   left the folio at 1.5–2.4:1 against a bright sky. So it keeps the deck's
   light 90deg wash — the photograph is the point of this section — but gets
   the two-layer construction back: the same 180deg top band that .scrim-ink
   carries, whose whole job is protecting the folio. Measured after: folio
   7.9:1, matching the hero. */
.scrim-soft {
  background:
    linear-gradient(180deg, rgba(21,16,16,.93) 0%, rgba(21,16,16,.62) 11%, rgba(21,16,16,0) 19%),
    linear-gradient(96deg, rgba(21,16,16,.92) 0%, rgba(21,16,16,.86) 46%, rgba(21,16,16,.62) 72%, rgba(21,16,16,.34) 100%);
}
@media (max-width: 1000px) {
  .scrim-soft { background: linear-gradient(180deg, rgba(21,16,16,.88) 0%, rgba(21,16,16,.92) 100%); }
}

.contact-row { display: flex; align-items: baseline; gap: clamp(14px, 2vw, 34px); }
.contact-row .k { flex: 0 0 clamp(88px, 10vw, 132px); }
.contact-row .v { font-size: var(--b1); font-weight: 600; }

/* A contact link is one of the few things on this page someone will actually
   tap, so it carries its own 44px target rather than inheriting the line box.
   inline-flex + min-height rather than padding, so the underline still sits
   on the text baseline instead of floating below a padded box. */
a.v {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: inherit;
  text-decoration: none;
  box-shadow: inset 0 -1px 0 0 currentColor;
}
a.v:hover { color: var(--red); }
.ink a.v:hover, .pnl-red a.v:hover { color: var(--on-red-2); }

/* =============================================================
   FLOATING CONTACT — a persistent way to reach a human, for the
   visitor who will never fill a form.
   ============================================================= */

.float-tg {
  position: fixed;
  right: clamp(14px, 2vw, 26px);
  bottom: clamp(14px, 2vw, 26px);
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px 20px;
  background: var(--red);
  color: var(--on-red);
  font-size: var(--lbl);
  font-weight: 800;
  font-stretch: 112%;
  letter-spacing: .075em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 14px 40px rgba(21, 16, 16, .45);
}
.float-tg:hover { background: #A81015; }
.float-tg svg { width: 20px; height: 20px; flex: none; }
/* A red ring on a red button is invisible. Two rings: white inside, ink
   outside, so it reads against both the button and whatever is behind it. */
.float-tg:focus-visible {
  outline: 3px solid var(--on-red);
  outline-offset: -6px;
  box-shadow: 0 0 0 3px var(--ink), 0 14px 40px rgba(21, 16, 16, .45);
}
@media (max-width: 520px) { .float-tg .t { display: none; } .float-tg { padding: 14px; } }

/* Hidden whenever a form is on screen: it would otherwise sit on top of the
   form's own "Telegramda yozish" button, offering the same action twice in
   the same place. site.js toggles this; without JS the button simply stays
   visible, which is the safe failure. */
.float-tg[data-hide="1"] {
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .float-tg[data-hide="1"] { transform: none; }
}
/* Every transition on the page lives behind this one query. "Reduce" means
   no motion, not less motion -- colour still changes on hover, it just does
   not animate. */
@media (prefers-reduced-motion: no-preference) {
  .skip-link { transition: top .18s ease; }
  .field input, .field select { transition: border-color .16s ease; }
  .btn { transition: background-color .16s ease, color .16s ease, border-color .16s ease; }
  .float-tg { transition: background-color .16s ease, opacity .2s ease, transform .2s ease, visibility .2s; }
}

/* =============================================================
   MOTION
   One animation, exactly as the deck: 16px rise + fade. The end state
   is the base style and the animation runs *from* hidden — so reduced
   motion, print and a JS failure all render complete content.
   ============================================================= */

@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .js .reveal.is-in { animation: rise .46s cubic-bezier(.2, .72, .28, 1) both; }
  .js .stg.is-in > * { animation: rise .52s cubic-bezier(.2, .72, .28, 1) both; }
  .js .stg.is-in > *:nth-child(2) { animation-delay: .07s; }
  .js .stg.is-in > *:nth-child(3) { animation-delay: .14s; }
  .js .stg.is-in > *:nth-child(4) { animation-delay: .21s; }
  .js .stg.is-in > *:nth-child(5) { animation-delay: .28s; }
  .js .stg.is-in > *:nth-child(6) { animation-delay: .35s; }
}

@media print {
  .reveal, .stg > * { animation: none !important; opacity: 1 !important; transform: none !important; }
  .float-tg, .skip-link { display: none !important; }
  body { background: #fff; color: #000; }
}

/* =============================================================
   UTILITIES
   ============================================================= */

.mt-s { margin-top: clamp(10px, 1.2vw, 16px); }
.mt-m { margin-top: clamp(18px, 2.2vw, 30px); }
.mt-l { margin-top: clamp(28px, 3.4vw, 48px); }
.lead { font-size: var(--b1); }
.measure { max-width: 62ch; }
.stack-s { display: grid; gap: clamp(10px, 1.2vw, 16px); }

/* =============================================================
   REVISED DECK DEVICES  (from "Turkish language pricing plans",
   the updated 11-slide export supplied 2026-09-10)

   The second deck adds three things the first did not have, and
   they change the texture of the page rather than decorate it:
     1. a red KAFOLAT bar carrying the guarantee INSIDE each card
     2. red square bullets — the first deck had no bullet at all
     3. bold inline emphasis on the load-bearing words
   ============================================================= */

/* The guarantee stops being a footnote and becomes the loudest
   object in the card. Label small and quiet, value bold. */
.kafolat {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 14px;
  background: var(--red);
  color: var(--on-red);
  padding: clamp(10px, 1vw, 14px) clamp(14px, 1.4vw, 20px);
  margin: clamp(18px, 2vw, 26px) 0 clamp(4px, .6vw, 8px);
}
.kafolat .k {
  font-size: var(--lbl);
  font-weight: 650;
  font-stretch: 112%;
  letter-spacing: .075em;
  text-transform: uppercase;
  color: var(--on-red-2);
}
.kafolat .v { font-size: var(--b1); font-weight: 800; letter-spacing: -.01em; }
.kafolat .dot { color: var(--on-red-2); }

/* Red square bullets. Drawn with a pseudo-element, not a list
   marker and not a character — Archivo has no square glyph and a
   marker cannot be coloured independently of the text. */
.bul { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(11px, 1.2vw, 16px); }
.bul li { position: relative; padding-left: 22px; font-size: var(--b2); line-height: 1.4; }
.bul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 8px;
  height: 8px;
  background: var(--red);
}
.pnl-ink .bul li::before, .ink .bul li::before { background: var(--red); }
.bul strong { font-weight: 800; }

.opt { font-weight: 400; font-stretch: 100%; letter-spacing: 0; text-transform: none; opacity: .8; }

/* =============================================================
   MOTION FOUNDATION
   The hide-before-reveal rule is armed by JS, and ONLY when motion
   will actually run — see site.js. Without JS, or under reduced
   motion, nothing is ever hidden.
   ============================================================= */
html.has-motion [data-motion-text],
html.has-motion [data-reveal],
html.has-motion [data-reveal-item],
html.has-motion [data-image-reveal] { visibility: hidden; }

.motion-line-mask, .motion-word-mask { display: inline-block; overflow: hidden; vertical-align: top; }
.motion-line, .motion-word { display: inline-block; will-change: transform, opacity; }
[data-image-reveal] { overflow: hidden; }
[data-parallax-image] { will-change: transform; }


/* Custom cursor — atmosphere, never a control. Never on touch. */
.cur {
  position: fixed; left: 0; top: 0; z-index: 200; pointer-events: none;
  width: 12px; height: 12px; border-radius: 50%; background: var(--red);
  transform: translate3d(-50%, -50%, 0); will-change: transform;
  display: grid; place-items: center;
}
.cur span {
  font-size: 10px; font-weight: 800; font-stretch: 112%; letter-spacing: .09em;
  text-transform: uppercase; color: var(--on-red); opacity: 0; white-space: nowrap;
}
@media (prefers-reduced-motion: reduce), (pointer: coarse) { .cur { display: none; } }

/* =============================================================
   STICKY BAR + PROGRESS
   A twelve-section page is long by construction — it mirrors an
   eleven-slide deck. Rather than shave it into something that no
   longer matches the deck, give the reader an exit: the form is
   always one click away, and the progress line says how much is
   left. This does more for "the scroll is hard work" than another
   few hundred pixels would.
   ============================================================= */
.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 80;
  background: rgba(21, 16, 16, .92);
  border-bottom: 1px solid var(--rule-ink);
  transform: translateY(-100%);
  visibility: hidden;
}
.topbar.is-on { transform: none; visibility: visible; }
@media (prefers-reduced-motion: no-preference) {
  .topbar { transition: transform .32s cubic-bezier(.2, .72, .28, 1), visibility .32s; }
}
@supports (backdrop-filter: blur(10px)) {
  .topbar { background: rgba(21, 16, 16, .74); backdrop-filter: blur(12px); }
}

.topbar .in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(12px, 2vw, 28px);
  padding-block: 11px;
}
.topbar .brand { color: var(--on-ink); font-size: var(--lbl); font-weight: 650;
  font-stretch: 112%; letter-spacing: .075em; text-transform: uppercase; white-space: nowrap; }
.topbar nav { display: flex; gap: clamp(10px, 1.6vw, 26px); overflow-x: auto; scrollbar-width: none; }
.topbar nav::-webkit-scrollbar { display: none; }
.topbar nav a {
  color: var(--on-ink-2); text-decoration: none; white-space: nowrap;
  font-size: var(--lbl); font-weight: 600; font-stretch: 112%;
  letter-spacing: .075em; text-transform: uppercase;
  display: inline-flex; align-items: center; min-height: 44px;
}
.topbar nav a:hover, .topbar nav a:focus-visible { color: var(--on-ink); }
.topbar .go {
  background: var(--red); color: var(--on-red);
  padding: 12px 18px; min-height: 44px; display: inline-flex; align-items: center;
  font-size: var(--lbl); font-weight: 800; font-stretch: 112%;
  letter-spacing: .075em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
}
.topbar .go:hover { background: #A81015; }

/* Reading progress. Sits on the bar's own bottom rule rather than
   adding another line to the page. */
.topbar .prog { position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%;
  background: transparent; pointer-events: none; }
.topbar .prog i { display: block; height: 100%; width: 0%; background: var(--red); }

@media (max-width: 860px) { .topbar nav { display: none; } }

/* The fixed bar would otherwise cover the target when an anchor is
   followed. */
:target { scroll-margin-top: 78px; }
[id] { scroll-margin-top: 78px; }