/* ============================================================
   SERGRUP — corporate design system
   Palette from brand logo: navy #00416B · red #E51F20
   ============================================================ */

:root {
  --navy: #00416b;
  --navy-ink: #072e49;
  --navy-deep: #04263c;
  --red: #e51f20;
  --ink: #1c2830;
  --muted: #5d6c77;
  --bg: #ffffff;
  --surface: #f5f7f9;
  --line: #e3e9ed;
  --radius: 10px;
  --container: 1140px;
  --shadow: 0 12px 32px rgba(4, 38, 60, 0.08);
  --font: "Manrope", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip; /* full-bleed elements must never cause sideways scroll */
}

/* height:auto is what keeps the width/height attributes on every <img> from
   forcing their intrinsic height. The attributes are there so the browser can
   reserve the right space before the file arrives and the text stops jumping —
   rules that set an explicit height (.tile .bg, .brand img …) out-specify this. */
img { max-width: 100%; height: auto; display: block; }

a { color: var(--navy); text-decoration: none; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- typography ---------- */

h1, h2, h3, h4 {
  color: var(--navy-ink);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 14px;
}

.lead {
  font-size: 1.15rem;
  color: var(--muted);
  max-width: 46em;
}

.section-head { max-width: 640px; margin-bottom: 56px; }
.section-head h2 { font-size: clamp(1.8rem, 3.2vw, 2.5rem); margin-bottom: 16px; }

/* full-width intro: edges line up with the tiles/photo below it, and the wide
   measure is carried by the leading (same treatment as the sector leads) */
.section-head.wide { max-width: none; }
.section-head.wide .lead {
  max-width: none;
  text-align: justify;
  line-height: 1.85;
}

@media (max-width: 640px) {
  .section-head.wide .lead { text-align: left; line-height: 1.7; }
}

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}

.brand img { height: 34px; width: auto; }

.main-nav { display: flex; align-items: center; gap: 34px; }

.main-nav a {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--navy-ink);
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}

.main-nav a:hover { color: var(--red); }
.main-nav a.active { border-bottom-color: var(--red); }

/* No pill any more (user, 2026-08-01): the flag stands on its own. The padding
   stays — with no border or fill it is invisible, and it keeps the click target
   from shrinking to the 22x15 flag itself. */
.lang-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--navy);
  border: 0;
  padding: 7px 4px;
  transition: opacity 0.2s, transform 0.2s;
}

/* The pill carries a flag instead of the "EN"/"TR" code (user, 2026-08-01).
   Inline SVG, never emoji: Windows browsers do not render regional-indicator
   flag emoji and would show the bare letters "GB"/"TR" instead.
   The two flags have different native ratios (Union Jack 2:1, Turkish 3:2), so
   both are cropped into ONE 22x15 box with preserveAspectRatio="…slice" — that
   is what keeps the TR pill and the EN pill exactly the same size. The link
   keeps an aria-label/title, since a flag on its own announces nothing. */
.lang-switch .flag {
  display: block;
  width: 22px;
  height: 15px;
  border-radius: 2px;
}

/* the frame used to carry the hover; with it gone the flag lifts slightly */
.lang-switch:hover { opacity: 0.82; transform: translateY(-1px); }

/* `.main-nav a` sets `border-bottom: 2px solid transparent` for the active-page
   underline and out-specifies `.lang-switch` (0-1-1 beats 0-1-0). It is
   invisible, but it would still reserve 2px under the flag and sit it a hair
   higher than the nav labels, so it is cleared explicitly. (This same
   specificity fight used to erase the old pill's bottom edge.) */
.main-nav .lang-switch { border-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  .lang-switch:hover { transform: none; }
}

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  width: 44px;
  height: 44px;
  position: relative;
}

.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 10px;
  width: 24px;
  height: 2.5px;
  border-radius: 2px;
  background: var(--navy-ink);
  transition: transform 0.25s, opacity 0.2s;
}

.nav-toggle span { top: 21px; }
.nav-toggle span::before { left: 0; top: -8px; }
.nav-toggle span::after { left: 0; top: 8px; }

body.nav-open .nav-toggle span { background: transparent; }
body.nav-open .nav-toggle span::before { transform: translateY(8px) rotate(45deg); }
body.nav-open .nav-toggle span::after { transform: translateY(-8px) rotate(-45deg); }

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

.hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  background:
    linear-gradient(180deg, rgba(4, 38, 60, 0) 40%, rgba(4, 38, 60, 0.55) 100%),
    linear-gradient(100deg,
      rgba(4, 38, 60, 0.92) 0%,
      rgba(4, 38, 60, 0.72) 46%,
      rgba(6, 46, 73, 0.30) 100%),
    var(--navy-deep) url("../img/hero-istanbul.webp") center 30% / cover no-repeat;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* gradient overlay above the video, matching the fallback background */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(4, 38, 60, 0) 40%, rgba(4, 38, 60, 0.55) 100%),
    linear-gradient(100deg,
      rgba(4, 38, 60, 0.92) 0%,
      rgba(4, 38, 60, 0.72) 46%,
      rgba(6, 46, 73, 0.30) 100%);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
}

/* phones get the still hero background, never the video (main.js also refuses
   to attach its <source> below this width, so the file is never downloaded) */
@media (max-width: 720px) {
  .hero-video { display: none; }

  /* PHONE-ONLY: the K-Beauty slide brings its own hero photograph, because on a
     phone there is no video and the Istanbul still sat behind both slides.
     Desktop is untouched by design — the video plays across both slides there,
     and the homepage rhythm is settled (owner asked for the mobile header only).

     It is a separate ::after layer rather than a swapped background-image so the
     photo can CROSS-FADE with the slide instead of snapping, and so the file is
     fetched when the page loads rather than 5s later when the slide first turns
     — a background-image inside a class that does not exist yet is not
     downloaded until it does, which showed as a blank navy hero mid-switch.
     z-index 0 keeps it UNDER .hero::before, so it takes the same navy wash as
     the Istanbul still and the hero text keeps its contrast. */
  .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    /* The file is already cropped to the phone hero's shape (750x1749), so
       `cover` discards almost nothing and there is little slack to position.
       The 40% keeps the model's eye in frame on the taller phones, where the
       crop bites vertically instead. The eye sits right of centre, where the
       navy wash is lightest; the blossom falls behind the headline. */
    background: url("../img/hero-kbeauty.webp") center 40% / cover no-repeat;
    opacity: 0;
    transition: opacity 0.55s ease;
    pointer-events: none;
  }

  .hero.hero-kb::after { opacity: 1; }
}

