/* ==========================================================================
   Aegean Sun site stylesheet, 2026 redesign ("One motif: the sun").
   Every page (home and inner pages, EN and TR) loads this file and fonts.css.
   It also carries the consent bar and chat widget styles at the end (first
   copied from the retired styles.css, see that section).
   The sun that dries the fruit, and names the company, is the only shape with
   character on the page: a giant disc in the hero, the round window every
   photograph sits in, the dot used as a bullet, the pill button, the footer
   sunrise. Everything else is flat ground, ink and one accent.
   Brand colours are kept from DESIGN.md; type is Libre Franklin (display)
   over Source Serif 4 (text), both self-hosted with the Turkish letters.
   ========================================================================== */

/* ---- Tokens ------------------------------------------------------------ */
:root {
  /* Colour: one ground (cream), one ink (walnut), fig for every action, apricot for the sun. */
  --ground: #fdf8f1;
  --sand: #f3e7d7;
  --ink: #2b2320;
  --muted: #5e534c;          /* secondary notes; 6.9:1 on cream */
  --fig: #5b2c53;            /* the one action colour */
  --fig-dark: #3d1c38;       /* headings, dark panel */
  --sun: #e08b3c;            /* the motif fill; never small text on light ground */
  --sun-lt: #f4b76a;         /* the sun on dark surfaces, focus ring on dark */
  --apricot-ink: #a4561a;    /* apricot as small text on light ground (4.5:1) */
  --leaf: #4a6b3d;
  --leaf-dark: #33502a;
  --pale: #fbeedd;           /* light text on the fig panel */
  --error: #b3261e;

  /* Type: two faces, five steps. */
  --face-display: "Libre Franklin", "Arial Narrow", Arial, sans-serif;
  --face-text: "Source Serif 4", Georgia, "Times New Roman", serif;
  --step-small: 1rem;                                       /* 16px: notes, labels, specs */
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);  /* 17–19px */
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);    /* 20–26px */
  --step-head: clamp(2rem, 1.3rem + 3.2vw, 4rem);           /* 32–64px */
  --step-display: clamp(3.1rem, 1rem + 5vw, 6.25rem);       /* 50–100px */

  /* Frame: one pair of outer margins everywhere, a 12-column grid, sections 120–200px apart. */
  --m: clamp(16px, 3vw, 44px);
  --gap: clamp(16px, 2vw, 28px);
  --section: clamp(88px, 6rem + 6vw, 200px);

  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
}

/* ---- Base -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 var(--step-body)/1.55 var(--face-text);
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: var(--fig); text-underline-offset: .18em; text-decoration-thickness: .06em; }
/* Plain text links only: buttons and cells set their own hover colours. */
a:not(.btn):not(.cell):hover { color: var(--fig-dark); }
:focus-visible { outline: 3px solid var(--fig); outline-offset: 2px; }
::selection { background: var(--sun-lt); color: var(--ink); }
[hidden] { display: none !important; }

.skip { position: absolute; left: var(--m); top: -60px; z-index: 50; background: var(--fig); color: #fff; padding: 12px 18px; border-radius: 999px; }
.skip:focus { top: 12px; }
.skip:hover { color: #fff; }

/* Display and heading faces */
.display, .head, .sub, .bar__brand, .btn, .cell, .foot__name, .foot__h, .cat__count, .items h4, .items h3, .items__pack, .field label, .label dt, .film__tabs button, .range__jump a {
  font-family: var(--face-display);
  font-weight: 700;
}
.display {
  font-size: var(--step-display);
  line-height: .92;
  letter-spacing: -.035em;
  text-transform: uppercase;
  color: var(--fig-dark);
  text-wrap: balance;
}
.head {
  font-size: var(--step-head);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--fig-dark);
  text-wrap: balance;
}
.sub { font-size: var(--step-lead); line-height: 1.1; letter-spacing: -.015em; color: var(--fig-dark); }
.lead { font-size: var(--step-lead); line-height: 1.4; max-width: 36ch; }

/* The motif at text size: a filled sun dot. */
.dot { display: inline-block; width: .62em; height: .62em; border-radius: 50%; background: var(--sun); flex: none; }
.dot--leaf { background: var(--leaf); }

/* ---- Buttons: one shape (the pill, a stretched sun), flat fills, no shadows ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 12px 26px;
  border: 0; border-radius: 999px;
  font-size: 1rem; letter-spacing: -.005em; line-height: 1.1;
  text-decoration: none; cursor: pointer;
  transition: transform .18s var(--ease), background-color .18s var(--ease), color .18s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn--fig { background: var(--fig); color: #fff; }
.btn--fig:hover { background: var(--fig-dark); color: #fff; }
.btn--sun { background: var(--sun-lt); color: var(--fig-dark); }
.btn--sun:hover { background: var(--pale); color: var(--fig-dark); }
.btn--ink { background: var(--fig-dark); color: var(--pale); }
.btn--ink:hover { background: var(--ink); color: #fff; }
.btn--small { min-height: 44px; padding: 10px 20px; }

.textlink {
  display: inline-flex; align-items: center; gap: .45em; min-height: 44px;
  font-family: var(--face-display); font-weight: 700; font-size: 1rem;
  color: var(--fig); text-decoration: underline; text-decoration-color: var(--sun); text-decoration-thickness: 3px; text-underline-offset: .35em;
  transition: color .18s var(--ease), text-underline-offset .18s var(--ease);
}
.textlink:hover { color: var(--fig-dark); text-underline-offset: .5em; }

/* ---- Header bar ---------------------------------------------------------- */
.bar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 24px;
  padding: 12px var(--m);
  background: var(--ground);
}
.bar__brand {
  display: inline-flex; align-items: center; gap: .4em; min-height: 44px;
  font-size: var(--step-lead); letter-spacing: -.03em; color: var(--fig-dark); text-decoration: none;
}
.bar__brand .dot { width: .7em; height: .7em; }
.bar__nav { margin-left: auto; }
.bar__nav ul { display: flex; gap: 4px; }
.bar__nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
  font-family: var(--face-display); font-weight: 700; font-size: 1rem;
  color: var(--ink); text-decoration: none; border-radius: 999px;
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
.bar__nav a:hover { background: var(--sand); color: var(--fig-dark); }

/* Language switcher: a pill with the current flag; the open menu is the one thing on the page that floats,
   so it alone carries a shadow. */
.lang { position: relative; }
.lang__button {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px;
  border: 0; border-radius: 999px; background: var(--sand); color: var(--fig-dark); cursor: pointer;
  font-family: var(--face-display); font-weight: 700; font-size: 1rem;
  transition: background-color .18s var(--ease);
}
.lang__button:hover, .lang__button[aria-expanded="true"] { background: var(--sun-lt); }
.lang__button img, .lang__menu img, .foot__lang img { width: 20px; height: 14px; border-radius: 2px; flex: none; }
.lang__caret { transition: transform .18s var(--ease); }
.lang__button[aria-expanded="true"] .lang__caret { transform: rotate(180deg); }
.lang__menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; min-width: 180px; padding: 8px;
  background: #fff; border-radius: 14px; box-shadow: 0 12px 32px rgba(43, 35, 32, .16);
}
.lang__menu a {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: 10px;
  font-family: var(--face-display); font-weight: 700; color: var(--ink); text-decoration: none;
}
.lang__menu a:hover { background: var(--sand); color: var(--fig-dark); }
.lang__menu a[aria-current="true"] { color: var(--fig); }
.foot__lang { display: inline-flex !important; align-items: center; gap: 10px; }

