/* ==========================================================================
   Charisma Technology — Style 6 "Holding Corporate"
   Tokens lifted verbatim from the approved Style 6 artboard.
   ========================================================================== */

:root {
  --ink:        #12161C;
  --ink-2:      #1A1F26;
  --ink-3:      #1C222A;
  --red:        #9E0F26;
  --red-bright: #C1122E;
  --rose:       #E0576F;
  --body:       #4A515B;
  --muted:      #7A828C;
  --dim:        #8C949E;
  --on-dark:    #A6AEB8;
  --on-dark-2:  #C3CAD3;
  --on-dark-3:  #D3D9E0;
  --bone:       #F1F2F4;
  --paper:      #F5F6F8;
  --line:       #E4E6EA;
  --line-2:     #D8DCE2;
  --line-dark:  #2A3038;

  --wrap:   1300px;
  --gutter: 36px;
  --bar-h:  80px;   /* header row height; --chrome is measured from it by main.js */
  --chrome: 80px;

  /* Arial Black görünümü, gerçek ağırlık ekseniyle: başlıklar 900,
     gövde 400. Web fontu düşerse Arial/Helvetica devralır. */
  --font: "Archivo", Arial, Helvetica, sans-serif;
  --font-black: "Archivo", "Arial Black", "Arial Bold", Arial, sans-serif;
}

* { box-sizing: border-box; }

html {
  scroll-padding-top: var(--chrome);
  -webkit-text-size-adjust: 100%;
}
/* Smooth anchor jumps on the interior pages only — the home page drives its own
   section animation and a CSS smooth scroll would fight it frame by frame. */
html:not(:has([data-snap])) { scroll-behavior: smooth; }

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: var(--font);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }
a   { color: var(--ink); text-decoration: none; transition: color 180ms ease; }
a:hover { color: var(--red); }

h1, h2, h3, h4, h5 { font-family: var(--font-black); font-weight: 900; margin: 0; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
  width: 100%;
}

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

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

.kicker {
  font-family: var(--font-black);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--red);
}
.kicker--rose { color: var(--rose); }