.hero .container { position: relative; z-index: 2; padding-top: 120px; padding-bottom: 96px; }

.hero .eyebrow { color: #ff5a5b; margin-bottom: 8px; }

.hero h1 {
  color: #fff;
  font-size: clamp(2.3rem, 5vw, 3.7rem);
  max-width: 14em;
  line-height: 1.06;
  margin-bottom: 18px;
}

.hero h1 em { font-style: normal; color: #ff5a5b; }

.hero .lead {
  color: rgba(255, 255, 255, 0.78);
  max-width: 34em;
  line-height: 1.55;
  margin-bottom: 32px;
}

.hero .btn-primary { background: var(--red); }
.hero .btn-primary:hover { background: #fff; color: var(--navy-ink); }

.hero .btn-ghost { border-color: rgba(255, 255, 255, 0.4); color: #fff; }
.hero .btn-ghost:hover { border-color: #fff; }

/* ---- hero: two switching slides ----
   Both slides sit in the SAME grid cell, so the block is always as tall as the
   taller one and the figures below never jump when it switches. Slide 1 carries
   `.on` in the markup, so with JS off (or before main.js runs) the hero looks
   exactly as it always did. visibility is transitioned with a delay, not just
   opacity, so the hidden slide leaves the accessibility tree and its links stop
   being tabbable — an opacity-only fade would leave invisible focus stops. */

.hero-slides { display: grid; }

.hero-slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; }

.hero-slide.on { opacity: 1; visibility: visible; }

@media (prefers-reduced-motion: no-preference) {
  .hero-slide { transition: opacity 0.55s ease, visibility 0s linear 0.55s; }
  .hero-slide.on { transition: opacity 0.55s ease, visibility 0s linear 0s; }
}

.hero-dots { display: flex; gap: 10px; margin-top: 34px; }

.hero-dots button {
  width: 34px;
  height: 4px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: background 0.25s;
}

.hero-dots button:hover { background: rgba(255, 255, 255, 0.55); }
.hero-dots button.on { background: #ff5a5b; }
.hero-dots button:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

.hero .stats { border-top-color: rgba(255, 255, 255, 0.18); }
.hero .stat .num { color: #fff; }
/* one figure per row is accented, as in the growth and photo bands. Coral, not
   the brand red — #E51F20 goes muddy on the navy hero. Needs the .hero prefix:
   plain `.num.red` loses to `.hero .stat .num` above. */
.hero .stat .num.red { color: #ff5a5b; }
.hero .stat .label { color: rgba(255, 255, 255, 0.62); }

/* on phones the four hero figures stack into a long column and push the page
   down — lay them out 2×2 so the whole hero fits on one screen */
@media (max-width: 640px) {
  .hero .stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 20px;
    margin-top: 44px;
    padding-top: 32px;
  }
  .hero .stat .num { font-size: 1.75rem; }
  .hero .stat .label { font-size: 0.82rem; }
}

.btn {
  display: inline-block;
  font-weight: 800;
  font-size: 0.95rem;
  padding: 14px 30px;
  border-radius: 999px;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.btn-primary { background: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--red); }

.btn-ghost { border: 1.5px solid var(--line); color: var(--navy-ink); margin-left: 12px; }
.btn-ghost:hover { border-color: var(--navy); }

/* ---------- stat strip ---------- */

/* Explicit column counts, NOT auto-fit: the divider rules below have to know
   which figure starts a row, and auto-fit also produced a lopsided 3-then-1
   wrap around 820px. Every .stats row on the site holds exactly four figures. */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  border-top: 1px solid var(--line);
  margin-top: 70px;
  padding-top: 44px;
}

/* The growth band is two-up at every width (was an inline grid-template). */
.stats.stats-2col { grid-template-columns: repeat(2, 1fr); }

/* ---- hairline dividers between figures ----
   Drawn in the middle of the existing 32px gap, so nothing moves. They give the
   row a column structure, which is what stops figures of very different widths
   from reading as ragged. */
.stats .stat { position: relative; }

/* ::after, NOT ::before — the commit-band tiles already use ::before for their
   coral tick, and reusing it silently wiped the tick off tiles 2-4. */
.stats .stat + .stat::after {
  content: "";
  position: absolute;
  left: -16px;
  top: 2px;
  bottom: 2px;
  width: 1px;
  background: rgba(7, 46, 73, 0.14);
}

/* dark surfaces need a light rule */
.hero .stats .stat + .stat::after,
.band:not(.light) .stats .stat + .stat::after { background: rgba(255, 255, 255, 0.18); }

/* no divider on the figure that starts a row */
.stats.stats-2col .stat:nth-child(odd)::after { display: none; }

/* the commitment band's figures are filled navy tiles — they need no dividers */
.commit-band .stats .stat + .stat::after { display: none; }

.stat .num {
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.stat .num sup { font-size: 0.5em; }

/* The label scales with the viewport like .num does. The columns narrow as the
   window narrows, so a fixed label size meant each label crossed its wrap
   threshold at a different width and the labels in a row ended up on different
   line counts — which is what made the parenthetical years sit at different
   heights. Scaling keeps roughly the same characters-per-line at every width.
   Tops out at 0.9rem, so 1440px is unchanged. */
.stat .label {
  font-size: clamp(0.8rem, 1vw, 0.9rem);
  color: var(--muted);
  margin-top: 6px;
}

/* ---------- sections ---------- */

.section { padding: 100px 0; }
.section.alt { background: var(--surface); }

/* A tighter band, currently only the careers section on the contact pages
   (user, 2026-08-01: "crop the whole gray section so it looks smaller"). Only
   the breathing room is cut -- padding and the gap above the process steps --
   so nothing inside the section moves relative to anything else. */
.section.compact { padding: 68px 0; }
.section.compact .steps-wrap { margin-top: 44px; }

/* ---------- sector cards ---------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 22px;
}

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 34px 30px;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: rgba(0, 65, 107, 0.35);
}

.card h3 { font-size: 1.2rem; margin-bottom: 10px; }

.card p { font-size: 0.96rem; color: var(--muted); }

/* navy tile variant of the card grid (surdurulebilirlik/sustainability) —
   same filled-tile language as .spec; opt in with .card-grid.tiles */
.card-grid.tiles {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}

.card-grid.tiles .card {
  position: relative;
  border: 0;
  border-radius: var(--radius);
  padding: 44px 26px 28px;
  background: linear-gradient(160deg, #0a3a5c 0%, var(--navy-ink) 55%, var(--navy-deep) 100%);
}

.card-grid.tiles .card::before {
  content: "";
  position: absolute;
  top: 24px;
  left: 26px;
  width: 34px;
  height: 4px;
  background: #ff5a5b;
}

.card-grid.tiles .card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.card-grid.tiles .card h3 { color: #fff; font-size: 1.05rem; margin-bottom: 10px; }

.card-grid.tiles .card p { color: rgba(255, 255, 255, 0.72); font-size: 0.92rem; }

/* contact tiles carry links and a muted note — both need to survive on navy */
.card-grid.tiles .card a {
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

.card-grid.tiles .card a:hover {
  color: #ff5a5b;
  border-bottom-color: #ff5a5b;
}

.card-grid.tiles .card .muted { color: rgba(255, 255, 255, 0.55); }

/* ---------- sector photo tiles ---------- */

.tile-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 430px;
  border-radius: var(--radius);
  overflow: hidden;
  color: #fff;
  isolation: isolate;
}

.tile .bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: transform 0.55s ease;
}

.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,
    rgba(4, 38, 60, 0.16) 0%,
    rgba(4, 38, 60, 0.38) 42%,
    rgba(4, 38, 60, 0.82) 74%,
    rgba(4, 38, 60, 0.96) 100%);
  transition: background 0.3s;
}

.tile .tile-body {
  position: relative;
  z-index: 2;
  margin-top: auto;
  padding: 26px 24px 24px;
}

.tile h3 {
  color: #fff;
  font-size: 1.22rem;
  margin-bottom: 8px;
  text-shadow: 0 1px 3px rgba(4, 38, 60, 0.65), 0 2px 14px rgba(4, 38, 60, 0.5);
}

.tile p {
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.92rem;
  line-height: 1.5;
  text-shadow: 0 1px 3px rgba(4, 38, 60, 0.65), 0 2px 12px rgba(4, 38, 60, 0.5);
}

.tile .go {
  display: inline-block;
  margin-top: 16px;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ff5a5b;
  text-shadow: 0 1px 3px rgba(4, 38, 60, 0.7);
  transition: transform 0.3s;
}

.tile:hover .bg { transform: scale(1.06); }
.tile:hover .go { transform: translateX(6px); }

@media (max-width: 1000px) {
  .tile-grid { grid-template-columns: 1fr 1fr; }
  .tile { min-height: 380px; }

  /* the tiles turn landscape below 1000px, so this portrait photo gets cropped
     top-and-bottom and the CHER.HOTEL sign (high on the facade) is lost —
     bias the crop upward so the sign stays in frame */
  .tile .bg.bg-hotel { object-position: center 22%; }
}

@media (max-width: 620px) {
  .tile-grid { grid-template-columns: 1fr; }
  .tile { min-height: 320px; }
}

/* ---------- navy band ---------- */

.band {
  background:
    linear-gradient(rgba(4, 38, 60, 0.94), rgba(4, 38, 60, 0.96)),
    var(--navy-deep) url("../img/tile-textile.webp") center 55% / cover no-repeat;
  color: #fff;
  padding: 96px 0;
}

.band .eyebrow { color: #ff5a5b; }

.band h2 { color: #fff; font-size: clamp(1.8rem, 3.2vw, 2.5rem); margin-bottom: 18px; }

.band p { color: rgba(255, 255, 255, 0.75); max-width: 44em; }

.band .grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 70px;
  align-items: center;
}

.band .stats { border-top-color: rgba(255, 255, 255, 0.16); margin-top: 46px; }

.band .stat .num { color: #fff; }
.band .stat .num.red { color: #ff5a5b; }
.band .stat .label { color: rgba(255, 255, 255, 0.6); }

/* light variant — for pages where the band sits next to another dark section */
.band.light {
  background: var(--bg);
  color: var(--ink);
}

.band.light .eyebrow { color: var(--red); }
.band.light h2 { color: var(--navy-ink); }
.band.light p { color: var(--muted); }
.band.light .stats { border-top-color: var(--line); }
.band.light .stat .num { color: var(--navy); }
.band.light .stat .num.red { color: var(--red); }
.band.light .stat .label { color: var(--muted); }

/* financial band (kurumsal/about): skyline photo under the light wash */
.band.light.fin-band {
  background:
    linear-gradient(rgba(245, 247, 249, 0.9), rgba(245, 247, 249, 0.94)),
    var(--surface) url("../img/finance-towers.webp") center / cover no-repeat;
}

/* Tablets: drop to 2×2 here rather than letting four figures wrap 3-then-1.
   Once there are two columns, the odd-numbered figures start a row and must
   not carry a divider. */
@media (max-width: 900px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stats .stat:nth-child(odd)::after { display: none; }
}

/* phones: the plain figure rows go 2×2 instead of one long column (matches the hero).
   The commit-band's navy TILES stay full-width — their labels are full sentences. */
@media (max-width: 640px) {
  .band .stats,
  .photo-band .stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 20px;
  }

  .band .stat .num,
  .photo-band .stat .num { font-size: 1.75rem; }

  .band .stat .label,
  .photo-band .stat .label { font-size: 0.82rem; }

  .band.light.commit-band .stats { grid-template-columns: 1fr; }
}

/* narrowest phones (320px): the columns get down to ~126px and figures like
   "~10M kWh" broke across two lines. Step the figure size down so they hold. */
@media (max-width: 400px) {
  .hero .stat .num,
  .band .stat .num,
  .photo-band .stat .num { font-size: 1.5rem; }
}

/* commitment band (surdurulebilirlik/sustainability): forest canopy under the light wash */
.band.light.commit-band {
  background:
    linear-gradient(rgba(245, 247, 249, 0.9), rgba(245, 247, 249, 0.94)),
    var(--surface) url("../img/forest-canopy.min.jpg") center / cover no-repeat;
}

/* its figures are navy tiles, matching the responsibility tiles above them.
   Scoped to this band on purpose — the homepage growth band (FINAL) and the
   kurumsal financial band keep their plain figures. */
.band.light.commit-band .stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  border-top: 0;
  margin-top: 44px;
  padding-top: 0;
}

.band.light.commit-band .stat {
  position: relative;
  border-radius: var(--radius);
  padding: 44px 24px 26px;
  background: linear-gradient(160deg, #0a3a5c 0%, var(--navy-ink) 55%, var(--navy-deep) 100%);
}

.band.light.commit-band .stat::before {
  content: "";
  position: absolute;
  top: 24px;
  left: 24px;
  width: 34px;
  height: 4px;
  background: #ff5a5b;
}

.band.light.commit-band .stat .num {
  color: #fff;
  font-size: clamp(1.6rem, 2.3vw, 2.1rem);
}

.band.light.commit-band .stat .num.red { color: #ff5a5b; }

.band.light.commit-band .stat .label {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.86rem;
}

/* ---------- split (photo) section ---------- */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
}

.split .photo {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.split .photo img { width: 100%; height: 100%; object-fit: cover; }

.split .photo figcaption {
  font-size: 0.82rem;
  color: var(--muted);
  padding: 10px 14px;
  background: #fff;
}

.checklist { list-style: none; margin-top: 26px; }

/* Careers list, dropped so it starts level with the paragraph in the left column
   instead of level with the heading (user, 2026-08-01). `.split` centres its two
   columns against each other, and that centring absorbs half of any margin or
   padding, so this has to be a relative offset. Measured: the gap between the
   list top and the lead top is 29-38px across the two-column widths; 36px lands
   it on the paragraph at 1280px and above, where the heading is two lines. */
.checklist.with-lead { position: relative; top: 36px; }

.checklist li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 12px;
  color: var(--ink);
  font-size: 0.98rem;
}

.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--red);
}

/* ---------- recruitment process steps ---------- */

.steps-wrap { margin-top: 60px; }
.steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 24px;
  counter-reset: step;
}
.steps li { counter-increment: step; position: relative; padding-left: 52px; }
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-weight: 800;
  font-size: 1rem;
}
.steps strong { display: block; color: var(--ink); font-size: 1.05rem; margin-bottom: 5px; }
.steps span { color: var(--muted); font-size: 0.95rem; line-height: 1.6; }
.steps a { color: var(--red); }

@media (max-width: 720px) { .steps { grid-template-columns: 1fr; gap: 22px; } }

/* ---------- feature photo with floating stat card ---------- */

/* ---------- photo band (hero-style section with photo background) ---------- */

.photo-band {
  position: relative;
  padding: 72px 0;
  background:
    linear-gradient(rgba(245, 247, 249, 0.90), rgba(245, 247, 249, 0.94)),
    var(--surface) url("../img/spp-adiyaman.webp") center / cover no-repeat;
}

.photo-band h2 {
  font-size: clamp(1.8rem, 3.2vw, 2.5rem);
  margin-bottom: 16px;
  max-width: 18em;
}

.photo-band .lead { max-width: 40em; }

.photo-band .stats {
  border-top-color: var(--line);
  margin-top: 40px;
  padding-top: 32px;
}

.photo-band .stat .num.red { color: var(--red); }

/* ---------- page hero (inner pages) ---------- */

.page-hero {
  background: var(--navy-deep);
  color: #fff;
  padding: 86px 0 72px;
}

/* photo hero (kurumsal/about): glass facade under the navy wash */
.page-hero.hero-kurumsal {
  background:
    linear-gradient(rgba(4, 38, 60, 0.88), rgba(4, 38, 60, 0.93)),
    var(--navy-ink) url("../img/hero-corporate.webp") center / cover no-repeat;
}

/* photo hero (is-alanlari/business-areas): thread cones under the navy wash */
.page-hero.hero-sektor {
  background:
    linear-gradient(rgba(4, 38, 60, 0.88), rgba(4, 38, 60, 0.93)),
    var(--navy-ink) url("../img/hero-sectors.webp") center 45% / cover no-repeat;
}

/* photo hero (iletisim/contact): Istanbul rooftops at dusk. The extra bottom
   padding leaves room for the contact card to overlap up into it — same
   relationship the three contact tiles had before 2026-08-01. */
/* photo hero (iletisim/contact): Istanbul rooftops at dusk. A full hero exactly
   like the other inner pages — the extra bottom padding is room for the contact
   card to overlap up into it. */
.page-hero.hero-iletisim {
  background:
    linear-gradient(rgba(4, 38, 60, 0.88), rgba(4, 38, 60, 0.93)),
    var(--navy-ink) url("../img/hero-contact.webp") center 40% / cover no-repeat;
  padding-bottom: 168px;
}

/* photo hero (surdurulebilirlik/sustainability): solar farm at sunrise */
.page-hero.hero-surdurulebilirlik {
  background:
    linear-gradient(rgba(4, 38, 60, 0.88), rgba(4, 38, 60, 0.93)),
    var(--navy-ink) url("../img/hero-sustainability.webp") center 60% / cover no-repeat;
}

.page-hero .eyebrow { color: #ff5a5b; }

.page-hero h1 { color: #fff; font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 14px; }

.page-hero p { color: rgba(255, 255, 255, 0.72); max-width: 46em; }

/* ---------- history band (kurumsal/about) ---------- */

.hist-intro { max-width: 62em; }

.band.hist-band { padding: 72px 0; }

.kstrip {
  list-style: none;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.kstrip::-webkit-scrollbar { display: none; }

.kstrip li {
  flex: 0 0 300px;
  scroll-snap-align: start;
  border-top: 2px solid rgba(255, 255, 255, 0.16);
  padding: 24px 36px 6px 0;
  position: relative;
}

.kstrip li::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 34px;
  height: 4px;
  background: #ff5a5b;
}

.kstrip .era {
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ff5a5b;
  margin-bottom: 10px;
}

.kstrip .ky {
  display: block;
  font-size: 1.7rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
  white-space: nowrap;
}

.kstrip p { color: rgba(255, 255, 255, 0.72); font-size: 0.92rem; max-width: 24em; }

.kstrip-hint { margin-top: 20px; font-size: 0.8rem; color: rgba(255, 255, 255, 0.45); letter-spacing: 0.06em; }

html.js .kstrip li { opacity: 0; transform: translateX(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
html.js .kstrip li.on { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html.js .kstrip li,
  html.js .kstrip li.on { opacity: 1; transform: none; transition: none; }
}

/* ---------- vision / mission photo tiles (kurumsal/about) ---------- */

.vm-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }

.vm-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 360px;
  border-radius: var(--radius);
  overflow: hidden;
  color: #fff;
  isolation: isolate;
}

.vm-tile .bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: transform 0.55s ease;
}

.vm-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,
    rgba(4, 38, 60, 0.88) 0%,
    rgba(4, 38, 60, 0.74) 45%,
    rgba(4, 38, 60, 0.55) 100%);
}

/* text sits at the TOP of both tiles so the two labels line up on the same
   row regardless of paragraph length (the gradient is inverted to match) */
.vm-tile-body { position: relative; z-index: 2; margin-bottom: auto; padding: 32px 30px 30px; }

.vm-tile .era {
  display: block;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ff5a5b;
  margin-bottom: 12px;
  text-shadow: 0 1px 3px rgba(4, 38, 60, 0.7);
}

.vm-tile p {
  color: rgba(255, 255, 255, 0.94);
  font-size: 1.02rem;
  line-height: 1.7;
  text-shadow: 0 1px 3px rgba(4, 38, 60, 0.65), 0 2px 12px rgba(4, 38, 60, 0.5);
}

.vm-tile:hover .bg { transform: scale(1.05); }

@media (max-width: 860px) {
  .vm-tiles { grid-template-columns: 1fr; }
  .vm-tile { min-height: 300px; }
}

/* history intro: red rule under heading, emphasized lede */
.rule-red::after {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  background: var(--red);
  border-radius: 2px;
  margin-top: 16px;
}

.lede-xl { font-size: 1.17rem; line-height: 1.75; color: var(--navy-ink); }

.lede-xl strong { color: var(--navy); font-weight: 800; }

/* ---------- board (tick columns) ---------- */

.board-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 36px; }

.board-col {
  border-top: 2px solid var(--line);
  padding: 24px 12px 6px 0;
  position: relative;
}

.board-col::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 34px;
  height: 4px;
  background: var(--red);
}