/* ---- Hero ---------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: calc(100svh - 72px);
  min-height: max(640px, calc(100svh - 72px));
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap);
  align-items: center;
  padding: 0 var(--m);
  overflow: hidden;
}
.hero__copy { grid-column: 1 / span 6; position: relative; z-index: 2; padding: 48px 0 72px; }
.hero h1 { max-width: none; }
.nowrap { white-space: nowrap; }
.hero__lead { margin-top: 36px; max-width: 36ch; font-size: var(--step-lead); line-height: 1.4; }
.hero__actions { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.hero__status { margin-top: 40px; display: flex; align-items: baseline; gap: .6em; font-size: var(--step-small); color: var(--muted); max-width: 44ch; }

/* The sun: about 120vh across, centred near 78% / 55%, cropped by top, right and bottom. */
.hero__sun {
  --d: min(120svh, 96vw);
  position: absolute; z-index: 1;
  width: var(--d); height: var(--d);
  left: calc(78% - var(--d) / 2); top: calc(55% - var(--d) / 2);
  border-radius: 50%;
  background: var(--sun);
  display: grid; place-items: center;
}
/* The photograph sits in a concentric round window: fruit inside the sun. */
.hero__window {
  width: 64%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--sand);
  transform: translate(-6%, -2%);
}
.hero__window img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 60%; }

/* ---- The range ----------------------------------------------------------- */
.range { padding: var(--section) var(--m) 0; }
.range__head { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); row-gap: 24px; align-items: end; }
.range__head h2 { grid-column: 1 / span 6; }
.range__head .lead { grid-column: 8 / span 5; }
.range__jump { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.range__jump a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px;
  background: var(--sand); color: var(--fig-dark); text-decoration: none; font-size: 1rem;
  transition: background-color .18s var(--ease), transform .18s var(--ease);
}
.range__jump a:hover { background: var(--sun-lt); transform: translateY(-2px); }

.cat { padding-top: clamp(96px, 9vw, 136px); }
.cat__head {
  display: grid; grid-template-columns: auto 1fr auto; column-gap: clamp(16px, 2vw, 32px); align-items: center;
  padding-bottom: 40px;
}
.cat__photo { grid-row: 1 / span 2; width: clamp(88px, 9vw, 136px); aspect-ratio: 1; border-radius: 50%; object-fit: cover; background: var(--sand); }
.cat__head h3 { align-self: end; }
.cat__count { align-self: end; justify-self: end; font-size: 1rem; color: var(--apricot-ink); padding-bottom: .35em; }
.cat__facts { grid-column: 2; margin-top: 12px; color: var(--muted); font-size: var(--step-small); max-width: 80ch; }

/* Two columns of grades; a sun dot stands where a bullet would. */
.items { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(32px, 5vw, 80px); row-gap: 32px; }
.items li {
  position: relative;
  display: grid; grid-template-columns: 1fr auto; column-gap: 16px; align-items: baseline;
  padding-left: 32px;
}
.items li::before { content: ""; position: absolute; left: 0; top: .42em; width: 14px; height: 14px; border-radius: 50%; background: var(--sun); }
.items h4, .items h3 { font-size: var(--step-body); line-height: 1.25; color: var(--fig-dark); letter-spacing: -.01em; }
.items__pack { font-size: 1rem; color: var(--fig); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.items p { grid-column: 1 / -1; margin-top: 6px; font-size: 1rem; line-height: 1.5; max-width: 52ch; }
.items .items__note { margin-top: 4px; color: var(--apricot-ink); font-family: var(--face-display); font-weight: 700; font-size: var(--step-small); }
.cat__more { grid-column: 3; justify-self: end; align-self: start; margin-top: 4px; white-space: nowrap; }

/* ---- The chain (inset fig panel) ---------------------------------------- */
.chain { padding: var(--section) 0 0; }
.chain__panel {
  margin: 0 var(--m);
  min-height: min(110svh, 980px);
  background: var(--fig-dark); color: var(--pale);
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap);
  overflow: hidden; position: relative;
}
.chain__panel :focus-visible { outline-color: var(--sun-lt); }
/* Desktop: heading top-left, the round photo below it cropped by the panel's bottom edge, proofs on the right. */
.chain__title { grid-column: 1 / span 7; grid-row: 1; padding: clamp(32px, 4vw, 64px) 0 0 clamp(32px, 4vw, 64px); color: var(--pale); }
.chain__title span { display: block; max-width: 11em; }
.chain__window {
  grid-column: 1 / span 7; grid-row: 2; align-self: end;
  margin-left: clamp(32px, 4vw, 64px); margin-bottom: calc(min(38vw, 620px) * -0.22);
  width: min(38vw, 620px); aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  background: var(--sun);
}
.chain__window img { width: 100%; height: 100%; object-fit: cover; object-position: 45% 50%; }
.chain__right { grid-column: 8 / span 5; grid-row: 1 / span 2; padding: clamp(32px, 4vw, 64px) clamp(32px, 4vw, 64px) clamp(32px, 4vw, 64px) 0; display: flex; flex-direction: column; gap: 48px; }
.chain__block { max-width: 34ch; }
.chain__block h3 { color: var(--sun-lt); }
.chain__block p { margin-top: 14px; }
.chain__certs { max-width: 34ch; font-style: italic; }
.chain__right .btn { align-self: flex-start; }

/* ---- Steps: tiles that grow --------------------------------------------- */
.steps { padding: var(--section) var(--m) 0; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); }
.steps__title { grid-column: 1 / span 6; grid-row: 1; align-self: start; max-width: 9em; position: relative; z-index: 1; }
.steps__row { grid-column: 1 / -1; grid-row: 1; display: grid; grid-template-columns: 3fr 4fr 5fr; gap: 10px; align-items: end; }
.step__tile { display: flex; align-items: center; justify-content: center; overflow: hidden; container-type: size; }
.step--1 .step__tile { height: 30svh; min-height: 220px; background: var(--sand); }
.step--2 .step__tile { height: 46svh; min-height: 320px; background: var(--sun); }
.step--3 .step__tile { height: 62svh; min-height: 420px; background: var(--leaf); }
/* Each stage photo grows from tile to tile, always in the round sun window. */
/* Always a true circle: the smaller of 84% of the tile's width or 78% of its height. */
.step__tile img { width: min(84cqw, 78cqh); height: auto; aspect-ratio: 1; border-radius: 50%; object-fit: cover; }
.step--2 .step__tile img { object-position: 50% 28%; }
.step h3 { margin-top: 20px; }
.step p { margin-top: 8px; max-width: 36ch; font-size: 1rem; }
/* Leave the heading's space free above the two smaller tiles. */
.steps__row { margin-top: 0; padding-top: calc(62svh - 46svh); }

