/* ============================================================
   GO TALENT — corporate design system
   Architecture ported from the SerGrup site (single stylesheet, no build step).
   Palette: petrol teal #0F5E63 · amber #F2A23A · warm paper #F4F1EA
   ============================================================ */

:root {
  --teal: #0f5e63;
  --teal-ink: #0a3f45;
  --teal-deep: #082f36;
  --teal-soft: #e5efee;
  --amber: #f2a23a;          /* fills, ticks, accents on dark — never small text on white */
  --amber-text: #9a5b0c;     /* the accessible amber for text on light surfaces */
  --ink: #1b2a2d;
  --muted: #53666a;
  --bg: #ffffff;
  --surface: #f4f1ea;
  --line: #e3ddd1;
  --radius: 12px;
  --container: 1140px;
  --shadow: 0 14px 34px rgba(8, 47, 54, 0.10);
  --font: "Manrope", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --serif: "Fraunces", Georgia, "Times New Roman", 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 */
}

img { max-width: 100%; height: auto; display: block; }

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

:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; border-radius: 4px; }

.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: #fff; padding: 10px 16px; border-radius: 8px; }
.skip:focus { left: 12px; }

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

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

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

h1, h2 { font-family: var(--serif); font-weight: 500; letter-spacing: -0.02em; }

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

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

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

/* ---------- 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 { display: inline-flex; align-items: center; gap: 10px; color: var(--teal-ink); }
.brand svg { width: 36px; height: 36px; flex: none; color: var(--teal); }
.brand .wm { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1; }
.brand .wm b { font-weight: 500; color: var(--teal); margin-left: 4px; }

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

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

.main-nav a:not(.btn):hover { color: var(--teal); border-bottom-color: var(--amber); }
.main-nav a.active { border-bottom-color: var(--amber); }

.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(--teal-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); }

/* language switch: a single flag, the flag of the OTHER language; clicking it switches */
.main-nav a.lang-switch { display: inline-flex; align-items: center; justify-content: center; padding: 8px 4px; border: 0; border-bottom: 0; line-height: 0; transition: transform 0.2s, opacity 0.2s; }
.main-nav a.lang-switch:hover { transform: translateY(-1px); opacity: 0.85; }
.lang-switch .flag { display: block; width: 26px; height: 17px; border-radius: 3px; }

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  font-family: var(--font);
  font-weight: 800;
  font-size: 0.95rem;
  padding: 14px 30px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
}

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

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

.btn-amber { background: var(--amber); color: var(--teal-deep); }
.btn-amber:hover { background: #fff; }

.btn-small { padding: 9px 22px; font-size: 0.9rem; }
.main-nav .btn { color: #fff; }

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

/* Layers, bottom to top: photo -> teal wash that keeps the text readable -> content. */
.hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: var(--teal-deep);
}

/* One photo per slide, cross-fading with the text (main.js toggles .on). */
.hero-bgs { position: absolute; inset: 0; z-index: 0; }
.hero-bgs span { position: absolute; inset: 0; opacity: 0; background-repeat: no-repeat; background-size: cover; }
.hero-bgs span.on { opacity: 1; }
.hero-bgs span:nth-child(1) { background-image: url("../img/hero-team.webp"); background-position: center 40%; }
.hero-bgs span:nth-child(2) { background-image: url("../img/hero-data.webp"); background-position: 70% 40%; }
@media (prefers-reduced-motion: no-preference) { .hero-bgs span { transition: opacity 0.6s ease; } }

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(8, 47, 54, 0) 40%, rgba(8, 47, 54, 0.55) 100%),
    linear-gradient(100deg, rgba(8, 47, 54, 0.93) 0%, rgba(8, 47, 54, 0.7) 46%, rgba(10, 63, 69, 0.2) 100%);
  pointer-events: none;
}

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

.hero .eyebrow { color: var(--amber); margin-bottom: 8px; }