.h1 {
  font-family: var(--font-black);
  font-weight: 900;
  /* siyah kesim daha geniş sürüyor: punto ve tracking geri alındı */
  font-size: clamp(30px, 4.6vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.04em;
}
.h2 {
  font-family: var(--font-black);
  font-weight: 900;
  font-size: clamp(26px, 3.5vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.038em;
}
.h3 {
  font-family: var(--font-black);
  font-weight: 800;
  font-size: 20px;
  line-height: 1.22;
  letter-spacing: -0.02em;
}

.lead   { font-size: 17px; line-height: 1.72; color: var(--on-dark-2); }
.prose p { font-size: 16px; line-height: 1.75; color: var(--body); }
.prose p + p { margin-top: 20px; }

.on-dark            { color: #fff; }
.on-dark a          { color: #fff; }
.on-dark a:hover    { color: var(--rose); }
.on-dark .prose p   { color: var(--on-dark); }

/* -------------------------------------------------------------- button -- */

.btn {
  display: inline-block;
  background: var(--red);
  color: #fff !important;
  padding: 15px 32px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  transition: background 200ms ease;
  border: 0;
  cursor: pointer;
  font-family: var(--font);
}
.btn:hover { background: var(--red-bright); }

.btn--light { background: #fff; color: var(--red) !important; font-weight: 600; }
.btn--light:hover { background: var(--ink); color: #fff !important; }

.link-u {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--red);
  padding-bottom: 7px;
}
.link-r {
  font-size: 13.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red);
}

/* -------------------------------------------------------------- header -- */

#chrome-wrap { position: fixed; inset: 0 0 auto; z-index: 60; }

.hdr {
  background: transparent;
  /* Transparent rather than absent: keeps the bar exactly one pixel taller at
     all times, so --chrome never shifts when the header turns solid. */
  border-bottom: 1px solid transparent;
  transition: background 220ms ease, border-color 220ms ease;
}
.hdr.is-solid {
  background: #fff;
  border-bottom-color: var(--line);
}

.hdr-in {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: stretch;
  gap: 30px;
  height: var(--bar-h);
}

/* Logo is half the bar height, leaving equal air above and below. */
.brand { display: flex; align-items: center; position: relative; }
.brand img {
  height: calc(var(--bar-h) * 0.5);
  width: auto;
  transition: opacity 200ms ease;
}
.brand .lg-light { opacity: 1; }
.brand .lg-dark  { position: absolute; left: 0; top: 50%; transform: translateY(-50%); opacity: 0; }
.hdr.is-solid .brand .lg-light { opacity: 0; }
.hdr.is-solid .brand .lg-dark  { opacity: 1; }

.nav { display: flex; margin-left: auto; align-items: stretch; }
.nav > div { display: flex; align-items: stretch; }
.nav a {
  display: flex;
  align-items: center;
  white-space: nowrap;
  padding: 0 15px;
  font-size: 14.5px;
  letter-spacing: 0.02em;
  color: #fff;
  border-bottom: 2px solid transparent;
  transition: color 180ms ease, border-color 180ms ease;
}
.hdr.is-solid .nav a { color: var(--ink); }
.nav > div.is-open > a,
.hdr.is-solid .nav > div.is-open > a { color: var(--red); border-bottom-color: var(--red); }

.hdr-tools { display: flex; align-items: center; gap: 14px; margin-left: 18px; }

.icon-btn {
  align-self: center;
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  background: none; border: 0; padding: 0;
  cursor: pointer;
  color: #fff;
  opacity: 0.72;
  transition: opacity 180ms ease, color 180ms ease;
}
.icon-btn:hover { opacity: 1; }
.hdr.is-solid .icon-btn { color: var(--ink); }

.lang { position: relative; display: flex; }
.lang-menu {
  position: absolute; top: 100%; right: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 2px solid var(--red);
  min-width: 132px;
  padding: 6px 0;
  box-shadow: 0 16px 34px rgba(18, 22, 28, 0.14);
  display: none;
}
.lang:hover .lang-menu, .lang:focus-within .lang-menu { display: block; }
.lang-menu a { display: block; padding: 9px 18px; font-size: 14px; color: var(--ink); }

/* mega panel */
.panel {
  display: none;
  grid-template-columns: minmax(280px, 34%) 1fr;
  background: var(--bone);
  box-shadow: 0 24px 48px rgba(18, 22, 28, 0.16);
}
.panel.is-open { display: grid; }
.panel-side {
  background: var(--red);
  color: #fff;
  padding: 56px 44px;
  display: grid;
  align-content: center;
}
.panel-side h2 {
  font-weight: 600;
  font-size: clamp(26px, 2.6vw, 40px);
  line-height: 1.14;
  letter-spacing: -0.02em;
}
.panel-list {
  padding: 46px 56px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 60px;
  align-content: start;
}
.panel-list a {
  display: block;
  padding: 15px 0;
  border-bottom: 1px solid #D8DBE0;
  font-size: 15px;
  color: var(--ink);
}

.burger { display: none; }

/* The mobile drawer only ever exists below the 900px breakpoint. Without this
   base rule its links render as a stack of text under the header on desktop. */
.m-nav { display: none; }

/* ------------------------------------------------------- snapping home -- */

[data-snap] > section {
  min-height: calc(100svh - var(--chrome));
  display: grid;
  align-content: center;
}

/* Sections carrying a header bar pin it to one fixed line down the page, so the
   eye finds every section title in the same place, and centre the body below. */
[data-snap] > section:has(> .sec-bar) {
  align-content: stretch;
  grid-template-rows: auto 1fr;
  padding-top: clamp(26px, 4.6vh, 58px);
  padding-bottom: clamp(26px, 4vh, 52px);
}
.sec-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  /* matches the tallest thing a bar can hold (the 44px carousel arrows), so the
     kicker centres on the same line in every section */
  min-height: 44px;
  margin-bottom: clamp(14px, 2.2vh, 28px);
  /* A grid/flex item defaults to min-width:auto, so it refuses to shrink below
     its widest content. That let the news carousel's intrinsic 3-card width set
     the whole section's column and pushed the page 134px past a phone screen. */
  min-width: 0;
}
.sec-bar .kicker { margin-right: auto; }
.sec-body {
  position: relative;
  display: grid;
  align-content: center;
  min-height: 0;
  min-width: 0;
}
.partners .sec-body { justify-items: center; }
[data-snap] > section#top { min-height: 100svh; align-content: end; }
[data-snap] > section#areas { align-content: center; }

/* Ortalanmış section başlığı (sektörler bölümü kullanıyor). */
.sec-bar--center {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 10px;
}
.sec-bar--center .kicker { margin-right: 0; }
.sec-bar--center .h2 { max-width: 22ch; }

/* Sektör ızgarası durağını tam doldurur. Başlık eklendikten sonra kartlara
   sabit yükseklik veremeyiz: bölüm `grid-template-rows: auto 1fr` olduğu için
   ızgara başlıktan ARTAN alanı alır ve iki eşit satıra böler. */
@media (min-width: 901px) {
  [data-snap] > section#areas .areas-grid {
    grid-template-rows: repeat(2, minmax(0, 1fr));
    min-height: 0;
  }
  [data-snap] > section#areas .area { height: auto; min-height: 0; }
}

/* The tail section shares its stop with the footer: together they make the
   final screen, so one scroll from News lands on contact + footer at once. */
[data-snap] > section[data-snap-tail] {
  /* Grow to exactly fill the screen minus the footer, so the last stop lands
     with Contact tucked under the header and the footer closing the page. */
  min-height: calc(100svh - var(--chrome) - var(--ft-h, 380px));
  padding: clamp(28px, 4.4vh, 56px) 0;
  display: grid;
  align-content: center;
}
body:has([data-snap-tail]) .ft-grid { padding-top: clamp(30px, 4.6vh, 60px); padding-bottom: 22px; }
body:has([data-snap-tail]) .ft-bar  { padding-top: 16px; padding-bottom: clamp(18px, 3vh, 34px); }
body:has([data-snap-tail]) .ft-grid img { margin-bottom: 16px; }
body:has([data-snap-tail]) .ft h5 { margin-bottom: 14px; }
body:has([data-snap-tail]) .ft-col { gap: 9px; }
body:has([data-snap-tail]) .ct-map:not(.ct-map--fill) { height: clamp(150px, 21vh, 230px); }

@media (max-width: 900px) {
  [data-snap] > section { min-height: 0; padding-top: 56px; padding-bottom: 56px; }
  [data-snap] > section#top { min-height: 100svh; padding-top: 0; }
  [data-snap] > section#areas { padding: 4px; }
}

/* ------------------------------------------------------------- section -- */

.sec { padding: clamp(64px, 9vh, 108px) 0; }
.sec--bone  { background: var(--bone); }
.sec--paper { background: var(--paper); }
.sec--dark  { background: var(--ink); color: #fff; }
.sec--dark .h2 { color: #fff; }

.sec-head { display: grid; gap: 18px; margin-bottom: clamp(32px, 5vh, 56px); }
.sec-head .h2 { max-width: 20ch; }

/* A section head that also carries carousel arrows: title on the left,
   controls pinned bottom-right on the same block. */
.sec-head:has(.carousel-ctrl) {
  grid-template-columns: 1fr auto;
  align-items: end;
}
.sec-head:has(.carousel-ctrl) .kicker { grid-column: 1; }
.sec-head:has(.carousel-ctrl) .h2 { grid-column: 1; }
.sec-head .carousel-ctrl { grid-column: 2; grid-row: 2; }
@media (max-width: 620px) {
  .sec-head:has(.carousel-ctrl) { grid-template-columns: 1fr; }
  .sec-head .carousel-ctrl { grid-column: 1; grid-row: auto; }
}

/* Photo carousel: exactly three cards inside the track, allowing for the two
   gaps between them. Needs to out-specify `.carousel-track > *`, which sets the
   wider news-card basis and appears later in this file. */
.carousel-track.gal-track > * {
  flex: 0 0 calc((100% - 2 * clamp(16px, 2vw, 28px)) / 3);
}
.gal-track .gal-item { aspect-ratio: 4 / 3; }
@media (max-width: 900px) {
  .carousel-track.gal-track > * { flex: 0 0 calc((100% - clamp(16px, 2vw, 28px)) / 2); }
}
/* One slot at a time on a phone: a peeking neighbour reads as a broken layout
   on a narrow screen, and the arrows already say the row continues. */
@media (max-width: 700px) {
  .carousel-track.gal-track > * { flex: 0 0 100%; }
}

/* Caption reveals over the photo, bottom-left, on hover or keyboard focus. */
.gal-item { position: relative; }
.gal-cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 34px 16px 14px;
  font-size: 13.5px;
  line-height: 1.45;
  color: #fff;
  background: linear-gradient(180deg, rgba(18,22,28,0) 0%, rgba(18,22,28,0.86) 62%, rgba(18,22,28,0.94) 100%);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 240ms ease, transform 240ms ease;
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .gal-item:hover .gal-cap { opacity: 1; transform: none; }
}
.gal-item:focus-visible .gal-cap { opacity: 1; transform: none; }
/* touch has no hover: show the caption permanently there */
@media (hover: none) {
  .gal-cap { opacity: 1; transform: none; }
}

/* --------------------------------------------------------- page banner -- */

.banner {
  position: relative;
  background: var(--ink);
  color: #fff;
  overflow: hidden;
}
.banner > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.30;
}
.banner-veil {
  position: absolute; inset: 0;
  background: linear-gradient(92deg, rgba(18,22,28,0.96) 0%, rgba(18,22,28,0.72) 58%, rgba(18,22,28,0.40) 100%);
}
.banner-in {
  position: relative;
  padding-top: calc(var(--chrome) + 88px);
  padding-bottom: 88px;
  display: grid;
  gap: 22px;
}
.banner h1 { max-width: 17ch; }
.banner .lead { max-width: 56ch; }
.crumb {
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6F7883;
  margin-top: 8px;
}
.crumb a { color: #6F7883; }
.crumb i { color: var(--red-bright); font-style: normal; padding: 0 6px; }

/* ----------------------------------------------------------- home hero -- */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-items: end;
  background: var(--ink);
  overflow: hidden;
}
.hero > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Ekip fotografi ortali bir grup: kadraji kaydirmak insanlari kirpardi. */
  object-position: center;
  opacity: 0.58;
}
.hero-veil {
  position: absolute; inset: 0;
  /* Iki uc arasindaki fark azaltildi: onceki 0.94 -> 0.30 gecisi soldaki ucu
     neredeyse duz siyah yapip goruntuyu ikiye ayiriyordu. */
  background:
    linear-gradient(90deg, rgba(18,22,28,0.93) 0%, rgba(18,22,28,0.72) 45%, rgba(18,22,28,0.5) 100%),
    linear-gradient(0deg, rgba(18,22,28,0.55) 0%, rgba(18,22,28,0) 42%);
}
.hero-in {
  position: relative;
  padding-top: calc(var(--chrome) + 48px);
  padding-bottom: 72px;
}
.hero h1 {
  font-family: var(--font-black);
  font-size: clamp(28px, 3.9vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 900;
  color: #fff;
  margin-bottom: 18px;
  max-width: 21ch;
  /* Zorlanmış <br> ağır kesimle tutmuyordu: son satır öksüz kalıyordu.
     Dengeleme satırları eşit dağıtır ve dört dilde de kendiliğinden çalışır. */
  text-wrap: balance;
}
/* Başlık ne yaptığımızı söyler; bu satır nasıl yaptığımızı — üç modeli adıyla. */
.hero-lead {
  font-family: var(--font);
  font-weight: 400;
  font-size: clamp(15px, 1.28vw, 18.5px);
  line-height: 1.6;
  color: var(--on-dark-3);
  max-width: 60ch;
  margin-bottom: 34px;
  text-wrap: pretty;
}
.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  font-size: 14.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--red-bright);
  padding-bottom: 8px;
}
.hero-cta span { color: var(--red-bright); }