/* ---- Film showcase ------------------------------------------------------- */
.film {
  margin-top: var(--section);
  padding: 0 var(--m);
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap);
  min-height: 88svh;
}
.film__plate { background: var(--sun); aspect-ratio: 1; display: grid; place-items: center; align-self: center; }
.film__frame { height: 86%; aspect-ratio: 9 / 16; background: #241d1b; overflow: hidden; border-radius: 28px; }
.film__frame video { width: 100%; height: 100%; object-fit: contain; }
/* Fallback link, shown only where video cannot play: light on the dark letterbox. */
.film__frame a { color: var(--pale); }
.film__side { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding: clamp(8px, 2vw, 32px) 0 clamp(8px, 2vw, 32px) clamp(0px, 3vw, 48px); }
.film__tabs { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.film__tabs button {
  min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  font-size: var(--step-body); color: var(--muted);
  text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 3px; text-underline-offset: .4em;
  transition: color .18s var(--ease), text-decoration-color .18s var(--ease);
}
.film__tabs button:hover { color: var(--ink); }
.film__tabs button[aria-selected="true"] { color: var(--fig-dark); text-decoration-color: var(--sun); }
.film__panel h2 { max-width: 9em; }
.film__text { margin-top: 40px; max-width: 40ch; }
.film__cells { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cell {
  display: flex; align-items: center; justify-content: center; min-height: 72px; padding: 12px 20px;
  border: 0; border-radius: 999px; font-size: 1rem; text-decoration: none; cursor: pointer; text-align: center;
  transition: transform .18s var(--ease), background-color .18s var(--ease);
}
.cell:hover { transform: translateY(-2px); }
.cell:active { transform: scale(.98); }
.cell--ink { background: var(--fig); color: #fff; }
.cell--ink:hover { background: var(--fig-dark); color: #fff; }
.cell--tone { background: var(--sand); color: var(--fig-dark); }
.cell--tone:hover { background: var(--sun-lt); color: var(--fig-dark); }

/* ---- Regions: the full-width leaf band that divides the page ------------ */
.regions {
  margin-top: var(--section);
  padding: clamp(72px, 8vw, 128px) var(--m) clamp(72px, 8vw, 128px);
  background: var(--leaf-dark); color: var(--pale);
}
.regions :focus-visible { outline-color: var(--sun-lt); }
.regions h2 { color: var(--pale); max-width: 10em; }
.regions__grid { margin-top: 56px; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); align-items: start; }
.region--aydin { grid-column: 1 / span 6; }
.region--malatya { grid-column: 8 / span 5; margin-top: clamp(80px, 14vw, 240px); }
.region__window { aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--leaf); width: 100%; }
.region--malatya .region__window { width: 78%; }
.region__window img { width: 100%; height: 100%; object-fit: cover; }
.region h3 { margin-top: 32px; color: var(--sun-lt); }
.region p { margin-top: 14px; max-width: 46ch; }
.region .region__facts { font-style: italic; }

/* ---- Quotes: portrait and offset quotation ------------------------------ */
.quotes { padding: var(--section) var(--m) 0; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); align-items: start; }
.quotes__portrait { grid-column: 1 / span 5; }
.quotes__portrait img { width: 100%; aspect-ratio: 1; border-radius: 50%; object-fit: cover; object-position: 50% 55%; background: var(--sand); }
.quotes__body { grid-column: 7 / span 6; padding-top: clamp(24px, 6vw, 120px); }
.quotes__title { color: var(--apricot-ink); }
.quote { margin-top: 28px; }
.quote blockquote p { font-size: var(--step-lead); line-height: 1.3; max-width: 38ch; color: var(--fig-dark); }
.quote figcaption { margin-top: 24px; font-size: 1rem; color: var(--muted); }
.quotes__second { margin-top: 72px; display: grid; grid-template-columns: clamp(96px, 11vw, 168px) 1fr; gap: 28px; align-items: center; }
.quotes__second img { width: 100%; aspect-ratio: 1; border-radius: 50%; object-fit: cover; background: var(--sand); }
.quote--small { margin-top: 0; }
.quote--small blockquote p { font-size: var(--step-body); line-height: 1.5; font-style: italic; color: var(--ink); max-width: 46ch; }
.quote--small figcaption { margin-top: 10px; }

/* ---- Enquiry: the coupon is a carton label ------------------------------ */
.enquiry { padding: var(--section) var(--m) var(--section); }
.coupon {
  position: relative;
  display: grid; grid-template-columns: 44fr 56fr;
  background: var(--sun); color: var(--ink);
  max-width: 1400px; margin: 0 auto;
}
/* The perforation: two round notches cut in the ground colour, joined by a row of dots. */
.coupon::before, .coupon::after {
  content: ""; position: absolute; left: 44%; width: 32px; height: 32px; border-radius: 50%;
  background: var(--ground); translate: -50% 0;
}
.coupon::before { top: -16px; }
.coupon::after { bottom: -16px; }
.coupon__label { padding: clamp(28px, 4vw, 56px); display: flex; flex-direction: column; gap: 24px; }
.coupon__label h2 { color: var(--fig-dark); max-width: 8em; }
.coupon__intro { max-width: 34ch; }
.label { margin-top: auto; display: grid; gap: 0; font-size: 1rem; }
.label div { display: grid; grid-template-columns: 7.5em 1fr; gap: 12px; padding: 9px 0; border-top: 2px solid rgba(61, 28, 56, .35); }
.label div:last-child { border-bottom: 2px solid rgba(61, 28, 56, .35); }
.label dt { font-size: var(--step-small); color: var(--fig-dark); }
.label dd { color: var(--ink); overflow-wrap: anywhere; transition: background-color .4s var(--ease); }
.label dd.is-new { background: var(--sun-lt); }
.label__lot { font-size: var(--step-small); font-style: italic; max-width: 40ch; }

.coupon__form {
  border-left: 6px dotted var(--ground);
  padding: clamp(28px, 4vw, 56px);
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px 16px; align-content: start;
}
.coupon__form :focus-visible { outline-color: var(--fig-dark); }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field--wide { grid-column: 1 / -1; }
.field label { font-size: var(--step-small); color: var(--fig-dark); }
.field input, .field select {
  width: 100%; min-height: 52px; padding: 12px 14px;
  font: 400 1rem/1.3 var(--face-text); color: var(--ink);
  background: var(--ground); border: 0; border-bottom: 3px solid var(--fig-dark); border-radius: 0;
  transition: background-color .18s var(--ease);
}
.field select { appearance: none; padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%233d1c38' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; }
.field input::placeholder { color: #7a6c63; }
.field input:hover, .field select:hover { background-color: #fff; }
.field input:focus-visible, .field select:focus-visible { outline: 3px solid var(--fig-dark); outline-offset: 0; background-color: #fff; }
.field input[aria-invalid="true"] { border-bottom-color: var(--error); background-color: #fff3f1; }
.field__error { font-size: var(--step-small); color: #7d1a14; font-family: var(--face-display); font-weight: 700; }
.req { color: #7d1a14; }
.check { display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; font-size: 1rem; }
.check input { width: 24px; height: 24px; margin: 0; accent-color: var(--fig-dark); flex: none; }
.coupon__send { grid-column: 1 / -1; width: 100%; min-height: 56px; margin-top: 8px; }
.coupon__send[aria-busy="true"] { opacity: .75; cursor: progress; }
.coupon__status { grid-column: 1 / -1; font-size: 1rem; min-height: 1.5em; }
.coupon__status.is-ok { color: var(--fig-dark); font-weight: 600; }
.coupon__status.is-error { color: #7d1a14; font-weight: 600; }

.direct { max-width: 1400px; margin: 48px auto 0; display: grid; grid-template-columns: 44fr 56fr; gap: var(--gap); }
.direct p { font-size: 1rem; }
.direct p:last-child { padding-left: clamp(28px, 4vw, 56px); }
.direct a { display: inline-block; padding: 10px 0; margin: -10px 0; }

/* ---- Footer: the mark built large --------------------------------------- */
.foot { background: var(--fig-dark); color: var(--pale); padding: clamp(56px, 6vw, 96px) var(--m) 32px; }
.foot a { color: var(--pale); }
.foot a:not(.btn):hover { color: var(--sun-lt); }
.foot :focus-visible { outline-color: var(--sun-lt); }
.foot__mark { width: 100%; height: auto; }
.foot__name {
  margin-top: 4px;
  font-size: clamp(3rem, 17.6vw, 20rem); line-height: .82; letter-spacing: -.055em;
  color: var(--sun-lt); white-space: nowrap;
}
.foot__cols { margin-top: 64px; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); row-gap: 40px; }
.foot__cols > :nth-child(1) { grid-column: 1 / span 3; }
.foot__cols > :nth-child(2) { grid-column: 4 / span 3; }
.foot__cols > :nth-child(3) { grid-column: 8 / span 5; }
.foot__h { font-size: var(--step-body); color: var(--sun-lt); margin-bottom: 12px; }
.foot__cols li a, .foot__cols p a { display: inline-block; padding: 10px 0; }
.foot__cols p { font-size: 1rem; margin-bottom: 16px; }
.foot__last { margin-top: 56px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; font-size: 1rem; }
.foot__last .btn--sun { color: var(--fig-dark); }
.foot__credits { margin-top: 24px; font-size: .875rem; line-height: 1.5; max-width: 110ch; color: #e6d4c4; }

/* ---- Motion -------------------------------------------------------------- */
/* Entrances: parts of each block rise in sequence once, when the block enters. Script-gated by .js. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] > * { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
  .js [data-reveal].is-in > * { opacity: 1; transform: none; }
  /* Failsafe: if home.js never runs (blocked, 404, error), everything still shows after 2.5s. */
  .js [data-reveal] > *, .js .hero__copy > * { animation: reveal-failsafe 0s 2.5s forwards; }
  .js [data-reveal].is-in > *, .js .hero.is-in .hero__copy > * { animation: none; }
  @keyframes reveal-failsafe { to { opacity: 1; transform: none; } }
  .js .items[data-reveal] > * { transition-delay: calc(var(--i, 0) * 45ms); }

  /* Signature move: the sun rises into place while the photograph inside it settles. */
  .js .hero__sun { transform: translateY(14%); transition: transform 1.6s var(--ease); }
  .js .hero.is-in .hero__sun { transform: none; }
  /* The photograph is the page's Largest Contentful Paint, so it is never clipped or hidden:
     it is visible from the first frame and only settles from a slight zoom. */
  .js .shutter img { transform: scale(1.1); transition: transform 1.6s var(--ease); }
  .js .hero.is-in .shutter img { transform: none; }
  .js .hero__copy > * { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease), transform .8s var(--ease); }
  .js .hero.is-in .hero__copy > * { opacity: 1; transform: none; }
  .js .hero__copy > :nth-child(2) { transition-delay: .12s; }
  .js .hero__copy > :nth-child(3) { transition-delay: .22s; }
  .js .hero__copy > :nth-child(4) { transition-delay: .32s; }

  /* One slow moving picture besides the film: the valley photographs drift as they pass. */
  @supports (animation-timeline: view()) {
    .region__window img { animation: drift linear both; animation-timeline: view(); scale: 1.12; }
    @keyframes drift { from { translate: 0 -5%; } to { translate: 0 5%; } }
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal] > * { transition: opacity .3s linear; }
}

/* ---- Tablet ------------------------------------------------------------- */
@media (max-width: 980px) {
  .hide-s { display: none; }
  /* The sun moves to the bottom: 130vw across, cropped by the left, right and bottom edges. */
  .hero { display: block; min-height: 0; overflow: hidden; }
  .hero__copy { padding: 40px 0 0; }
  .hero h1 { font-size: 10vw; }
  .hero__sun { --d: 130vw; position: relative; left: 50%; top: auto; margin: 40px 0 calc(var(--d) * -0.42); translate: -50% 0; }
  .range__head h2, .range__head .lead { grid-column: 1 / -1; }
  .items { grid-template-columns: 1fr; }
  .chain__panel { display: flex; flex-direction: column; min-height: 0; }
  .chain__title { padding: clamp(28px, 5vw, 48px) clamp(24px, 4vw, 48px) 32px; }
  .chain__right { padding: 0 clamp(24px, 4vw, 48px) 48px; }
  .chain__window { order: 2; width: 80%; margin: 0 auto -18%; align-self: center; }
  .film { grid-template-columns: 1fr; min-height: 0; }
  .film__side { padding: 0; }
  .quotes__portrait { grid-column: 1 / span 6; }
  .quotes__body { grid-column: 7 / span 6; padding-top: 24px; }
  .coupon, .direct { grid-template-columns: 1fr; }
  .coupon::before, .coupon::after { left: auto; top: auto; translate: 0 0; }
  .coupon::before { left: -16px; top: var(--perf, 50%); }
  .coupon::after { right: -16px; bottom: auto; top: var(--perf, 50%); }
  .coupon__form { border-left: 0; border-top: 6px dotted var(--ground); }
  .direct p:last-child { padding-left: 0; }
  .foot__cols > :nth-child(1) { grid-column: 1 / span 6; }
  .foot__cols > :nth-child(2) { grid-column: 7 / span 6; }
  .foot__cols > :nth-child(3) { grid-column: 1 / -1; }
}

/* ---- Phone: its own composition ----------------------------------------- */
@media (max-width: 640px) {
  .bar { gap: 8px; padding-top: 8px; padding-bottom: 8px; }
  .bar__brand { font-size: 1.125rem; white-space: nowrap; }
  .bar__nav a { padding: 0 10px; }
  .bar__cta { padding: 10px 14px; white-space: nowrap; }
  .bar__nav { margin-left: auto; }
  .lang { margin-left: auto; }
  .bar__nav li:first-child { display: none; }
  .lang__button span { display: none; }
  .lang__button { padding: 0 12px; gap: 6px; }

  .hero h1 { font-size: 13vw; }
  .hero__lead { margin-top: 24px; font-size: 1.125rem; }
  .hero__actions, .hero__status { margin-top: 24px; }

  .cat__head { grid-template-columns: auto 1fr; }
  .cat__photo { width: 72px; grid-row: 1 / span 2; }
  .cat__count { grid-column: 2; grid-row: 2; justify-self: start; padding: 0; }
  .cat__facts { grid-column: 1 / -1; margin-top: 16px; }
  .cat__more { grid-column: 1 / -1; justify-self: start; margin-top: 8px; white-space: normal; }
  .items li { padding-left: 26px; }
  .items li::before { width: 12px; height: 12px; }
  .cat__more { margin-left: 26px; }

  .chain__panel { margin: 0 10px; }

  .steps { display: block; }
  .steps__title { max-width: none; }
  .steps__row { display: flex; flex-direction: column; align-items: stretch; gap: 32px; padding-top: 32px; }
  .step--1 .step__tile { height: 46vw; min-height: 0; }
  .step--2 .step__tile { height: 62vw; min-height: 0; }
  .step--3 .step__tile { height: 80vw; min-height: 0; }

  .film__cells { grid-template-columns: 1fr; }
  .cell { min-height: 60px; }

  .regions__grid { display: flex; flex-direction: column; gap: 56px; margin-top: 40px; }
  .region--malatya { margin-top: 0; }
  .region--malatya .region__window { width: 78%; margin-left: auto; }

  .quotes { display: block; }
  .quotes__portrait { width: 78%; }
  .quotes__body { padding-top: 32px; }
  .quotes__second { grid-template-columns: 88px 1fr; gap: 18px; margin-top: 48px; }

  .coupon__form { grid-template-columns: 1fr; }
  .label div { grid-template-columns: 6.5em 1fr; }

  .foot__cols { margin-top: 48px; }
  .foot__cols > :nth-child(1) { grid-column: 1 / span 6; }
  .foot__cols > :nth-child(2) { grid-column: 7 / span 6; }
}

/* ==========================================================================
   Inner pages (products, the four product pages, about, contact, privacy, 404;
   EN and TR). Same tokens, faces, bar and footer as the home page; these are
   the extra parts an inner page needs. Same rules too: the sun is the only
   shape with character (round photo windows, sun dots for bullets), surfaces
   are separated by tone, not lines or shadows, and every section sits on the
   one 12-column frame with the --m outer margins.
   ========================================================================== */

/* Current page in the bar: fig text with the sun underline. */
.bar__nav a[aria-current="page"] { color: var(--fig); text-decoration: underline; text-decoration-color: var(--sun); text-decoration-thickness: 3px; text-underline-offset: .45em; }

/* ---- Page head: breadcrumb, title, one sentence, the action; the product in the sun on the right ---- */
.phead {
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap);
  align-items: center; padding: clamp(24px, 4vw, 56px) var(--m) 0; position: relative; overflow: hidden;
}
.phead__copy { grid-column: 1 / span 7; padding-bottom: clamp(32px, 5vw, 72px); position: relative; z-index: 2; }
/* A page head without a picture (privacy, 404) keeps a wider text column. */
.phead--text .phead__copy { grid-column: 1 / span 9; }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .5em; font-size: var(--step-small); color: var(--muted); }
/* A small sun dot separates the trail, instead of a slash or chevron. */
.crumbs li + li::before { content: ""; display: inline-block; width: .42em; height: .42em; margin-right: .5em; border-radius: 50%; background: var(--sun); vertical-align: middle; }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); }
.crumbs a:hover { color: var(--fig-dark); }
.crumbs [aria-current] { color: var(--ink); }
.phead h1 { margin-top: clamp(12px, 2vw, 28px); }
/* Inner-page titles are one step smaller than the home display, so long product names fit in two lines. */
.phead .display { font-size: clamp(2.75rem, 1rem + 4.6vw, 5.5rem); }
.phead__lead { margin-top: 28px; max-width: 38ch; font-size: var(--step-lead); line-height: 1.4; }
.phead__actions { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
/* Key facts as sand pills under the lead (variety, origin, HS code). Facts, not labels: sentence case. */
.phead__facts { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 8px; }
.phead__facts li { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; background: var(--sand); color: var(--fig-dark); font-family: var(--face-display); font-weight: 700; font-size: 1rem; }
/* The sun disc, cropped by the right edge, with the photograph in a concentric round window (as in the home hero). */
.phead__sun {
  grid-column: 8 / -1; justify-self: end; align-self: end;
  width: min(46vw, 640px); aspect-ratio: 1; margin-right: calc(var(--m) * -1 - 6vw); margin-bottom: -10%;
  border-radius: 50%; background: var(--sun); display: grid; place-items: center;
}
.phead__window { width: 70%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--sand); transform: translateX(-8%); }
.phead__window img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Section frame: heading in the left third (sticky while its content scrolls), content in the right two thirds ---- */
.sect { padding: var(--section) var(--m) 0; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); row-gap: 32px; align-items: start; }
.sect > .sect__head { grid-column: 1 / span 5; position: sticky; top: 96px; }
.sect > .sect__body { grid-column: 7 / -1; }
/* Section titles beside content stop at 56px, so a six-word title holds two lines in five columns. */
.sect > .sect__head .head { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.5rem); }
/* Wide variant: heading across the top, content across the whole frame (lists of grades, comparison tables). */
.sect--wide > .sect__head { grid-column: 1 / span 8; position: static; }
.sect--wide > .sect__body { grid-column: 1 / -1; }
.sect__head .lead { margin-top: 20px; font-size: var(--step-body); line-height: 1.5; max-width: 34ch; }
.sect--wide .sect__head .lead { max-width: 52ch; }
/* Tone variant: a full-width sand band, the one way a section changes ground. */
.sect--tone { margin-top: var(--section); padding-bottom: var(--section); background: var(--sand); }
.prose p + p { margin-top: 1em; }
.prose p { max-width: 62ch; }
.prose .statement { font-size: var(--step-lead); line-height: 1.35; color: var(--fig-dark); max-width: 30ch; margin-bottom: 28px; }

/* Lists with the sun dot where a bullet would be. */
.dots { display: grid; gap: 14px; }
.dots li { position: relative; padding-left: 30px; max-width: 60ch; }
.dots li::before { content: ""; position: absolute; left: 0; top: .45em; width: 13px; height: 13px; border-radius: 50%; background: var(--sun); }
.dots--leaf li::before { background: var(--leaf); }
.prose + .dots, .prose .dots { margin-top: 28px; }

/* ---- Specification table: a real table, so it may have rows; rows are tone steps, not hairlines ---- */
.spec { width: 100%; border-collapse: separate; border-spacing: 0 4px; font-size: 1rem; }
.spec th, .spec td { text-align: left; vertical-align: top; padding: 14px 18px; background: var(--sand); }
.spec th { width: 34%; font-family: var(--face-display); font-weight: 700; color: var(--fig-dark); }
.spec tr > :first-child { border-radius: 14px 0 0 14px; }
.spec tr > :last-child { border-radius: 0 14px 14px 0; }
.spec thead th { background: var(--fig-dark); color: var(--pale); width: auto; }
.sect--tone .spec th, .sect--tone .spec td { background: var(--ground); }
.sect--tone .spec thead th { background: var(--fig-dark); }
/* Wide tables scroll inside their own box on a phone; give the wrapper tabindex="0" and a label. */
.spec-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.spec-scroll:focus-visible { outline-offset: 4px; }
.spec--compare { min-width: 720px; }
.spec--compare th { width: auto; }
.spec caption { text-align: left; padding-bottom: 12px; color: var(--muted); font-size: var(--step-small); }

/* ---- Two or three columns of short blocks ---- */
.cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px clamp(32px, 4vw, 64px); }
.cols--3 { grid-template-columns: repeat(3, 1fr); }
.cols h3 { margin-bottom: 12px; }
.cols p { font-size: 1rem; max-width: 46ch; }
.cols .dots { font-size: 1rem; }

/* ---- Picture and text: a round window beside the words ---- */
.duo { padding: var(--section) var(--m) 0; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); row-gap: 40px; align-items: center; }
.duo__pic { grid-column: 1 / span 5; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--sand); }
.duo__pic img { width: 100%; height: 100%; object-fit: cover; }
.duo__text { grid-column: 7 / -1; }
.duo--flip .duo__pic { grid-column: 8 / -1; grid-row: 1; }
.duo--flip .duo__text { grid-column: 1 / span 6; grid-row: 1; }
.duo__text .head + * { margin-top: 28px; }
.duo__text .btn, .duo__text .textlink { margin-top: 28px; }