/* the second slide's title is an <h2> (a page has one <h1>) that looks exactly like the first */
.hero h1, .hero .hero-title { color: #fff; font-size: clamp(2.4rem, 5.2vw, 4rem); line-height: 1.06; margin-bottom: 20px; }
.hero h1 em, .hero .hero-title em { font-style: italic; color: var(--amber); }

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

.hero .btn-primary { background: var(--amber); color: var(--teal-deep); }
.hero .btn-primary:hover { background: #fff; }
.hero .btn-ghost { border-color: rgba(255, 255, 255, 0.45); color: #fff; }
.hero .btn-ghost:hover { border-color: #fff; }

/* ---- hero: two switching slides ----
   Both slides occupy the SAME grid cell, so the block is as tall as the taller
   one and the figures below never jump. Slide 1 carries .on in the markup, so
   with JS off the hero is correct. visibility is delayed on the outgoing slide so
   it leaves the accessibility tree and its links stop being tabbable. */

.hero-slides { display: grid; }
.hero-slide { grid-area: 1 / 1; max-width: 700px; opacity: 0; visibility: hidden; } /* one text width for every slide: title and paragraph share it */
.hero-slide.on { opacity: 1; visibility: visible; }
/* Both slide paragraphs are about the same length, so they wrap to the same number of lines. On the narrowest phones the Turkish one needs a slightly smaller size to keep that. */
@media (max-width: 374px) { html[lang="tr"] .hero .lead { font-size: 1.04rem; } }
@media (max-width: 420px) { html[lang="en"] .hero .lead { font-size: 1.06rem; } }
@media (max-width: 327px) { html[lang="en"] .hero .lead { font-size: 1.09rem; } }

@media (prefers-reduced-motion: no-preference) {
  .hero-slide { transition: opacity 0.6s ease, visibility 0s linear 0.6s; transform: translateY(8px); }
  .hero-slide.on { transition: opacity 0.6s ease, transform 0.6s ease, visibility 0s linear 0s; transform: none; }
}

.hero-dots { display: flex; gap: 6px; margin-top: 24px; }
/* the visible bar stays 4px tall; the padding only enlarges the touch area (background is clipped to the content box) */
.hero-dots button { width: 40px; height: 32px; padding: 14px 0; border: 0; border-radius: 2px; background: rgba(255, 255, 255, 0.3); background-clip: content-box; cursor: pointer; transition: background 0.25s; }
.hero-dots button:hover { background-color: rgba(255, 255, 255, 0.55); }
.hero-dots button.on { background-color: var(--amber); }
.hero-dots button:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

/* ---------- trust strip ---------- */


/* ---------- figures (inside the "why choose us" band) ----------
   Same glass cards, grid and gap as the four reasons above, so the section reads
   as one 4 x 2 grid. Same placement as on the previous site. */

.why-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 18px; }

.stat-card { background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--radius); padding: 26px 24px 28px; position: relative; }

/* short amber rule — the figures' counterpart to the reasons' amber icon chips */
.stat-card::before { content: ""; display: block; width: 28px; height: 3px; border-radius: 2px; background: var(--amber); margin-bottom: 20px; }

.stat-card .num { font-family: var(--serif); font-weight: 500; font-size: clamp(2rem, 3vw, 2.6rem); line-height: 1; letter-spacing: -0.02em; color: #fff; font-variant-numeric: tabular-nums; }
.stat-card .plus { color: var(--amber); margin-left: 1px; }

.stat-card .label { margin-top: 10px; font-size: 0.95rem; font-weight: 600; line-height: 1.4; color: rgba(255, 255, 255, 0.72); }

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

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

.intro { text-align: left; }
.intro .container > * { max-width: 820px; } /* left-aligned: keep the reading width, share the page's left edge */
.quote { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(1.7rem, 3.4vw, 2.6rem); color: var(--teal-ink); line-height: 1.22; margin-bottom: 22px; }
.intro p { color: var(--muted); font-size: 1.1rem; }

/* ---------- vision / mission / strategy cards ---------- */

.vms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }



/* ---------- vision / mission / strategy: photo cards ----------
   Same language as the service cards: photo on top in the shared teal tint, an amber
   icon chip overlapping the photo's lower edge, a faint serif number, then the text. */

.vms-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s; }
.vms-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--teal); }

.vms-img { position: relative; aspect-ratio: 16 / 9; background: var(--teal-deep); }
.vms-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.55s ease; }
.vms-img::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(8, 47, 54, 0.04) 40%, rgba(8, 47, 54, 0.5) 100%), rgba(15, 94, 99, 0.22); pointer-events: none; }
.vms-img::after { content: ""; position: absolute; left: 0; top: 0; width: 38%; height: 4px; background: var(--amber); z-index: 2; }
.vms-card:hover .vms-img img { transform: scale(1.06); }
.vms-card .vic { position: absolute; left: 28px; bottom: -27px; z-index: 3; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 14px; background: var(--amber); color: var(--teal-deep); box-shadow: 0 10px 22px rgba(8, 47, 54, 0.2); }
.vms-card .vic svg { width: 27px; height: 27px; }

.vms-body { position: relative; padding: 46px 28px 32px; }
.vms-body .no { position: absolute; right: 26px; top: 20px; font-family: var(--serif); font-size: 2.3rem; font-weight: 400; line-height: 1; color: rgba(15, 94, 99, 0.18); letter-spacing: -0.02em; }
.vms-body h3 { font-size: 1.3rem; margin-bottom: 10px; }
.vms-body p { color: var(--muted); font-size: 0.98rem; }

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

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

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 460px;
  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(8, 47, 54, 0.18) 0%, rgba(8, 47, 54, 0.5) 38%, rgba(8, 47, 54, 0.9) 68%, rgba(8, 47, 54, 0.97) 100%);
}