/* ------------------------------------------------------------- area grid */

.areas { background: #fff; padding: 4px; }
.areas-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}
.area {
  position: relative;
  height: clamp(200px, 34vh, 320px);
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line-dark);
  background: var(--ink-2);
  display: block;
  transition: border-color 220ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .area:hover { border-color: var(--red-bright); }
}
.area-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.72) contrast(1.04);
  transform: scale(1);
  transition: transform 620ms cubic-bezier(.2,.7,.3,1), filter 320ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .area:hover .area-img { transform: scale(1.06); filter: saturate(0.9) contrast(1.06); }
}

.area-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(18,22,28,0.15) 0%, rgba(18,22,28,0.8) 60%, rgba(18,22,28,0.96) 100%);
}
.area-face,
.area-hover {
  position: absolute;
  padding: clamp(14px, 2.2vw, 22px);
  display: grid;
  gap: clamp(6px, 1vw, 10px);
  color: #fff;
}
.area-face { left: 0; right: 0; bottom: 0; }
.area-hover {
  inset: 0;
  align-content: end;
  background: linear-gradient(180deg, rgba(18,22,28,0.55) 0%, rgba(18,22,28,0.93) 45%, rgba(18,22,28,0.97) 100%);
  opacity: 0;
  transition: opacity 260ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .area:hover .area-hover { opacity: 1; }
}
.area h3 { font-weight: 600; font-size: clamp(16px, 1.6vw, 20px); line-height: 1.22; }
.area p  { font-size: 13.5px; line-height: 1.6; color: var(--on-dark-2); }
.area-go {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  border-bottom: 1px solid var(--red-bright);
  padding-bottom: 4px;
  justify-self: start;
}