/* ---- Figures: big numbers set in the display face ---- */
.figures { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px var(--gap); }
.figures__n { display: block; font-family: var(--face-display); font-weight: 700; font-size: clamp(2.75rem, 1.5rem + 3vw, 4.5rem); line-height: 1; letter-spacing: -.04em; color: var(--fig); }
.figures p { margin-top: 10px; font-size: 1rem; max-width: 24ch; }

/* ---- Questions: each answer behind its own question, on a sand step; the sun dot grows when open ---- */
.faq { display: grid; gap: 8px; }
.faq details { background: var(--sand); border-radius: 14px; }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 14px 22px;
  font-family: var(--face-display); font-weight: 700; font-size: var(--step-body); color: var(--fig-dark); cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--sun); transition: transform .2s var(--ease); }
.faq details[open] summary::after { transform: scale(1.5); }
.faq details > :not(summary) { padding: 0 22px 20px; max-width: 64ch; font-size: 1rem; }
.sect--tone .faq details { background: var(--ground); }

/* ---- The closing panel: fig ground, one line, one action, the sun rising at the edge ---- */
.closer { padding: var(--section) var(--m) var(--section); }
.closer__panel {
  position: relative; overflow: hidden; background: var(--fig-dark); color: var(--pale);
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); align-items: center;
  padding: clamp(40px, 6vw, 96px) clamp(24px, 4vw, 64px); min-height: 360px;
}
.closer__panel :focus-visible { outline-color: var(--sun-lt); }
.closer__panel::after { content: ""; position: absolute; right: -9%; bottom: -55%; width: min(48vw, 640px); aspect-ratio: 1; border-radius: 50%; background: var(--sun); }
.closer__text { grid-column: 1 / span 7; position: relative; z-index: 1; }
.closer__text .head { color: var(--pale); }
.closer__text p { margin-top: 20px; max-width: 40ch; }
.closer__panel .btn { grid-column: 9 / span 3; justify-self: start; position: relative; z-index: 1; }