.tile .tile-body { position: relative; z-index: 2; margin-top: auto; padding: 28px 26px 26px; }
.tile .count { display: inline-block; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber); margin-bottom: 8px; }
.tile h3 { color: #fff; font-family: var(--serif); font-weight: 500; font-size: 1.55rem; margin-bottom: 8px; text-shadow: 0 1px 3px rgba(8, 47, 54, 0.6); }
.tile p { color: rgba(255, 255, 255, 0.9); font-size: 0.95rem; line-height: 1.5; }
.tile .go { display: inline-block; margin-top: 16px; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--amber); transition: transform 0.3s; }

/* The descriptions differ in length (2 or 3 lines) and the text block is bottom-aligned,
   so reserve the same height for every description. Label, title and link then sit at
   identical heights in all three cards. Only where the cards sit side by side. */
@media (min-width: 1001px) {
  .tile p { min-height: calc(3 * 1.5em); }
}

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

/* ---------- split (photo + text) ---------- */

.split { display: grid; grid-template-columns: 1fr 1.05fr; gap: 64px; align-items: center; }
.split h2 { font-size: clamp(1.8rem, 3.2vw, 2.5rem); margin-bottom: 18px; }
.split p { color: var(--muted); margin-bottom: 14px; }
.split .photo { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.split .photo img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.split .photo img.pos-right { object-position: 78% 50%; }
.split .photo::after { content: ""; position: absolute; left: 0; bottom: 0; width: 38%; height: 6px; background: var(--amber); }

/* ---------- process steps ----------
   Four soft cards in the same language as the vision / mission cards. One marker per
   card (a solid number badge) and one connector between cards (an amber arrow), so the
   sequence is said once, not four times. The bullets use a small amber dash, not
   check marks, because these are steps in a plan, not completed tasks. */

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

.step {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 26px 30px;
  transition: transform 0.25s, box-shadow 0.25s, background 0.25s;
}

.step:hover { transform: translateY(-4px); box-shadow: var(--shadow); background: #fff; }

.sbadge {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 15px;
  background: var(--teal);
  color: #fff;
  font-family: var(--serif);
  font-size: 1.45rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  margin-bottom: 24px;
}

/* arrow linking this card to the next, level with the badge */
.step:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -25px;
  top: 43px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--amber) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23082f36' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / 62% no-repeat;
  box-shadow: 0 0 0 5px #fff;
  z-index: 2;
}

.step h3 { font-size: 1.3rem; margin-bottom: 16px; }

.step ul { list-style: none; }
.step li { position: relative; color: var(--muted); font-size: 0.95rem; padding: 7px 0 7px 22px; }
.step li + li { border-top: 1px dashed var(--line); }
.step li::before { content: ""; position: absolute; left: 0; top: 18px; width: 10px; height: 2px; border-radius: 2px; background: var(--amber); }

/* ---------- intro polish ---------- */

.intro .container::after { content: ""; display: block; width: 56px; height: 3px; border-radius: 2px; background: var(--amber); margin: 38px 0 0; }

/* ---------- photo band: why Go Talent ---------- */

.photo-band {
  position: relative;
  padding: 96px 0;
  color: #fff;
  background:
    linear-gradient(rgba(8, 47, 54, 0.9), rgba(8, 47, 54, 0.94)),
    var(--teal-deep) url("../img/band-success.webp") center / cover no-repeat;
}