.board-col .brole {
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
  min-height: 2.1em;
}

.board-col .bname {
  display: block;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.01em;
}

@media (max-width: 900px) {
  .board-cols { grid-template-columns: 1fr 1fr; gap: 34px 28px; }
  .board-col .brole { min-height: 0; }
}

@media (max-width: 520px) {
  .board-cols { grid-template-columns: 1fr; }
}

/* ---- governance block: navy filled tiles with icons ----
   User-picked over light-gray panels and a full-width dark band. The four
   columns hold governance principles, not people — see CLAUDE.md. */

.board-col .bic { display: block; }

.board-cols.v-tiles { gap: 22px; }
.board-cols.v-tiles .board-col {
  border-top: 0;
  border-radius: var(--radius);
  padding: 30px 26px 28px;
  background: linear-gradient(160deg, #0a3a5c 0%, var(--navy-ink) 55%, var(--navy-deep) 100%);
  transition: transform 0.25s, box-shadow 0.25s;
}
.board-cols.v-tiles .board-col::before { top: 30px; left: 26px; background: #ff5a5b; }
.board-cols.v-tiles .board-col:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(2, 20, 33, 0.22); }
.board-cols.v-tiles .bic { color: #ff5a5b; margin: 18px 0 14px; }
.board-cols.v-tiles .bic svg { width: 26px; height: 26px; }
.board-cols.v-tiles .brole { color: #ff5a5b; min-height: 0; margin-bottom: 8px; }
.board-cols.v-tiles .bname { color: #fff; font-size: 1.12rem; }

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

.site-footer {
  background: var(--navy-deep);
  color: rgba(255, 255, 255, 0.72);
  padding: 70px 0 0;
  font-size: 0.95rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 0.95fr 1.25fr;
  gap: 60px;
  padding-bottom: 54px;
}

.site-footer img.footer-logo { height: 32px; width: auto; margin-bottom: 20px; }

.site-footer h4 {
  color: #fff;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.site-footer ul { list-style: none; }

.site-footer li { margin-bottom: 10px; }

.footer-contact li { display: flex; align-items: flex-start; gap: 10px; }
.footer-contact .fic { flex: 0 0 auto; display: inline-flex; align-items: center; height: 1.65em; color: #ff5a5b; }
.footer-contact .fic svg { width: 16px; height: 16px; }

.site-footer a { color: rgba(255, 255, 255, 0.72); transition: color 0.2s; }

.site-footer a:hover { color: #fff; }

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 22px 0;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.45);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* ---------- anchored sections under sticky header ---------- */

[id] { scroll-margin-top: 92px; }


/* photo tiles: rounded, caption overlaid on a navy gradient */
.photo.flat,
.split .photo.flat {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: none;
  background: none;
}

.photo.flat img { display: block; width: 100%; transition: transform 0.55s ease; }

/* The textile photo is a 1600x417 banner — nearly 4:1. On a wide screen that
   reads as a deliberate letterbox, but at 375px it collapses to a 98px sliver
   next to the chunky navy spec tiles under it (user, 2026-08-01). On phones it
   is therefore CROPPED to 16:9 instead of scaled down, which lands it at ~211px
   — the same height the solar photo already gets — and the fabric rolls survive
   a centre crop because they run the full width of the frame. */
@media (max-width: 640px) {
  .photo.flat.wide-banner img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }
}

.photo.flat:hover img { transform: scale(1.04); }

.photo.flat figcaption,
.split .photo.flat figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 64px 26px 20px;
  background: linear-gradient(180deg, rgba(4, 38, 60, 0) 0%, rgba(4, 38, 60, 0.45) 42%, rgba(4, 38, 60, 0.95) 100%);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.92rem;
  text-shadow: 0 1px 3px rgba(4, 38, 60, 0.65);
}

.photo.flat .cap-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ff5a5b;
  margin-bottom: 4px;
  text-shadow: 0 1px 3px rgba(4, 38, 60, 0.7);
}

/* coral disappears against pale/warm photos (fabric rolls, concrete decks) —
   those figures carry .cap-white and get a white label instead */
.photo.flat.cap-white .cap-label { color: #fff; }

/* ---------- sector quick-nav (is-alanlari/business-areas) ---------- */

.sector-bar {
  position: sticky;
  top: 75px; /* sits flush under the 76px sticky header */
  z-index: 40;
  background: var(--navy-deep);
}

.sector-bar .container {
  display: flex;
  align-items: center;
  height: 58px;
  overflow-x: auto;
  scrollbar-width: none;
}

.sector-bar .container::-webkit-scrollbar { display: none; }

.sector-bar a {
  position: relative;
  display: flex;
  align-items: center;
  height: 58px;
  padding: 0 24px;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 700;
  font-size: 0.9rem;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.sector-bar a:first-child { padding-left: 0; }

.sector-bar a:hover,
.sector-bar a.on { color: #fff; }

.sector-bar a.on::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 13px;
  height: 3px;
  background: #ff5a5b;
}

.sector-bar a:first-child.on::after { left: 0; }

/* anchors must clear the header AND the sector bar on these pages */
.has-sector-bar [id] { scroll-margin-top: 146px; }

/* ---------- sector detail blocks ---------- */

.sector-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
}

.sector-head .sic {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: linear-gradient(160deg, #0a3a5c 0%, var(--navy-ink) 55%, var(--navy-deep) 100%);
  color: #fff;
}

.sector-head .sic svg { width: 24px; height: 24px; }

/* intro runs the full width of the photo/tiles below it; the wide measure is
   made readable by opening up the leading rather than narrowing the column */
.sector-head + .lead {
  max-width: none;
  text-align: justify;
  line-height: 1.85;
}

@media (max-width: 640px) {
  .sector-head + .lead { text-align: left; line-height: 1.7; }
}

.sector-head h2 { font-size: clamp(1.6rem, 2.8vw, 2.1rem); }

.spec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px;
  margin-top: 36px;
}

/* navy stat tiles (homepage tile language) */
.spec {
  position: relative;
  border-radius: var(--radius);
  background: linear-gradient(160deg, #0a3a5c 0%, var(--navy-ink) 55%, var(--navy-deep) 100%);
  padding: 26px 24px 22px;
  overflow: hidden;
}

.spec::before {
  content: "";
  position: absolute;
  top: 0;
  left: 24px;
  width: 34px;
  height: 4px;
  background: #ff5a5b;
}

.spec .num {
  font-size: 1.45rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
}

/* scales with the viewport for the same reason as .stat .label above */
.spec .label { font-size: clamp(0.76rem, 0.96vw, 0.86rem); color: rgba(255, 255, 255, 0.72); margin-top: 4px; }

.ext-link {
  display: inline-block;
  margin-top: 24px;
  /* The gap between two side-by-side links is a RIGHT margin on each, not a
     left margin on the second one. With margin-left, the moment the pair no
     longer fits on one line — the tourism column at phone width — the second
     link wrapped and kept its 28px indent, so it sat stepped in from the first
     and looked broken (user, 2026-08-01). A trailing right margin is invisible
     whether they sit side by side or stack. */
  margin-right: 28px;
  font-weight: 800;
  font-size: 0.92rem;
  color: var(--navy);
  border-bottom: 2px solid var(--red);
  padding-bottom: 2px;
}

.ext-link:hover { color: var(--red); }

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

/* The Google Maps embed was removed in July 2026 because a name search pinned
   the "Cher Hotel Eyüp" listing (No:148/A) instead of the head office (No:148).
   It was restored on 2026-08-01 with explicit coordinates from the owner — see
   the CONTACT MAP block near the end of this file. */

/* ---------- public notice ---------- */

/* public notice — same card family as the contact tiles: light fill, coral tick, no outline */
.notice {
  position: relative;
  background: #edf0f3;
  border: 0;
  border-radius: var(--radius);
  padding: 42px 32px 30px;
}

.notice::before {
  content: "";
  position: absolute;
  top: 26px;
  left: 32px;
  width: 34px;
  height: 4px;
  background: #ff5a5b;
}

.notice h3 { display: flex; align-items: center; gap: 10px; font-size: 1.05rem; margin-bottom: 10px; }

.notice .nic { flex: 0 0 auto; display: inline-flex; color: #ff5a5b; }
.notice .nic svg { width: 20px; height: 20px; }

.notice p { font-size: 0.93rem; color: var(--muted); }

.notice .date {
  display: block;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 12px;
  text-transform: uppercase;
}

/* ---------- reveal on scroll ---------- */

/* Applied only when JS is available (html.js), so content never hides without it */
html.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

html.js .reveal.on { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

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

@media (max-width: 900px) {
  .band .grid, .split { grid-template-columns: 1fr; gap: 44px; }
  /* stacked: the list follows the paragraph, so there is nothing to line up */
  .checklist.with-lead { top: 0; }
  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
  .section { padding: 72px 0; }
  .section.compact { padding: 52px 0; }

  /* Footer nav links were 21px tall — under the 24px WCAG 2.5.8 minimum, and
     fiddly with a thumb in a stacked list. The padding enlarges the hit area
     to 31px and the equal negative margin cancels it out, so the footer looks
     pixel-identical; only the touch target grows. The contact list is left
     alone: its rows are flex, with the icon aligned to the first text line. */
  /* The 10px gap moves off the li and becomes padding INSIDE the link, so the
     row pitch is unchanged (25px line + 10px = 35px either way) while the
     touch target grows from 21px to 35px. Negative margins were tried first
     and are wrong here: the anchor's bottom margin collapses with the li's
     instead of summing, which shifts the rows. */
  .site-footer ul:not(.footer-contact) li { margin-bottom: 0; }

  .site-footer ul:not(.footer-contact) a {
    display: block;
    padding-bottom: 10px;
  }
}

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

  .main-nav {
    position: fixed;
    inset: 76px 0 auto 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: #fff;
    border-bottom: 1px solid var(--line);
    padding: 10px 24px 24px;
    display: none;
  }

  body.nav-open .main-nav { display: flex; }

  .main-nav a { padding: 13px 0; font-size: 1.05rem; width: 100%; }

  /* Generous invisible padding, so the flag alone is still a ~40px tap target in
     the open menu. No left padding: with the frame gone, any would read as the
     flag being indented from the menu items above it. */
  .main-nav .lang-switch {
    margin-top: 14px;
    padding: 13px 8px 13px 0;
    width: auto;
  }

  .hero .container { padding-top: 76px; padding-bottom: 64px; }
  .btn-ghost { margin-left: 0; margin-top: 12px; }

  /* Active-page marker in the OPEN PHONE MENU. `.main-nav a` is width:100% here
     for the tap target, so the desktop `border-bottom` stretched into a rule
     across the whole menu and read as a divider between two items rather than a
     marker (owner picked this fix, 2026-08-02). text-decoration is used rather
     than a pseudo-element because it hugs the TEXT, not the box, so the
     underline is the length of the label — exactly what the desktop header
     does — for a short label ("İletişim") and a long one ("Sürdürülebilirlik")
     alike. A fixed-width ::after bar was tried first and read as a stray accent
     under the longer labels. */
  .main-nav a.active {
    border-bottom-color: transparent;
    text-decoration: underline;
    text-decoration-color: var(--red);
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
  }
}

/* The English hero buttons are wider than the Turkish pair ("Our Business
   Areas" / "Our Next Frontier" vs "İş Alanlarımız" / "Yeni Ufkumuz"), so at
   375px they wrapped onto two lines of different widths and read as an
   accident. Trimming the padding and type on phones puts them back on one line
   in both hero slides. Scoped to html[lang="en"] ON PURPOSE — the Turkish pair
   already fits and must stay exactly as it is (owner's choice, 2026-08-02). */
@media (max-width: 420px) {
  html[lang="en"] .hero .btn {
    padding-left: 20px;
    padding-right: 20px;
    font-size: 0.92rem;
  }

  html[lang="en"] .hero .btn-ghost { margin-top: 0; }
}

/* ============================================================
   PUBLIC-NOTICE BAR — TR homepage only (index.html)
   Hidden until main.js shows it, so it can never appear in a state
   the visitor has no way to dismiss.
   ============================================================ */

/* Light surface, NOT navy: the bar is fixed to the bottom of the viewport, so on
   phones it sits on top of the navy hero and a navy bar dissolved straight into
   it (user, 2026-08-01). The light field + hairline + shadow read as a separate
   UI layer over the hero; over the white sections below, the shadow and the
   hairline carry the separation. */
.pubnote {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  visibility: hidden;
  transform: translateY(100%);
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.3, 1), visibility 0.45s;
  background: #edf0f3;
  border-top: 1px solid rgba(7, 46, 73, 0.12);
  box-shadow: 0 -14px 40px rgba(2, 20, 33, 0.34);
}

.pubnote.on { visibility: visible; transform: translateY(0); }

.pubnote .container {
  display: flex;
  align-items: center;
  gap: 30px;
  padding-top: 18px;
  padding-bottom: 18px;
  /* left gutter for the close button, which sits in the top-left corner */
  padding-left: 58px;
}

/* coral tick, same 34x4 accent as the tiles and the notice card */
.pubnote-body { position: relative; flex: 1 1 auto; padding-top: 15px; }
.pubnote-body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 34px;
  height: 4px;
  background: var(--red);
}

.pubnote-label {
  display: block;
  font-size: 0.73rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 6px;
}

.pubnote p {
  margin: 0;
  max-width: 72em;
  font-size: 0.93rem;
  line-height: 1.55;
  color: #41535f;
}

.pubnote-actions { display: flex; align-items: center; gap: 20px; flex: 0 0 auto; }

.pubnote-link {
  color: var(--navy-ink);
  font-weight: 800;
  font-size: 0.9rem;
  white-space: nowrap;
  border-bottom: 1px solid rgba(7, 46, 73, 0.38);
  padding-bottom: 2px;
}
.pubnote-link:hover { color: var(--red); border-bottom-color: var(--red); }

/* Top-left corner, bare glyph — no filled disc (user, 2026-08-01: "smaller and
   on the top left side"). The 34px box keeps a comfortable tap target while the
   15px icon reads small; the container's 58px left padding is what frees the
   corner, so the coral tick and the label are not pushed under it. */
.pubnote-close {
  position: absolute;
  top: 14px;
  left: 18px;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: none;
  color: rgba(7, 46, 73, 0.55);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.pubnote-close:hover { color: var(--red); }
.pubnote-close svg { width: 15px; height: 15px; }

/* ---- Dark state ------------------------------------------------------------
   main.js adds .past-hero once the hero has scrolled up past the bar, so the
   bar always contrasts with whatever is actually behind it: light over the
   dark hero, navy over the white sections below (user's own idea, 2026-08-01).
   Flat navy on purpose — a gradient cannot cross-fade, it snaps. */
.pubnote.past-hero {
  background: var(--navy-ink);
  border-top-color: rgba(255, 255, 255, 0.14);
}
.pubnote.past-hero .pubnote-body::before { background: #ff5a5b; }
.pubnote.past-hero .pubnote-label { color: #ff5a5b; }
.pubnote.past-hero p { color: rgba(255, 255, 255, 0.82); }
.pubnote.past-hero .pubnote-link { color: #fff; border-bottom-color: rgba(255, 255, 255, 0.4); }
.pubnote.past-hero .pubnote-link:hover { color: #ff5a5b; border-bottom-color: #ff5a5b; }
.pubnote.past-hero .pubnote-close { color: rgba(255, 255, 255, 0.72); }
.pubnote.past-hero .pubnote-close:hover { color: #ff5a5b; }

/* The colour cross-fade lives in a no-preference query so it can never
   re-enable the transform transition that the reduce query below kills. */
@media (prefers-reduced-motion: no-preference) {
  .pubnote {
    transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.3, 1), visibility 0.45s,
                background-color 0.32s ease, border-color 0.32s ease;
  }
  .pubnote p,
  .pubnote-label,
  .pubnote-link,
  .pubnote-close,
  .pubnote-body::before {
    transition: color 0.32s ease, background-color 0.32s ease, border-color 0.32s ease;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pubnote { transition: none; }
}

/* ============================================================
   CONTACT MAP (iletisim / contact)
   Google's own light map tiles under a navy strip carrying the address and a
   directions link. The strip sat BELOW the map until 2026-08-01 (the class was
   `.map-foot`), so the block ended dark; the user moved it above the frame, so
   the strip now reads as the card's header and labels the map before you look
   at it. Renamed to `.map-head` to match.
   ============================================================ */

.map-card {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(2, 20, 33, 0.14);
}

.map-frame {
  display: block;
  width: 100%;
  height: clamp(280px, 34vw, 440px);
  border: 0;
}

.map-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  background: var(--navy-ink);
  padding: 22px 30px;
}

/* pin + address as one group, so `justify-content: space-between` above still
   sees exactly two children and keeps the directions link on the right */
.mh-main { display: flex; align-items: center; gap: 14px; }
.mh-ic { flex: 0 0 auto; display: inline-flex; color: #ff5a5b; }
.mh-ic svg { width: 24px; height: 24px; }

.map-head .mf-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ff5a5b;
  margin-bottom: 6px;
}

.map-head p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
}

.map-dir {
  flex: 0 0 auto;
  color: #fff;
  font-weight: 800;
  font-size: 0.92rem;
  white-space: nowrap;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  padding-bottom: 2px;
}
.map-dir:hover { color: #ff5a5b; border-bottom-color: #ff5a5b; }

@media (max-width: 640px) {
  .map-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 22px;
  }
  /* the pin stays beside the address, but on the FIRST line of it rather than
     centred on a block that is three lines tall here */
  .mh-main { align-items: flex-start; }
  .mh-ic { margin-top: 2px; }

  /* Stacked, the link drops below the address and would otherwise start at the
     pin's left edge instead of the text's, which reads as a misalignment
     (user, 2026-08-01). 38px = the 24px pin + the 14px gap in .mh-main; keep
     the three numbers in step if any of them changes. */
  .map-head .map-dir { margin-left: 38px; }
}

@media (max-width: 720px) {
  .pubnote .container {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding-top: 16px;
    padding-bottom: 16px;
  }
  .pubnote-actions { width: 100%; justify-content: space-between; }
  .pubnote p { font-size: 0.88rem; }
}

/* ============================================================
   SPLIT HERO (iletisim / contact)
   Full-bleed hero in two columns over the rooftop photograph. It was navy on
   the left and light grey on the right until 2026-08-01, when the user asked
   for the whole hero to be navy.
   THE WASH NOW LIVES ON THE SECTION, not on the two halves: one continuous
   gradient across the full width is the only way to avoid a seam down the
   middle, since a per-half gradient restarts at the boundary. Both halves are
   therefore transparent. The wash stays TRANSLUCENT — the rooftops must still
   read through it, which was the original brief for this hero and still holds.
   ============================================================ */

.page-hero.hero-split {
  padding: 0;
  background-color: var(--navy-ink);
  background-image:
    linear-gradient(160deg, rgba(10, 58, 92, 0.84) 0%, rgba(7, 46, 73, 0.88) 55%, rgba(4, 38, 60, 0.91) 100%),
    url("../img/hero-contact.webp");
  /* 55%, not 40%: the hero only shows a 467px band of a 1280px-tall photo, and
     at 40% nearly half of that band was empty sky with the towers cut off along
     the bottom edge. 55% lifts the picture so the skyline fills the frame
     (user, 2026-08-01). Do not push past ~60% — the tallest tower loses its
     crown and the dense low-rise housing takes over behind the text.
     No effect on phones: there the photo is scaled to the hero's height, so
     there is no vertical overflow left to position. */
  background-position: center, center 55%;
  background-size: cover, cover;
  background-repeat: no-repeat, no-repeat;
}

.hs-wrap { display: grid; grid-template-columns: 0.85fr 1.15fr; }

/* each half carries the container's own inset, so the text still lines up with
   every other page even though the block runs edge to edge */
/* 60px, down from 84 (user, 2026-08-01: same trim as the map and careers bands).
   This is what sets the hero's height, and the height decides how much of the
   photo is visible — the crop narrows around the SAME centre, because
   background-position is a percentage, so the skyline stays put and it is sky
   and low-rise housing that get trimmed off the two edges. Do not cut further
   without re-checking the photo: below ~50px the towers start losing their tops. */
.hs-intro {
  position: relative;
  padding: 60px 52px 60px max(24px, calc((100vw - var(--container)) / 2 + 24px));
}

.hs-intro::before {
  content: "";
  position: absolute;
  top: 36px;
  left: max(24px, calc((100vw - var(--container)) / 2 + 24px));
  width: 34px;
  height: 4px;
  background: #ff5a5b;
}

.hs-intro .eyebrow { color: #ff5a5b; }
.hs-intro h1 { color: #fff; font-size: clamp(1.9rem, 3.4vw, 2.6rem); margin-bottom: 14px; }
.hs-intro .lead { color: rgba(255, 255, 255, 0.78); font-size: 1.05rem; max-width: 34em; }

/* No background of its own — the section's navy wash runs straight through */
.hs-side {
  padding: 60px max(24px, calc((100vw - var(--container)) / 2 + 24px)) 60px 52px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 26px;
}

/* Nudged down to sit level with the lead paragraph on the left, instead of with
   the whole column (user, 2026-08-01). Measured, not guessed: the two centres
   are 45-51px apart at every two-column width, so 48px holds throughout.
   A relative offset, NOT margin or padding — the flex centring above would
   absorb half of either one and only move the list 24px. */
.hs-list { list-style: none; display: grid; gap: 16px; position: relative; top: 48px; }

/* Everything below is the dark-surface palette. It was the light one until the
   hero went all-navy: dark ink text, brand-red icons and a navy underline all
   disappeared against the wash. Coral (#ff5a5b), not var(--red) — the brand red
   goes muddy on navy, the same trap as the homepage hero figures. */
.hs-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.98rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.86);
}

.hs-ic { flex: 0 0 auto; display: inline-flex; color: #ff5a5b; margin-top: 2px; }
.hs-ic svg { width: 19px; height: 19px; }
.hs-list .muted { color: rgba(255, 255, 255, 0.55); }

/* the global `a { color: var(--navy) }` would leave these near-invisible */
.hs-list a { color: #fff; border-bottom: 1px solid rgba(255, 255, 255, 0.4); }
.hs-list a:hover { color: #ff5a5b; border-bottom-color: #ff5a5b; }

@media (max-width: 900px) {
  .hs-wrap { grid-template-columns: 1fr; }
  .hs-intro { padding: 56px 24px 44px; }
  .hs-intro::before { left: 24px; top: 34px; }
  .hs-side { padding: 40px 24px 52px; }
  /* the columns are stacked here, so there is nothing to line up with */
  .hs-list { top: 0; }
}