/* ---- Contact: the enquiry form on a sun ground (like the home carton label), direct lines beside it ---- */
.form-sheet { background: var(--sun); padding: clamp(24px, 4vw, 56px); }
.form-sheet :focus-visible { outline-color: var(--fig-dark); }
.form-sheet .head { color: var(--fig-dark); }
.form-sheet > p { margin-top: 16px; max-width: 46ch; }
.form-grid { margin-top: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; }
.form-grid .field--wide, .form-grid > .btn, .form-grid > .form-note { grid-column: 1 / -1; }
.field textarea {
  width: 100%; min-height: 140px; padding: 12px 14px; resize: vertical;
  font: 400 1rem/1.5 var(--face-text); color: var(--ink);
  background: var(--ground); border: 0; border-bottom: 3px solid var(--fig-dark); border-radius: 0;
}
.field textarea:hover { background-color: #fff; }
.field textarea:focus-visible { outline: 3px solid var(--fig-dark); outline-offset: 0; background-color: #fff; }
/* main.js marks invalid fields with .has-error on the .field wrapper and aria-invalid on the control. */
.field.has-error input, .field.has-error select, .field.has-error textarea, .field textarea[aria-invalid="true"], .field select[aria-invalid="true"] { border-bottom-color: var(--error); background-color: #fff3f1; }
.field__error:empty { display: none; }
.form-note { font-size: var(--step-small); }
/* main.js shows the status box by adding .is-visible plus --ok or --err. */
.form-status { display: none; padding: 14px 18px; border-radius: 14px; font-weight: 600; }
.form-status.is-visible { display: block; margin-top: 20px; }
.form-status--ok { background: var(--ground); color: var(--leaf-dark); }
.form-status--err { background: #fff3f1; color: #7d1a14; }
.form-status:focus { outline: none; }
.form-status a { color: inherit; }
.lines { display: grid; gap: 36px; }
.lines h3 { margin-bottom: 10px; }
.lines p { font-size: 1rem; }
.lines a { display: inline-block; padding: 8px 0; margin: -8px 0; }
.signup { background: var(--sand); padding: clamp(24px, 3vw, 40px); }
.signup form { margin-top: 20px; display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: end; }
.signup .field input { background: var(--ground); }

/* ---- Legal text: one readable column, the summary on a sand step ---- */
.legal { padding: var(--section) var(--m) var(--section); display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); }
.legal__body { grid-column: 3 / span 8; }
.legal__body h2 { font-family: var(--face-display); font-weight: 700; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); line-height: 1.1; letter-spacing: -.02em; color: var(--fig-dark); margin: 56px 0 16px; }
.legal__body h3 { font-family: var(--face-display); font-weight: 700; font-size: var(--step-body); color: var(--fig-dark); margin: 28px 0 8px; }
.legal__body p, .legal__body ul { max-width: 68ch; margin-bottom: 1em; }
.legal__body ul { display: grid; gap: 8px; }
.legal__body ul li { position: relative; padding-left: 26px; }
.legal__body ul li::before { content: ""; position: absolute; left: 0; top: .5em; width: 11px; height: 11px; border-radius: 50%; background: var(--sun); }
.legal__summary { background: var(--sand); padding: clamp(20px, 3vw, 36px); border-radius: 14px; }
.legal__summary h2 { margin-top: 0; }
.legal__updated { color: var(--muted); font-size: var(--step-small); }
.legal .spec-scroll { margin: 16px 0 24px; }
/* A button that reads as a text link (the "cookie preferences" link inside running text). */
.linkbutton { padding: 0; border: 0; background: none; font: inherit; color: var(--fig); text-decoration: underline; text-underline-offset: .18em; cursor: pointer; min-height: 44px; }
.linkbutton:hover { color: var(--fig-dark); }

/* ---- Inner pages: tablet ---- */
@media (max-width: 980px) {
  .phead { display: block; }
  .phead__sun { width: 92vw; margin: 8px 0 -24vw auto; margin-right: calc(var(--m) * -1 - 14vw); }
  .sect > .sect__head, .sect > .sect__body, .sect--wide > .sect__head { grid-column: 1 / -1; position: static; }
  .duo__pic, .duo--flip .duo__pic { grid-column: 2 / span 10; grid-row: auto; }
  .duo__text, .duo--flip .duo__text { grid-column: 1 / -1; grid-row: auto; }
  .figures { grid-template-columns: 1fr 1fr; }
  .cols--3 { grid-template-columns: 1fr 1fr; }
  .closer__text { grid-column: 1 / -1; }
  .closer__panel .btn { grid-column: 1 / -1; margin-top: 32px; }
  .closer__panel::after { width: 70vw; right: -30%; bottom: -60%; }
  .legal__body { grid-column: 1 / -1; }
}

/* ---- Inner pages: phone ---- */
@media (max-width: 640px) {
  .phead .display { font-size: 12vw; }
  .phead__lead { font-size: 1.125rem; margin-top: 20px; }
  .phead__sun { width: 104vw; margin-right: calc(var(--m) * -1 - 22vw); margin-bottom: -30vw; }
  .cols, .cols--3 { grid-template-columns: 1fr; }
  .spec th, .spec td { padding: 12px 14px; }
  .spec:not(.spec--compare) th { width: 40%; }
  .duo__pic, .duo--flip .duo__pic { grid-column: 1 / -1; width: 86%; }
  .form-grid { grid-template-columns: 1fr; }
  .signup form { grid-template-columns: 1fr; }
  .closer { padding-left: 10px; padding-right: 10px; }
}

/* ---- Contact page (contact.html, tr/iletisim.html): extra rules for the home.css "Inner pages" section ---- */

/* The enquiry section: the sun form sheet on the left 7 columns, the direct lines on the right 4,
   on the same 12-column frame and --m margins as .sect. */
.reach { padding: var(--section) var(--m) 0; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); row-gap: 56px; align-items: start; }
/* The form is why most visitors open this page, so it follows the page head closely
   instead of a full --section gap. */
.phead + .reach { padding-top: clamp(40px, 5vw, 80px); }
.reach > .form-sheet { grid-column: 1 / span 7; }
.reach > .reach__side { grid-column: 9 / -1; position: sticky; top: 96px; }

/* Headings inside the sheet and beside it stop at the .sect title size, so they sit within 7 and 4 columns. */
.form-sheet .head, .reach__side .head { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.5rem); }
.reach__side .lines { margin-top: 32px; }
.lines p + p { margin-top: 12px; }