.photo-band .eyebrow { color: var(--amber); }
.photo-band h2 { color: #fff; font-size: clamp(1.9rem, 3.6vw, 2.8rem); max-width: 16em; margin-bottom: 14px; }
.photo-band h2 em { font-style: italic; color: var(--amber); }
.photo-band .lead { color: rgba(255, 255, 255, 0.75); }

.why { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 48px; }

.why-item { background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--radius); padding: 28px 24px 30px; }
.why-item .ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--amber); color: var(--teal-deep); margin-bottom: 20px; }
.why-item .ic svg { width: 24px; height: 24px; }
.why-item h3 { color: #fff; font-size: 1.08rem; margin-bottom: 8px; }
.why-item p { color: rgba(255, 255, 255, 0.72); font-size: 0.93rem; line-height: 1.55; }

/* ---------- team ---------- */

.team-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px 40px; flex-wrap: wrap; margin-bottom: 44px; }
.team-head .section-head { margin-bottom: 0; }
.team-head .btn-ghost { margin-left: 0; white-space: nowrap; }
.team-head .btn-ghost:hover { background: var(--teal); border-color: var(--teal); color: #fff; }

/* homepage version: a compact introduction to the people (the full profiles live on ekip.html) */
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.team-grid .person .pic { aspect-ratio: 4 / 5; }
.team-grid .person .info { padding: 16px 20px 18px; }
.team-grid .person h3 { font-size: 1.05rem; }
.pmore { display: inline-block; margin-top: 12px; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.04em; color: var(--teal); border-bottom: 2px solid transparent; padding-bottom: 1px; transition: border-color 0.2s; }
.pmore span { display: inline-block; transition: transform 0.25s; }
.person:hover .pmore { border-bottom-color: var(--amber); }
.person:hover .pmore span { transform: translateX(4px); }

.person { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: transform 0.25s, box-shadow 0.25s; }
.person:hover { transform: translateY(-4px); box-shadow: var(--shadow); }

/* The whole photo is always shown, exactly as supplied: never cropped, never zoomed. The frames have
   one fixed size so the cards stay equal; where a photo's proportions differ from the frame, the
   free space is a plain soft tint. */
.person .pic { position: relative; aspect-ratio: 4 / 5; background: #eef3f2; overflow: hidden; }
.person .pic img { position: relative; width: 100%; height: 100%; object-fit: contain; object-position: center; }

.person .initials { width: 100%; height: 100%; display: grid; place-items: center; font-family: var(--serif); font-size: 3rem; color: var(--teal); background: linear-gradient(160deg, var(--teal-soft), #fff); }

.person .info { padding: 20px 22px 24px; flex: 1; }
.person h3 { font-size: 1.1rem; margin-bottom: 4px; }
.person .role { font-size: 0.82rem; font-weight: 700; color: var(--amber-text); margin-bottom: 0; }
.person .bio { color: var(--muted); font-size: 0.93rem; line-height: 1.6; margin-top: 12px; }

.person.is-wide { flex-direction: row; }

/* ---------- richer details: icons, tags, faq ---------- */


.tile-ic { position: absolute; top: 22px; left: 22px; z-index: 2; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.4); backdrop-filter: blur(6px); color: #fff; }
.tile-ic svg { width: 24px; height: 24px; stroke-width: 1.6; }

.tags { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.tags li { font-size: 0.74rem; font-weight: 800; letter-spacing: 0.02em; color: var(--teal); background: var(--teal-soft); padding: 5px 11px; border-radius: 999px; }

.faq-wrap { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 64px; align-items: start; }
.faq details { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 12px; transition: border-color 0.2s; }
.faq details[open] { border-color: var(--teal); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 56px 20px 24px; font-weight: 800; color: var(--teal-ink); position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--teal-soft); color: var(--teal); font-size: 1.3rem; line-height: 1; font-weight: 600; transition: background 0.2s, color 0.2s; }
.faq details[open] summary::after { content: "–"; background: var(--teal); color: #fff; }
.faq summary:focus-visible { outline-offset: -3px; }
.faq details p { padding: 0 24px 22px; color: var(--muted); }
.faq details p a { color: var(--teal); text-decoration: underline; }

.site-header { transition: box-shadow 0.25s; }
.site-header.scrolled { box-shadow: 0 6px 24px rgba(8, 47, 54, 0.08); }

/* ---------- about, faq and team-page header polish ---------- */

.about-lead { font-size: 1.18rem; font-weight: 600; line-height: 1.6; color: var(--teal-ink) !important; border-left: 3px solid var(--amber); padding-left: 20px; margin-bottom: 20px !important; }

.photo-badge { position: absolute; left: 20px; bottom: 26px; display: flex; align-items: center; gap: 12px; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(8px); border-radius: 12px; padding: 12px 18px; box-shadow: 0 10px 26px rgba(8, 47, 54, 0.18); }
.photo-badge strong { font-family: var(--serif); font-size: 1.9rem; font-weight: 500; line-height: 1; color: var(--teal); }
.photo-badge span { font-size: 0.8rem; font-weight: 700; line-height: 1.35; color: var(--teal-ink); }

.faq-wrap .section-head { position: sticky; top: 110px; }

.page-hero.has-photo .container { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
.page-hero.has-photo { padding: 72px 0 72px; }
.hero-photo { margin: 0; position: relative; }
.hero-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 78% 50%; border-radius: var(--radius); box-shadow: 0 24px 50px rgba(0, 0, 0, 0.35); }
.hero-photo::after { content: ""; position: absolute; left: 0; bottom: 0; width: 38%; height: 6px; background: var(--amber); border-radius: 0 0 0 var(--radius); }

/* LinkedIn button on the team-page profiles (rendered only when a profile link exists) */
/* full biography, expandable inside the profile card (no JavaScript needed) */
.profiles { align-items: start; }
.full { margin-top: 16px; border-top: 1px dashed var(--line); padding-top: 12px; }
.full summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 8px; font-size: 0.85rem; font-weight: 800; color: var(--teal); padding: 6px 0; }
.full summary::-webkit-details-marker { display: none; }
.full summary::after { content: "+"; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--teal-soft); font-size: 1rem; font-weight: 700; line-height: 1; transition: background 0.2s, color 0.2s; }
.full[open] summary::after { content: "–"; background: var(--teal); color: #fff; }
.full summary:hover { color: var(--teal-ink); }
.full-body { margin-top: 14px; }
.full-body p { color: var(--muted); font-size: 0.92rem; line-height: 1.65; margin-bottom: 0.9em; }
.full-body p:last-child { margin-bottom: 0; }

.in-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 0.82rem; font-weight: 800; color: var(--teal); border: 1.5px solid var(--line); border-radius: 999px; padding: 7px 14px 7px 11px; transition: background 0.2s, color 0.2s, border-color 0.2s; }
.in-link svg { width: 16px; height: 16px; flex: none; }
.in-link:hover { background: var(--teal); border-color: var(--teal); color: #fff; }

/* ---------- CTA band ---------- */

.cta-band { background: var(--teal); color: #fff; padding: 80px 0; text-align: center; }
.cta-band h2 { color: #fff; font-size: clamp(1.8rem, 3.4vw, 2.7rem); margin-bottom: 12px; }
.cta-band p { color: rgba(255, 255, 255, 0.8); margin: 0 auto 30px; max-width: 34em; }

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

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

.page-hero[class*="hero-"] {
  background:
    linear-gradient(rgba(8, 47, 54, 0.88), rgba(8, 47, 54, 0.94)),
    var(--teal-deep) var(--hero-img) center / cover no-repeat;
}

.page-hero.hero-kurumsal { --hero-img: url("../img/hero-kurumsal.webp"); }
.page-hero.hero-bireysel { --hero-img: url("../img/hero-bireysel.webp"); }
.page-hero.hero-testler  { --hero-img: url("../img/hero-testler.webp"); }
.page-hero.hero-ekip     { --hero-img: url("../img/hero-ekip.webp"); }
.page-hero.hero-iletisim { --hero-img: url("../img/hero-iletisim.webp"); }

.page-hero .eyebrow { color: var(--amber); }
.page-hero h1 { color: #fff; font-size: clamp(2.1rem, 4.2vw, 3.2rem); margin-bottom: 14px; }
.page-hero p { color: rgba(255, 255, 255, 0.78); max-width: 46em; }





/* ---------- service groups ---------- */

/* ---------- service photo cards ----------
   One continuous grid. Every card has a photo that fits its topic, tinted with the
   same teal so photos from different sources read as one family, and a small tag
   with its group. A sticky bar with group chips + search filters the grid. */

/* three-way switch between the service pages; the current page is pre-selected */
.seg-row { padding: 34px 0 22px; }
.seg { display: inline-flex; gap: 4px; padding: 5px; background: var(--teal-soft); border-radius: 999px; }
.seg a { display: inline-flex; align-items: center; gap: 8px; font-size: 0.95rem; font-weight: 800; color: var(--teal-ink); padding: 11px 22px; border-radius: 999px; transition: background 0.2s, color 0.2s; }
.seg a:hover { background: rgba(15, 94, 99, 0.12); }
.seg a.on { background: var(--teal); color: #fff; box-shadow: 0 6px 16px rgba(8, 47, 54, 0.22); }
.seg .cnt { font-size: 0.78rem; font-weight: 800; color: var(--amber-text); }
.seg a.on .cnt { color: var(--amber); }
.seg .l-short { display: none; }

.filter-bar { position: sticky; top: 76px; z-index: 40; background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.fb-row { display: flex; align-items: center; justify-content: space-between; gap: 16px 28px; padding-top: 14px; padding-bottom: 14px; flex-wrap: wrap; }

.gchips { display: flex; flex-wrap: wrap; gap: 8px; }
.gchips button {
  font: 700 0.88rem var(--font);
  color: var(--ink-soft, var(--muted));
  background: transparent;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 9px 16px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.gchips button span { font-weight: 800; color: var(--amber-text); margin-left: 4px; }
.gchips button:hover { border-color: var(--teal); color: var(--teal-ink); }
.gchips button.on { background: var(--teal); border-color: var(--teal); color: #fff; }
.gchips button.on span { color: var(--amber); }

.fb-search { position: relative; display: flex; align-items: center; gap: 12px; }
.fb-search .ic { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--muted); display: grid; }
.fb-search .ic svg { width: 18px; height: 18px; }
.fb-search input { font: 600 0.95rem var(--font); color: var(--ink); width: 250px; padding: 11px 18px 11px 44px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; transition: border-color 0.2s, box-shadow 0.2s; }
.fb-search input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 4px rgba(15, 94, 99, 0.15); }
.svc-count { font-size: 0.85rem; font-weight: 700; color: var(--muted); white-space: nowrap; }

.pgrid-wrap { padding: 44px 0 90px; }
.pgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }

.pcard { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s; }
.pcard[hidden] { display: none; }
.pcard:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--teal); }

.pc-img { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--teal-deep); }
.pc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.55s ease; }
.pc-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 47, 54, 0.04) 35%, rgba(8, 47, 54, 0.5) 100%), rgba(15, 94, 99, 0.22); pointer-events: none; }
.pcard:hover .pc-img img { transform: scale(1.06); }

.pc-tag { position: absolute; left: 12px; top: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; background: rgba(255, 255, 255, 0.93); color: var(--teal-ink); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 6px 11px 6px 8px; border-radius: 999px; max-width: calc(100% - 24px); }
.pc-tag .ti { display: grid; color: var(--teal); }
.pc-tag .ti svg { width: 14px; height: 14px; }

.pc-body { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px 18px; flex: 1; }
.pc-body .st { font-family: var(--font); font-weight: 800; font-size: 0.98rem; line-height: 1.38; letter-spacing: -0.005em; color: var(--teal-ink); flex: 1; }

.pc-body .st .sub { display: block; margin-top: 4px; font-size: 0.74rem; font-weight: 600; letter-spacing: 0; color: var(--muted); }

.pcard .ask { align-self: flex-start; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.04em; color: var(--amber-text); border-bottom: 2px solid transparent; padding: 8px 0 1px; margin-top: -6px; transition: border-color 0.2s; }
.pcard .ask span { display: inline-block; transition: transform 0.25s; }
.pcard:hover .ask { border-bottom-color: var(--amber); }
.pcard:hover .ask span { transform: translateX(4px); }

.svc-empty { padding: 36px 0 0; color: var(--muted); }
.svc-empty a { text-decoration: underline; }

/* ---------- service-page intro, search, breadcrumbs ---------- */

.svc-intro { padding: 80px 0 36px; }
.svc-intro .split { gap: 56px; }
.facts { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.facts li { background: var(--teal-soft); color: var(--teal-ink); font-size: 0.85rem; font-weight: 800; padding: 8px 16px; border-radius: 999px; }

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

.svc-empty[hidden] { display: none; }

.crumbs { display: flex; gap: 10px; align-items: center; font-size: 0.85rem; color: rgba(255, 255, 255, 0.7); margin-bottom: 26px; }
.crumbs a { color: rgba(255, 255, 255, 0.85); display: inline-block; padding: 7px 0; }
.crumbs a:hover { color: #fff; text-decoration: underline; }

.svc.alt-bg { background: var(--surface); margin-top: 56px; padding-bottom: 80px; }
.svc-note { margin-top: 32px; color: var(--muted); font-size: 0.98rem; }

/* ---------- team page ---------- */

.profiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.profiles .person { flex-direction: row; }
/* Profile cards: the photo frame has the photo's own proportions (set inline), so the photo fills it
   completely: nothing is cropped and there is no empty margin; the card border starts where the photo ends.
   All photos share the card's height; their widths follow their proportions. */
.profiles .person .pic { flex: 0 0 auto; align-self: flex-start; min-height: 0; background: none; }
.profiles .person .pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.profiles .person .info { padding: 16px 18px 16px; }
.profiles .person .bio { font-size: 0.86rem; line-height: 1.5; margin-top: 8px; }
.profiles .person .tags { margin-top: 10px; gap: 5px; }
.profiles .person .tags li { font-size: 0.74rem; padding: 4px 9px; }
.profiles .person .role { font-size: 0.78rem; }
.profiles .person .full { margin-top: 10px; padding-top: 8px; }
.profiles .person .in-link { margin-top: 10px; }
/* two cards per row only where each card is wide enough for photo + text; otherwise one per row */
@media (max-width: 1199px) { .profiles { grid-template-columns: 1fr; } }
.profiles .person h3 { font-size: 1.25rem; }

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

.contact-main { padding: 0 0 100px; }
.contact-layout { display: grid; grid-template-columns: 1.35fr 0.65fr; gap: 28px; align-items: start; margin-top: -88px; position: relative; z-index: 2; }

.cform-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 26px 56px -28px rgba(8, 47, 54, 0.45); padding: 40px 40px 42px; }
.cform-card h2 { font-size: clamp(1.7rem, 2.6vw, 2.2rem); margin-bottom: 8px; }
.cform-intro { color: var(--muted); margin-bottom: 26px; }

.contact-side { display: grid; gap: 22px; }
.contact-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 28px 26px; display: flex; gap: 18px; align-items: flex-start; }
.contact-card .ic { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--teal); color: #fff; }
.contact-card .ic svg { width: 22px; height: 22px; }
.contact-card h3 { font-size: 1.05rem; margin-bottom: 4px; }
.contact-card p { color: var(--muted); font-size: 0.93rem; margin-bottom: 10px; }
.contact-card .val { font-weight: 800; color: var(--teal-ink); font-size: 1.02rem; overflow-wrap: anywhere; }
.contact-card .val a { color: var(--teal); border-bottom: 2px solid var(--amber); display: inline-block; padding: 6px 0 2px; }

/* the form */
.cform { display: grid; gap: 20px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { display: grid; gap: 7px; align-content: start; }
.field label { font-size: 0.86rem; font-weight: 800; color: var(--teal-ink); }
.req { color: var(--amber-text); }
.opt { font-weight: 600; color: var(--muted); }

.cform input[type="text"], .cform input[type="email"], .cform input[type="tel"], .cform select, .cform textarea {
  font: 500 1rem var(--font); color: var(--ink); width: 100%; padding: 14px 16px;
  border: 1.5px solid var(--line); border-radius: 12px; background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.cform textarea { resize: vertical; min-height: 150px; line-height: 1.55; }
.cform select { appearance: none; padding-right: 42px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 8l5 5 5-5' fill='none' stroke='%230f5e63' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 14px center / 18px no-repeat; }
.cform input:focus, .cform select:focus, .cform textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 4px rgba(15, 94, 99, 0.15); }
.cform [aria-invalid="true"] { border-color: #b42318; box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.12); }

.ferr { display: none; font-size: 0.84rem; font-weight: 600; color: #b42318; }
.ferr.on { display: block; }

.consent .check { display: flex; align-items: flex-start; gap: 12px; font-size: 0.9rem; font-weight: 500; color: var(--muted); cursor: pointer; line-height: 1.5; }
.consent .check input { flex: none; width: 20px; height: 20px; margin-top: 2px; accent-color: var(--teal); }
.consent .check a { color: var(--teal); text-decoration: underline; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-status { min-height: 1.4em; font-size: 0.95rem; font-weight: 700; color: var(--muted); }
.form-status.err { color: #b42318; }
.cform .btn { justify-self: start; }
.cform .btn[disabled] { opacity: 0.65; cursor: wait; }

/* result notes: hidden until the page is reached through contact.php's redirect (:target)
   or until the script shows them */
.fnote { display: none; border-radius: 12px; padding: 20px 22px; margin-bottom: 24px; line-height: 1.5; }
.fnote strong { display: block; font-size: 1.1rem; margin-bottom: 2px; }
.fnote.ok { background: var(--teal-soft); border: 1px solid var(--teal); color: var(--teal-ink); }
.fnote.err { background: #fdf0ee; border: 1px solid #e9b4ae; color: #7a1d14; }
.fnote.err a { color: inherit; text-decoration: underline; }
.fnote:target, .fnote.show { display: block; }
.fnote:focus { outline: none; } /* focused by the script so screen readers announce it; no ring needed */
#gonderildi:target ~ .cform { display: none; }
#iletisim-formu .fnote { scroll-margin-top: 110px; }

.page-hero.hero-iletisim { padding-bottom: 150px; }

/* ---------- legal text (KVKK) ---------- */

.legal { max-width: 780px; }
.legal h2 { font-size: 1.5rem; margin: 44px 0 14px; }
.legal p, .legal li { color: var(--ink); margin-bottom: 12px; }
.legal ul { padding-left: 22px; margin-bottom: 12px; }
.legal .brief { background: var(--teal-soft); border-left: 4px solid var(--teal); border-radius: 0 var(--radius) var(--radius) 0; padding: 22px 26px 18px; margin: 28px 0 8px; }
.legal .brief h2 { margin: 0 0 10px; font-size: 1.2rem; }
.legal .brief ul { margin-bottom: 0; }
.legal strong { color: var(--teal-ink); }
.legal .legal-date { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.9rem; }
.legal .draft { background: #fff7e8; border: 1px solid var(--amber); border-radius: 10px; padding: 16px 20px; font-size: 0.95rem; }

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

.site-footer { background: var(--teal-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 .brand { color: #fff; margin-bottom: 20px; }
.site-footer .brand svg { color: #fff; }
.site-footer .brand .wm b { color: var(--amber); }
.site-footer h4 { color: #fff; font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 18px; font-family: var(--font); font-weight: 800; }
.site-footer ul { list-style: none; }
.site-footer li { margin-bottom: 4px; }
.site-footer li a, .site-footer .footer-contact a { display: inline-block; padding: 6px 0; }
.footer-contact li { display: flex; align-items: center; gap: 10px; }
.footer-contact li > span:not(.fic) { display: inline-block; padding: 6px 0; } /* same box as the e-mail link (.footer-contact a), so icon and text share one centre line */
.footer-contact .fic { flex: none; display: inline-flex; align-items: center; color: var(--amber); }
.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.5); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* anchored sections sit under the sticky header */
[id] { scroll-margin-top: 92px; }
.svc[id] { scroll-margin-top: 150px; }

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

html.js .reveal { opacity: 0; transform: translateY(18px); }

@media (prefers-reduced-motion: no-preference) {
  html.js .reveal { transition: opacity 0.6s ease, transform 0.6s ease; }
}

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

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

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

@media (max-width: 1000px) {
  .tile-grid { grid-template-columns: 1fr; }
  .tile { min-height: 340px; }
  .split { grid-template-columns: 1fr; gap: 36px; }
  .why { grid-template-columns: repeat(2, 1fr); }
  .why-stats { grid-template-columns: repeat(2, 1fr); }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .faq-wrap { grid-template-columns: 1fr; gap: 32px; }
  .faq-wrap .section-head { position: static; }
  .page-hero.has-photo .container { grid-template-columns: 1fr; gap: 36px; }
  .steps { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .step:not(:last-child)::after { display: none; }
  .svc-intro .split { gap: 36px; }
  .pgrid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .filter-bar { position: static; border-bottom: 0; }
  .fb-search, .fb-search input { width: 100%; }
  .profiles { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .footer-grid > :first-child { grid-column: 1 / -1; }
}

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

  .main-nav {
    position: absolute;
    top: 76px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 24px 24px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 30px rgba(8, 47, 54, 0.1);
    display: none;
  }

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

  .main-nav a:not(.btn) { padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 1.05rem; }
  .main-nav .btn { margin-top: 16px; text-align: center; padding: 14px 24px; }
  .main-nav a.lang-switch { align-self: flex-start; margin-top: 16px; padding: 8px 0; border: 0; }
  
  .vms { grid-template-columns: 1fr; }
  .contact-layout { grid-template-columns: 1fr; margin-top: -64px; }
  .cform-card { padding: 30px 26px 32px; }
}

@media (max-width: 640px) {
  .container { padding: 0 20px; }
  .section { padding: 72px 0; }
  /* Phones: show the photo smaller and anchored to the top so both women fit, fading into the teal behind the buttons. */
  .hero-bgs span { background-size: 165% auto; }
  .hero-bgs span:nth-child(1) { background-position: 80% 0; }
  .hero-bgs span:nth-child(2) { background-position: 85% 0; }
  .hero::before {
    background:
      linear-gradient(180deg, rgba(8, 47, 54, 0.2) 0%, rgba(8, 47, 54, 0.4) 55vw, var(--teal-deep) 110vw),
      linear-gradient(100deg, rgba(8, 47, 54, 0.6) 0%, rgba(8, 47, 54, 0.3) 100%);
  }
  .hero .container { padding-top: 84px; padding-bottom: 32px; }
  .hero-dots { margin-top: 16px; }
  .hero .lead { margin-bottom: 26px; }
  .hero-slide { align-self: center; } /* the shorter slide sits centred in the shared frame instead of leaving a gap at the bottom */
  /* Both buttons are equal halves of one row, identical on every slide (slide 2 has longer labels). */
  .hero .btn { box-sizing: border-box; width: calc(50% - 6px); max-width: 240px; padding: 16px 4px; font-size: 0.87rem; text-align: center; white-space: nowrap; }
  .hero .btn-ghost { margin-left: 6px; margin-top: 0; }
  .steps { grid-template-columns: 1fr; }
  .step { padding: 24px 22px 24px; }
  .why-stats { gap: 12px; margin-top: 12px; }
  .stat-card { padding: 20px 16px 22px; }
  .stat-card::before { margin-bottom: 16px; }
  .stat-card .num { font-size: 1.9rem; }
  .stat-card .label { font-size: 0.85rem; }
  .btn-ghost { margin-left: 0; margin-top: 12px; }
  .why { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .team-head { margin-bottom: 30px; }
  .team-head .btn-ghost { width: 100%; text-align: center; white-space: normal; }
  .team-grid .person .info { padding: 12px 14px 14px; }
  .pmore { margin-top: 8px; font-size: 0.74rem; }
  .svc-intro { padding: 56px 0 24px; }
  .pgrid-wrap { padding: 28px 0 64px; }
  .seg-row { padding: 24px 0 14px; }
  .seg { display: flex; width: 100%; }
  .seg a { flex: 1; justify-content: center; padding: 11px 6px; font-size: 0.86rem; gap: 5px; }
  .seg .l-long { display: none; }
  .seg .l-short { display: inline; }
  .pgrid { grid-template-columns: 1fr; gap: 14px; }
  .pcard { flex-direction: row; }
  .pc-img { flex: 0 0 38%; aspect-ratio: auto; min-height: 112px; }
  .pc-img img { position: absolute; inset: 0; }
  .pc-tag { display: none; }
  .pc-body { padding: 14px 16px; justify-content: center; }
  .pc-body .st { flex: 0 1 auto; font-size: 0.93rem; }
  .gchips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .gchips::-webkit-scrollbar { display: none; }
  .gchips button { flex: none; }
  .faq summary { padding: 18px 52px 18px 18px; }
  .faq details p { padding: 0 18px 20px; }
  .person .info { padding: 14px 14px 18px; }
  .person h3 { font-size: 0.98rem; }
  .person .role { font-size: 0.76rem; }
  .profiles .person { flex-direction: column; }
  .profiles .person .pic { flex: none; align-self: auto; width: 100%; }
  .profiles .person .info { padding: 20px; }
  .footer-grid { grid-template-columns: 1fr; }
  .page-hero { padding: 64px 0 52px; }
  .page-hero.hero-iletisim { padding-bottom: 110px; }
  .row2 { grid-template-columns: 1fr; gap: 20px; }
  .cform-card { padding: 24px 20px 26px; }
  .cform .btn { justify-self: stretch; text-align: center; }
  .cta-band { padding: 64px 0; }
}

/* Very small phones: stack the hero buttons on every slide, so the slides never differ. */
@media (max-width: 340px) {
  .hero .btn { display: block; width: 100%; max-width: none; }
  .hero .btn-ghost { margin-left: 0; margin-top: 10px; }
}