/* ---------------------------------------------------------------- models */

.models { position: relative; background: var(--ink); color: #fff; overflow: hidden; }
.models > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 500ms ease;
}
.models > img.is-on { opacity: 0.55; }
.models-veil {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(18,22,28,0.93) 0%, rgba(18,22,28,0.72) 52%, rgba(18,22,28,0.42) 100%);
}
.models-in { position: relative; display: grid; gap: 26px; }
.models-grid {
  display: grid;
  grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}
.model-list { border-left: 2px solid rgba(255, 255, 255, 0.35); display: grid; }
.model-list a {
  display: block;
  padding: clamp(10px, 1.6vh, 16px) 0 clamp(10px, 1.6vh, 16px) 26px;
  font-weight: 600;
  font-size: clamp(17px, 1.9vw, 25px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.5);
  transition: color 220ms ease;
}
.model-list a.is-on, .model-list a:hover { color: #fff; }
.model-body { display: grid; gap: 22px; align-content: start; padding-top: 6px; }

/* The three descriptions share one grid cell, so the cell is always as tall as
   the longest and switching model cross-fades rather than reflowing the row. */
.model-copy { display: grid; }
.model-copy > p {
  grid-area: 1 / 1;
  font-size: 16.5px;
  line-height: 1.72;
  color: var(--on-dark-3);
  max-width: 44ch;
  opacity: 0;
  visibility: hidden;
  transition: opacity 260ms ease, visibility 0s linear 260ms;
}
.model-copy > p.is-on {
  opacity: 1;
  visibility: visible;
  transition: opacity 260ms ease, visibility 0s;
}

/* ------------------------------------------------------------------ tech */

.tech-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.tech article { display: grid; gap: 14px; align-content: start; }
.tech img { height: 200px; width: 100%; object-fit: cover; display: block; }
.tech p { font-size: 15px; line-height: 1.7; color: var(--body); }

/* ----------------------------------------------------------------- about */

.about { position: relative; background: var(--ink); color: #fff; overflow: hidden; }
.about-bg { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; }
.about-bg > div:last-child { position: relative; overflow: hidden; }
.about-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.42; }
.about-bg span {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, #12161C 0%, rgba(18,22,28,0.72) 34%, rgba(18,22,28,0.34) 100%);
}
.about-in { position: relative; display: grid; gap: clamp(24px, 4vh, 44px); }
.about-top {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(24px, 5vw, 76px);
  align-items: end;
}
.about-top h2,
.about-h2 {
  font-weight: 500;
  font-size: clamp(30px, 5.4vw, 66px);
  line-height: 1.02;
  letter-spacing: -0.035em;
}
.about-top p { color: var(--on-dark); max-width: 46ch; font-size: 16px; line-height: 1.75; }

.assurances {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px clamp(24px, 4vw, 56px);
  max-width: 92ch;
}
@media (max-width: 900px) { .assurances { grid-template-columns: 1fr; } }

.figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  border-top: 1px solid var(--line-dark);
}
.figures > div { padding: clamp(16px, 2.6vh, 28px) 0; display: grid; gap: 8px; }
.figures b {
  font-weight: 600;
  font-size: clamp(24px, 3.2vw, 40px);
  line-height: 1;
  letter-spacing: -0.02em;
}
.figures span {
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* -------------------------------------------------------------- partners */

.partners { position: relative; background: var(--ink); color: #fff; overflow: hidden; }

/* Default backdrop — always on, and meant to read as a photograph. */
.partners > img.pt-base {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.55;
  transition: opacity 520ms ease;
}
.partners.is-hover > img.pt-base { opacity: 0; }

.partners .sec-bar .kicker { color: var(--rose); }
.partners > img.pt-swap {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 520ms ease;
}
.partners > img.pt-swap.is-on { opacity: 0.88; }
/* Hover darkens the backdrop very slightly so the disc reads; it no longer
   paints a white radial over the whole section. */
.partners-scrim {
  position: absolute; inset: 0;
  background: rgba(18, 22, 28, 0.45);
  opacity: 0;
  transition: opacity 520ms ease;
}
.partners-scrim.is-on { opacity: 1; }
.partners-in { position: relative; display: grid; place-items: center; }
/* --ring-r is the orbit radius; main.js reads it when placing the marks, so the
   two never drift apart. Capped by what fits inside one snapped screen. */
/* The dial fills whatever height its section leaves and stays square; main.js
   then derives the orbit radius and plate width from the measured box, so any
   header height or viewport works without hand-tuned magic numbers. */
.dial {
  position: relative;
  margin: 0 auto;
  /* square size is written by main.js from the measured row; this is the
     pre-script fallback so the ring is never zero-sized. max-width keeps it
     inside a phone screen even before the script runs. */
  width: min(70vh, 520px);
  max-width: 100%;
  aspect-ratio: 1 / 1;
}
/* The white lift lives HERE — a disc bounded by the ring — instead of washing
   out the whole section. It fades to nothing before the dial's edge. */
.dial-veil {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%,
    rgba(18,22,28,0.88) 0%,
    rgba(18,22,28,0.68) 38%,
    rgba(18,22,28,0.30) 60%,
    rgba(18,22,28,0) 76%);
}
.dial-ring { position: absolute; inset: clamp(28px, 6vh, 62px); border: 1px solid rgba(255,255,255,0.16); border-radius: 50%; }
.dial-core {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(46%, 300px);
  display: grid; gap: 10px;
  text-align: center; place-items: center;
}
.dial-core b {
  font-weight: 600;
  font-size: clamp(16px, 2.6vh, 24px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #fff;
}
.dial-core span { font-size: clamp(12px, 1.7vh, 14.5px); line-height: 1.6; color: var(--on-dark-2); }
.mark {
  position: absolute; left: 50%; top: 50%;
  /* Width is set by main.js from the measured radius; the widest a plate can be
     before neighbours touch is 2r·sin(pi/9) ≈ 0.68r. */
  width: var(--plate-w, 150px);
  height: clamp(58px, 8.6vh, 82px);
  display: grid; place-items: center;
  padding: 9px 8px;
  /* No plate — the marks are white and sit straight on the backdrop. */
  background: none;
  border: 0;
  transition: transform 300ms ease;
}
.mark:focus-visible { outline: 2px solid var(--rose); outline-offset: 6px; }
@media (hover: hover) and (pointer: fine) {
  .mark:hover { transform: scale(1.06); }
}
.mark img {
  /* Source marks are 200x40 — cap at native size so they stay crisp. */
  opacity: 0.74;
  width: 100%;
  max-width: 200px;
  max-height: 40px;
  height: auto;
  object-fit: contain;
  opacity: 0.9;
  transition: opacity 240ms ease;
}
.mark:focus-visible img { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .mark:hover img { opacity: 1; }
}

/* Flat dial — phones and narrow tablets.
   Nine plates on a ring need an orbit radius of at least w/(2*sin(pi/9)), about
   161px, before neighbours touch; no phone is that wide, so below 900px main.js
   drops the ring and hands the marks over as a plain grid. */
.dial.is-flat {
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.dial.is-flat .dial-veil,
.dial.is-flat .dial-ring { display: none; }
.dial.is-flat .dial-core {
  position: static;
  transform: none;
  width: auto;
  grid-column: 1 / -1;
  padding: 26px 20px 24px;
  background: var(--ink);
}
.dial.is-flat .mark {
  position: static;
  width: auto;
  height: auto;
  min-height: 84px;
  padding: 20px 12px;
  background: rgba(18, 22, 28, 0.86);
}
.dial.is-flat .mark img { max-width: 128px; opacity: 0.9; }
@media (max-width: 460px) {
  .dial.is-flat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ------------------------------------------------------------------ news */

.news-head {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: clamp(22px, 3vh, 38px);
  flex-wrap: wrap;
}
.news-head .kicker { margin-right: auto; }
/* `margin-right: auto` right-aligns whatever wraps onto the second line, which
   pushed the arrows and the "all news" link off the right edge of a phone. */
@media (max-width: 700px) {
  .news-head { gap: 14px; }
  .news-head .kicker { margin-right: 0; flex: 1 0 100%; }
}

/* Controls sit directly above the cards, not on the section-title line. */
.carousel-head {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
  margin-bottom: clamp(12px, 1.8vh, 20px);
}
.carousel-ctrl { display: flex; gap: 8px; }
.carousel-btn {
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--line-dark);
  color: #fff;
  cursor: pointer;
  padding: 0;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease, opacity 180ms ease;
}
.carousel-btn:hover:not(:disabled) { background: var(--red); border-color: var(--red); }
.carousel-btn:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; }
.carousel-btn:disabled { opacity: 0.28; cursor: default; }
.carousel-btn svg { display: block; }

/* light-surface variant, for reuse outside the dark news band */
.sec:not(.sec--dark) .carousel-btn { border-color: var(--line-2); color: var(--ink); }
.sec:not(.sec--dark) .carousel-btn:hover:not(:disabled) { color: #fff; }

.carousel { position: relative; min-width: 0; }
.carousel-track {
  display: flex;
  gap: clamp(16px, 2vw, 28px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
  padding-bottom: 2px;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track > * {
  flex: 0 0 clamp(280px, 40%, 460px);
  scroll-snap-align: start;
}
/* One slot at a time on a phone — see the note on .gal-track above. */
@media (max-width: 700px) {
  .carousel-track > * { flex: 0 0 100%; }
}
@media (prefers-reduced-motion: reduce) { .carousel-track { scroll-behavior: auto; } }

.news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(16px, 2vw, 28px); }
.news-card { display: grid; gap: 12px; align-content: start; }
.news-card img { width: 100%; height: clamp(150px, 24vh, 230px); object-fit: cover; display: block; }
.news-date { font-size: 12.5px; letter-spacing: 0.12em; color: var(--dim); }
.news-card h3 { font-weight: 600; font-size: 19px; line-height: 1.35; }
.news-card p { font-size: 15px; line-height: 1.65; color: var(--body); }
.on-dark .news-card p { color: var(--on-dark); }

/* Excerpt trimmed to a fixed number of lines; the browser adds the ellipsis. */
.clamp-4 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
  /* reserve the full four lines so cards in a row stay the same height */
  min-height: calc(4 * 1.65em);
}

/* Tıklanabilir haber kartı: tüm kartı kaplayan gerçek bağlantı. */
.news-card { position: relative; }
.news-card .news-open { position: absolute; inset: 0; z-index: 2; }
.news-card .news-open:focus-visible { outline: 2px solid var(--rose); outline-offset: 4px; }
.news-card img { transition: filter 260ms ease; }
.news-card h3 { transition: color 200ms ease; }
@media (hover: hover) and (pointer: fine) {
  .news-card:hover img { filter: brightness(1.09); }
  .news-card:hover h3 { color: var(--red); }
}
/* Şu an üstte açık olan yazı */
.news-card.is-open img { outline: 2px solid var(--red); outline-offset: -2px; }
.news-card.is-open .news-open { cursor: default; }
.news-featured { scroll-margin-top: calc(var(--chrome) + 24px); }
.news-featured:focus { outline: none; }

/* --------------------------------------------------------------- contact */

.ct-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(24px, 5vw, 72px);
  align-items: start;
}
.ct-map {
  position: relative;
  border: 1px solid #E0E3E8;
  background: #fff;
  height: clamp(190px, 30vh, 300px);
  overflow: hidden;
}
.ct-map svg,
.ct-map iframe { width: 100%; height: 100%; display: block; border: 0; }

/* Map column stretches to the full height of the details column beside it,
   with the section label lifted clear above both. */
.ct-label { margin-bottom: clamp(14px, 2vh, 24px); }
.ct-grid--even { align-items: stretch; }
.ct-map--fill { height: auto; min-height: 200px; }
.ct-rows { display: grid; gap: clamp(12px, 2vh, 20px); align-content: start; }
.ct-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: clamp(10px, 1.6vh, 16px);
  border-bottom: 1px solid var(--line-2);
  font-size: clamp(15px, 2.2vh, 19px);
  transition: border-color 200ms ease;
}
.ct-row:hover { border-color: var(--red); }
.ct-row em {
  font-style: normal;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.ct-row span { text-align: right; word-break: break-word; }

.form { display: grid; gap: 18px; }
.field { display: grid; gap: 8px; }
.field label {
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.field input, .field textarea {
  font-family: var(--font);
  font-size: 15px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line-2);
  padding: 14px 16px;
  width: 100%;
  transition: border-color 180ms ease;
}
.field input:focus, .field textarea:focus { outline: 0; border-color: var(--red); }
.field textarea { resize: vertical; min-height: 132px; }

/* ---------------------------------------------------------------- blocks */

.two   { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 60px); }
.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 2px solid var(--red);
  padding: clamp(26px, 3vw, 38px);
  display: grid;
  gap: 14px;
  align-content: start;
}
.card--dark { background: var(--ink-2); border-color: var(--line-dark); color: #fff; }
.card--dark p { color: var(--on-dark); }
.card p { font-size: 15px; line-height: 1.7; color: var(--body); }
.card-n {
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--red);
  font-weight: 600;
}
.card--dark .card-n { color: var(--rose); }