/* The send button on the sun sheet sizes to its text instead of spanning the grid (home.css spans it). */
.form-grid > .btn { justify-self: start; margin-top: 8px; }

/* Error red (#7d1a14) and the asterisk are under 4.5:1 on the sun ground (about 3.9:1).
   On the sheet the asterisk takes the fig-dark ink, and an error message sits on a small cream step,
   where the same red reads at over 9:1. */
.form-sheet .req { color: var(--fig-dark); }
.form-sheet .field__error:not(:empty) { align-self: flex-start; padding: 4px 10px; border-radius: 8px; background: var(--ground); }
/* main.js clears .has-error when a field is corrected but leaves the old message text in the slot,
   so a message only shows while its field is still marked invalid. */
.form-sheet .field:not(.has-error) .field__error, .signup .field:not(.has-error) .field__error { display: none; }

/* Newsletter: the note under the field and button spans both grid columns of the .signup form;
   the button lines up with the input, not with an error message under it. */
.signup form { align-items: start; }
.signup form > .btn { margin-top: calc(1rem * 1.55 + 6px); min-height: 52px; }
.signup .form-note { grid-column: 1 / -1; }

/* Tablet: the direct lines drop under the form and stop being sticky. */
@media (max-width: 980px) {
  .reach > .form-sheet, .reach > .reach__side { grid-column: 1 / -1; position: static; }
}

/* Phone: the newsletter button falls under the field, so it loses the label offset. */
@media (max-width: 640px) {
  .signup form > .btn { margin-top: 0; }
}
/* ---- Privacy pages (privacy.html, tr/gizlilik.html): extra rules for the legal column ----

/* 1. Phone overflow. The legal column is a grid item, so its minimum width defaults to its
      min-content. The long e-mail address in "In short" (and the 720px four-column table)
      pushed the column wider than the screen: text ended 7-11px from the right edge at 390px.
      min-width: 0 lets the column shrink to the frame; .spec-scroll then scrolls on its own. */
.legal__body { min-width: 0; }

/* 2. The e-mail address is one unbreakable word. Let links in legal text wrap anywhere,
      so the address breaks instead of pushing past the margin. */
.legal__body a { overflow-wrap: anywhere; }

/* 3. In-text "Cookie preferences" button. .linkbutton has min-height: 44px, which on an inline
      button inside a paragraph opens a tall gap above and below that line. An inline text link
      is exempt from the target-size rule (WCAG 2.5.8), so inside running text it can be the
      height of the line, like every other link in the paragraph. */
.legal__body p .linkbutton { min-height: 0; line-height: inherit; vertical-align: baseline; }

/* 4. The gap under a text-only page head. .phead__copy keeps its bottom padding (sized for the
      photograph beside it) and .legal adds a full --section on top, so about 150px of empty
      ground sits between the lead and "Last updated" at 1440px. With no picture, one step is enough. */
.phead--text + .legal { padding-top: clamp(8px, 2vw, 24px); }


/* Spam trap field in every form (see assets/js/gforms.js): off-screen, never shown, not announced. */
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ==========================================================================
   Shared widgets: cookie consent bar (consent.js) and sales assistant (chat.js)
   First copied from the old styles.css (retired in October 2026, now that every
   page uses this file); this is now the only copy. The scripts build their own
   markup; nothing here is page-specific.
   The old token names they use are mapped onto this page's tokens on each
   widget's root, so they do not leak into the rest of the page.
   ========================================================================== */
.chat, .consent {
  --cream: var(--ground);
  --white: #ffffff;
  --border: #e6d8c6;
  --ink-soft: #6b5f57;
  --fig-light: #8a4c7f;
  --apricot-lt: var(--sun-lt);
  --input-border: #9c8b78;
  --radius: 14px;
  --radius-sm: 8px;
  --wrap: 1140px;
  --shadow-md: 0 8px 24px rgba(43, 35, 32, .10);
  --shadow-lg: 0 20px 48px rgba(43, 35, 32, .14);
  --font-display: var(--face-display);
  --font-body: var(--face-text);
}
/* consent.js sets --consent-h while the bar is up, so the footer is never hidden under it. */
body { padding-bottom: var(--consent-h, 0px); }
.chat__head :focus-visible { outline-color: var(--sun-lt); }

/* --------------------------------------------------------------------------
   Sales assistant (chat widget) — home pages
   -------------------------------------------------------------------------- */

.chat {
  position: fixed;
  right: 20px;
  /* consent.js sets --consent-h while the cookie bar is on screen */
  bottom: calc(20px + var(--consent-h, 0px));
  z-index: 80;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  font-size: 15px;
}