.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line-dark); }
.step { padding: clamp(26px, 3.4vw, 44px) clamp(20px, 2.6vw, 36px); border-right: 1px solid var(--line-dark); display: grid; gap: 14px; align-content: start; }
.step:last-child { border-right: 0; }
.step b { font-weight: 600; font-size: clamp(30px, 4vw, 46px); line-height: 1; color: var(--rose); letter-spacing: -0.02em; }
.step h3 { color: #fff; }
.step p { font-size: 15px; line-height: 1.7; color: var(--on-dark); }

.tick { display: grid; grid-template-columns: 14px 1fr; gap: 14px; align-items: start; font-size: 15px; line-height: 1.65; color: var(--body); }
.tick svg { margin-top: 5px; }
.on-dark .tick { color: var(--on-dark); }

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 26px 0;
  display: flex;
  align-items: center;
  gap: 24px;
  font-weight: 600;
  font-size: clamp(16px, 1.7vw, 20px);
  line-height: 1.35;
  transition: color 180ms ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--red); }
.faq summary i {
  margin-left: auto;
  flex: none;
  width: 15px; height: 15px;
  position: relative;
}
.faq summary i::before,
.faq summary i::after {
  content: ""; position: absolute; background: var(--red);
  transition: transform 240ms ease, opacity 240ms ease;
}
.faq summary i::before { inset: 7px 0 auto; height: 1.5px; }
.faq summary i::after  { inset: 0 7px auto; width: 1.5px; height: 15px; }
.faq details[open] summary i::after { transform: scaleY(0); opacity: 0; }
.faq details[open] summary { color: var(--red); }
.faq-body { padding: 0 0 28px; max-width: 74ch; }
.faq-body p { font-size: 15.5px; line-height: 1.75; color: var(--body); }

.pill-row { display: flex; flex-wrap: wrap; gap: 10px; }
.pill {
  border: 1px solid var(--line-dark);
  padding: 9px 18px;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--on-dark-2);
}

/* Dark band so the white marks read, matching the dial on the home page. */
/* Follows the flat-ink "how it works" band, so lift the tone a step and seam
   it with a hairline — otherwise the two read as one long slab. */
.logo-band {
  position: relative;
  background: var(--ink-2);
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Bes sutun: on ortak iki tam sirada oturur, artan hucre kalmaz.
   (Dokuzken uctu; THOTH AI eklenince 3+3+3+1 olup tek basina bir hucre
   kaliyordu.) */
.logo-wall {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.logo-cell {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 14px;
  place-content: center;
  justify-items: center;
  text-align: center;
  padding: clamp(24px, 3.4vw, 40px) clamp(16px, 2vw, 28px);
  background: var(--ink);
}
/* Each cell hides its partner's photograph, revealed on hover — the same
   mechanic the dial uses on the home page. */
.logo-cell .cell-bg {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 320ms ease, transform 620ms ease;
}
.logo-cell .cell-mark {
  max-height: 34px;
  width: auto;
  opacity: 0.88;
  transition: opacity 220ms ease;
}
.logo-cell p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--on-dark);
  max-width: 26ch;
  transition: color 220ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .logo-cell:hover .cell-bg { opacity: 0.34; transform: scale(1); }
  .logo-cell:hover .cell-mark { opacity: 1; }
  .logo-cell:hover p { color: #fff; }
}
@media (prefers-reduced-motion: reduce) {
  .logo-cell .cell-bg { transition: opacity 320ms ease; transform: none; }
  .logo-cell:hover .cell-bg { transform: none; }
}
@media (max-width: 1200px) { .logo-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .logo-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .logo-wall { grid-template-columns: 1fr; } }

.cta-band { background: var(--red); color: #fff; }
.cta-band .h2 { color: #fff; }
.cta-in {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  padding: 76px 0;
}
.cta-in p { font-size: 16px; line-height: 1.72; color: rgba(255, 255, 255, 0.86); max-width: 52ch; }

/* ---------------------------------------------------------------- footer */

.ft { background: var(--ink); color: var(--dim); border-top: 1px solid var(--line-dark); }
.ft a { color: var(--dim); }
.ft a:hover { color: var(--rose); }
.ft-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(28px, 4vw, 56px);
  padding-top: 72px;
  padding-bottom: 32px;
}
.ft-grid img { height: 30px; width: auto; margin-bottom: 22px; }
.ft-grid > div > p { font-size: 14px; line-height: 1.75; color: var(--dim); }
.ft h5 {
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 20px;
  font-weight: 600;
}
.ft-col { display: grid; gap: 12px; font-size: 14.5px; }
.ft-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  border-top: 1px solid var(--line-dark);
  padding-top: 20px;
  padding-bottom: 40px;
}
.ft-bar span:last-child { margin-left: auto; }

/* -------------------------------------------------------------- responsive */

@media (max-width: 1080px) {
  .areas-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tech-grid  { grid-template-columns: repeat(2, 1fr); }
  .models-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .step { border-right: 0; border-bottom: 1px solid var(--line-dark); }
  .step:last-child { border-bottom: 0; }
}

@media (max-width: 900px) {
  :root { --gutter: 24px; --bar-h: 64px; }
  .nav, .hdr-tools .icon-btn, .lang { display: none; }
  .burger {
    display: grid; align-content: center; gap: 5px;
    width: 30px; height: 30px;
    background: none; border: 0; padding: 0; cursor: pointer;
    margin-left: auto;
  }
  .burger span { display: block; height: 1.5px; background: #fff; transition: background 200ms ease; }
  .hdr.is-solid .burger span { background: var(--ink); }
  .hdr-tools { margin-left: auto; }
  .m-nav {
    display: none;
    background: #fff;
    border-top: 1px solid var(--line);
    box-shadow: 0 24px 48px rgba(18, 22, 28, 0.16);
    max-height: calc(100vh - 62px);
    overflow-y: auto;
  }
  .m-nav.is-open { display: block; }
  .m-nav a {
    display: block;
    padding: 16px 24px;
    border-bottom: 1px solid var(--line);
    font-size: 15.5px;
    color: var(--ink);
  }
  .m-nav a.sub { padding-left: 44px; font-size: 14px; color: var(--muted); }
  .panel { display: none !important; }
  .about-bg { display: none; }
  .about-top { grid-template-columns: 1fr; align-items: start; }
  .two, .cta-in { grid-template-columns: 1fr; }
  .cta-in { padding: 56px 0; }
  .banner-in { padding-top: calc(var(--chrome) + 56px); padding-bottom: 56px; }
}

@media (max-width: 680px) {
  /* One card per row on a phone, so the 4px white frame that reads as a grid
     on desktop turns into a chunky border around every card. Halve it and drop
     the side padding so the cards run edge to edge. */
  .areas { padding: 0; }
  .areas-grid { grid-template-columns: 1fr; gap: 0; }
  [data-snap] > section#areas { padding: 0; }
  .area { border-left: 0; border-right: 0; border-top: 0; }
  .area:last-child { border-bottom: 0; }
  .tech-grid, .three { grid-template-columns: 1fr; }
  .area { height: 240px; }
  .area-hover { opacity: 1; }
  .area-face { display: none; }
  .ct-row { flex-direction: column; align-items: flex-start; gap: 6px; }
  .ct-row span { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* Manrope carries no CJK glyphs, so the Chinese edition would fall back to
   whatever the OS happens to supply. Name the good system faces explicitly and
   keep Manrope first for the Latin runs (brand name, BPO/HRO/EOR). */
:lang(zh), [lang="zh"] body, [lang="zh"] input, [lang="zh"] textarea, [lang="zh"] button {
  font-family: Archivo, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
               "Noto Sans SC", "Source Han Sans SC", sans-serif;
}
[lang="zh"] { letter-spacing: 0; }
[lang="zh"] .kicker { letter-spacing: 0.08em; }

/* Touch targets. Section snapping is off below 901px so the page scrolls
   normally there — which means these can grow without pushing anything out of
   a fixed-height section. Padding only: the text itself does not move. */
@media (max-width: 900px) {
  .burger { min-width: 44px; min-height: 44px; }
  .link-r, .hero-cta, .area-go { padding-block: 12px; }
  .link-u { padding-top: 12px; }
  .ft a, .lang-menu a, .m-nav a, .ct-row, .news-card, .panel-list a { padding-block: 10px; }
  .icon-btn { width: 44px; height: 44px; }
  .carousel-btn { width: 46px; height: 46px; }
}

/* ------------------------------------------------------------- search -- */

.srch-lock { overflow: hidden; }

.srch { position: fixed; inset: 0; z-index: 200; display: none; }
.srch.is-open { display: block; }

.srch-back {
  position: absolute; inset: 0;
  background: rgba(18, 22, 28, 0.62);
  backdrop-filter: blur(3px);
}

.srch-panel {
  position: relative;
  max-width: 720px;
  margin: clamp(56px, 12vh, 140px) auto 0;
  background: #fff;
  border-top: 3px solid var(--red);
  box-shadow: 0 40px 90px rgba(18, 22, 28, 0.34);
  max-height: min(70vh, 640px);
  display: grid;
  grid-template-rows: auto auto 1fr;
}

.srch-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 20px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}
.srch-input {
  flex: 1;
  border: 0;
  outline: none;
  padding: 22px 0;
  font-family: var(--font);
  font-size: 19px;
  color: var(--ink);
  background: none;
  min-width: 0;
}
.srch-input::placeholder { color: var(--muted); }
.srch-input::-webkit-search-cancel-button { display: none; }

.srch-x {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  background: none; border: 0; padding: 0;
  color: var(--muted); cursor: pointer;
  transition: color 160ms ease;
}
.srch-x:hover { color: var(--red); }

.srch-status {
  padding: 12px 20px;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}

.srch-list { overflow-y: auto; }

.srch-hit {
  display: grid;
  gap: 5px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}
.srch-hit:hover, .srch-hit.is-on { background: var(--paper); }
.srch-hit.is-on { box-shadow: inset 3px 0 0 var(--red); }
.srch-hit-t { font-weight: 600; font-size: 16.5px; }
.srch-hit-s { font-size: 14px; line-height: 1.6; color: var(--body); }
.srch-hit mark { background: rgba(158,15,38, 0.14); color: inherit; padding: 0 1px; }

@media (max-width: 700px) {
  .srch-panel { margin: 0; max-height: 100%; height: 100%; }
  .srch-input { font-size: 17px; padding: 18px 0; }
}

/* ------------------------------------------------------------ gallery -- */

.gal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 4px;
}
.gal-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.gal-item {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--ink-2);
  aspect-ratio: 3 / 2;
  cursor: zoom-in;
}
.gal-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 620ms cubic-bezier(.2,.7,.3,1), filter 320ms ease;
  filter: saturate(0.86);
}
@media (hover: hover) and (pointer: fine) {
  .gal-item:hover img { transform: scale(1.05); filter: saturate(1); }
}
.gal-item:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

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