.chat__launcher {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 20px;
  min-height: 48px;
  border: none;
  border-radius: 999px;
  background: var(--fig);
  color: var(--white);
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: background .2s ease, transform .2s ease;
}
.chat__launcher:hover { background: var(--fig-dark); transform: translateY(-1px); }
/* Hidden while the footer is on screen (chat.js sets .is-near-footer) so the
   bubble never sits on top of footer links. Stays available once opened. */
.chat.is-near-footer:not(.is-open) .chat__launcher { opacity: 0; visibility: hidden; transform: translateY(8px); pointer-events: none; }
.chat__launcher { transition: background .2s ease, transform .2s ease, opacity .2s ease, visibility .2s; }
.chat__launcher-icon { flex: none; }

.chat__panel[hidden] { display: none; }

.chat__panel {
  width: min(360px, calc(100vw - 40px));
  max-height: min(560px, calc(100vh - 120px));
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.chat__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: var(--fig);
  color: var(--white);
}
.chat__head-text { display: flex; flex-direction: column; line-height: 1.3; }
.chat__head-text strong { font-family: var(--font-display); font-size: 1.05rem; }
.chat__head-sub { font-size: .74rem; opacity: .82; }
.chat__close {
  flex: none;
  width: 44px;
  height: 44px;
  margin: -6px -8px -6px 0;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  color: var(--white);
  cursor: pointer;
}
.chat__close:hover { background: rgba(255, 255, 255, .28); }

.chat__log {
  flex: 1 1 auto;
  min-height: 120px;
  overflow-y: auto;
  padding: 16px;
  background: var(--cream);
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* Scrolling to the end of the log must not scroll the page behind it. */
  overscroll-behavior: contain;
}
.chat__log:focus-visible { outline-offset: -3px; }

.chat__msg { display: flex; flex-direction: column; gap: 7px; max-width: 86%; }
.chat__msg--bot { align-self: flex-start; align-items: flex-start; }
.chat__msg--user { align-self: flex-end; align-items: flex-end; }

.chat__bubble {
  margin: 0;
  padding: 10px 13px;
  border-radius: 14px;
  line-height: 1.5;
  font-size: .92rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
}
.chat__msg--user .chat__bubble {
  background: var(--fig);
  border-color: var(--fig);
  color: var(--white);
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 4px;
}

.chat__links { display: flex; flex-wrap: wrap; gap: 6px; }
.chat__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--fig);
  font-size: .8rem;
  font-weight: 600;
  text-decoration: none;
}
.chat__link:hover { background: var(--sand); }

.chat__typing { display: flex; gap: 4px; align-items: center; }
.chat__typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-soft);
  opacity: .4;
  animation: chat-dot 1.1s infinite ease-in-out;
}
.chat__typing span:nth-child(2) { animation-delay: .15s; }
.chat__typing span:nth-child(3) { animation-delay: .3s; }
@keyframes chat-dot { 0%, 60%, 100% { opacity: .25; } 30% { opacity: .9; } }

.chat__chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px; background: var(--cream); }
.chat__chips:not(:empty) { padding: 0 16px 14px; }
.chat__chip {
  min-height: 44px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--fig-light);
  background: var(--white);
  color: var(--fig);
  font-family: var(--font-body);
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
}
.chat__chip:hover { background: var(--sand); }

.chat__form {
  display: flex;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid var(--border);
  background: var(--white);
}
.chat__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 12px;
  min-height: 44px;
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--cream);
}
.chat__input:focus { outline: 2px solid var(--fig); outline-offset: 0; border-color: var(--fig); }
.chat__send {
  flex: none;
  width: 44px;
  min-height: 44px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--fig);
  color: var(--white);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.chat__send:hover { background: var(--fig-dark); }

.chat__note {
  margin: 0;
  padding: 0 14px 12px;
  background: var(--white);
  color: var(--ink-soft);
  font-size: .72rem;
  line-height: 1.4;
}

@media (max-width: 620px) {
  .chat { right: 14px; bottom: calc(14px + var(--consent-h, 0px)); left: 14px; align-items: flex-end; }
  .chat__panel { width: 100%; max-height: min(74vh, 560px); }
  .chat__launcher-text { display: none; }
  .chat__launcher { padding: 0; width: 48px; height: 48px; justify-content: center; }
  .chat.is-open .chat__launcher { display: none; }
}

/* ---------- Cookie consent bar ---------- */

.consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  background: var(--white);
  border-top: 1px solid var(--border);
  box-shadow: 0 -8px 28px rgba(43, 35, 32, .14);
}
.consent[hidden] { display: none; }

.consent__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 28px;
}

.consent__text { flex: 1 1 auto; min-width: 0; }
.consent__title {
  display: block;
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--fig-dark);
  margin-bottom: 4px;
}
/* The title is focused by script when the bar is reopened (so a screen reader
   announces it); it is not interactive, so no ring on that programmatic focus. */
.consent__title:focus { outline: none; }
.consent__text p { margin: 0; font-size: .92rem; color: var(--ink-soft); line-height: 1.55; }

.consent__details { margin-top: 10px; font-size: .86rem; }
.consent__details summary {
  cursor: pointer;
  color: var(--fig);
  font-weight: 600;
  width: fit-content;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.consent__table {
  width: 100%;
  max-width: 620px;
  border-collapse: collapse;
  margin: 10px 0 0;
  font-size: .84rem;
}
.consent__table th, .consent__table td {
  text-align: left;
  padding: 7px 12px 7px 0;
  border-bottom: 1px solid var(--border);
  font-weight: 400;
  color: var(--ink-soft);
}
.consent__table thead th { font-weight: 700; color: var(--ink); }
.consent__table tbody th { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink); }
.consent__note { margin-top: 10px !important; font-size: .8rem; }

.consent__actions { flex: none; display: flex; gap: 10px; }
.consent__btn {
  /* Declining is the same size and weight as accepting, on purpose. */
  padding: 12px 26px;
  min-height: 44px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: .94rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.consent__btn--primary { border: 2px solid var(--fig); background: var(--fig); color: var(--white); }
.consent__btn--primary:hover { background: var(--fig-dark); border-color: var(--fig-dark); }
.consent__btn--ghost { border: 2px solid var(--fig); background: transparent; color: var(--fig); }
.consent__btn--ghost:hover { background: var(--sand); }

@media (max-width: 820px) {
  /* Compact on phones: the closed bar stays under ~180px so it does not eat
     a quarter of the viewport. Buttons sit side by side. */
  .consent__inner { flex-direction: column; align-items: stretch; gap: 4px; padding: 10px 16px 12px; }
  .consent__title { font-size: 1rem; margin-bottom: 2px; }
  .consent__text p { font-size: .8rem; line-height: 1.35; }
  /* 44px hit area, but it overlaps the neighbours' spacing instead of adding height */
  .consent__details { margin: -8px 0; }
  .consent__actions { gap: 10px; }
  .consent__btn { flex: 1 1 0; padding: 8px 10px; }
  .consent__table { font-size: .8rem; }
}


/* Buttons and chips in the widgets use the page's button face (after the copied block, so it wins). */
.consent__btn, .consent__title, .chat__launcher, .chat__chip, .chat__link, .chat__send { font-family: var(--face-display); font-weight: 700; }