/* ----------------------------------------------------------- lightbox -- */

.lb { position: fixed; inset: 0; z-index: 220; display: none; }
.lb.is-open { display: grid; place-items: center; }
.lb-back { position: absolute; inset: 0; background: rgba(12, 15, 19, 0.94); }
.lb-fig { position: relative; margin: 0; display: grid; gap: 14px; justify-items: center;
          max-width: min(94vw, 1200px); max-height: 88vh; padding: 0 12px; }
.lb-fig img { max-width: 100%; max-height: 78vh; object-fit: contain; display: block; }
.lb-cap { font-size: 13.5px; letter-spacing: 0.06em; color: #C3CAD3; text-align: center; }
.lb-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; display: grid; place-items: center;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.22);
  color: #fff; cursor: pointer; transition: background 180ms ease;
}
.lb-btn:hover { background: var(--red); border-color: var(--red); }
.lb-prev { left: -68px; } .lb-next { right: -68px; }
.lb-x { position: fixed; top: 18px; right: 18px; width: 46px; height: 46px;
        display: grid; place-items: center; background: none;
        border: 1px solid rgba(255,255,255,0.28); color: #fff; cursor: pointer; }
.lb-x:hover { background: var(--red); border-color: var(--red); }
.lb-count { position: fixed; top: 24px; left: 24px; font-size: 12.5px;
            letter-spacing: 0.14em; color: #8C949E; }
@media (max-width: 900px) {
  .lb-prev { left: 4px; } .lb-next { right: 4px; }
  .lb-btn { width: 44px; height: 44px; }
}