/* ==========================================================================
   NeoPreklinik — editoryal sayfalar: Hakkımızda ve ekip profili
   --------------------------------------------------------------------------
   Hizmetler sayfasıyla AYNI tasarım dili: kart yok, ikon yok, gradyan yok;
   hiyerarşi tipografi, ince çizgi ve etiketle kurulur. Tokenler services.css
   ile birebir aynıdır — bu projede sayfaya özel stil dosyası kendi tokenlerini
   taşır, site genelindeki değişkenler ezilmez.

   İki sayfa aynı dosyayı paylaşır: ekip profili, Hakkımızda'daki ekip
   bölümünün devamıdır; ayrı bir dosyada tokenleri ikinci kez tanımlamak
   ikisinin zamanla birbirinden ayrılması demekti. Ortak parçalar (kap,
   üst etiket, başlık vurgusu, künye paneli, kapanış şeridi) .abt- önekini
   korur; yalnızca profile özgü parçalar .tm- önekiyle yazılır.

   Ana kural: 1440px+ ekranda hiçbir bölümde yatay alanın yarısı boş kalmaz.

   Dikey ritim: açılış ve ekip 88px, ara bölümler ve kapanış 72px
   (mobilde 56px). Renk disiplini: pembe yalnızca etiket karesi, tek düğme,
   bağlantı alt çizgisi ve hover vurgusunda; ekrandaki payı %5'i geçmez.
   ========================================================================== */

.abt-hero,
.abt-team,
.abt-vm,
.abt-cta,
.tm-hero,
.tm-body,
.tm-people,
.ct-body {
  --a-paper:   #ffffff;
  --a-warm:    #f6f8fa;   /* soğuk gri-beyaz: ikincil zemin */
  --a-line:    #e4e8ec;
  --a-ink:     #16181d;
  /**
   * Başlık mürekkebi.
   * Büyük puntoda siyaha yakın gri gözü yoruyordu; başlıklar kurumsal
   * lacivertle yazılır. Gövde metni ve mikro etiketler --a-ink / --a-ink-2
   * ile aynı kalır, yalnızca başlıklar bu tonu kullanır.
   */
  --a-ink-head: #1f2a5c;
  --a-ink-2:   #5a5e66;
  /* Okunan metin mürekkebi: mikro etiketlerde --a-ink-2 doğru, paragrafta soluk. */
  --a-body:    #33373f;
  /* Hizmetler'deki #8b9096 burada 11px künye satırında tek başına kullanılıyor;
     beyaz üzerinde 3.3:1 kalıyordu. AA için koyultuldu (5.0:1). */
  --a-ink-3:   #6b7078;
  --a-pink:    #e5097f;
  --a-pink-bg: #fdf0f6;   /* yalnızca küçük yüzeylerde */

  --a-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --a-head: "Instrument Sans", "Archivo", var(--font-sans);
}

/* --- Yerleşim kabı --------------------------------------------------------- */
/* Site genelindeki .container 1180px ve akışkan gutter kullanır; bu sayfa
   şartname gereği 1160px + 24/48px sabit iç boşlukla çalışır. */
.abt-shell {
  width: 100%;
  max-width: 1160px;
  margin-inline: auto;
  padding-inline: 24px;
}
@media (min-width: 1024px) {
  .abt-shell { padding-inline: 48px; }
}

/* --- Ortak tipografik öğeler ---------------------------------------------- */

/* Mikro üst satır: 11px, harf aralıklı, önünde 8px pembe kare. */
.abt-kicker {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .35rem .75rem;
  margin: 0 0 1rem;
  font-family: var(--a-mono);
  font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--a-ink-2);
}
.abt-kicker::before {
  content: ""; flex: none;
  width: 8px; height: 8px;
  background: var(--a-pink);
}
.abt-kicker span + span {
  border-left: 1px solid var(--a-line);
  padding-left: .75rem;
}

/* Bölüm başlığı — 28-32px, ekip ve kapanışta ortak. */
.abt-h2 {
  font-family: var(--a-head);
  font-size: clamp(1.5rem, 1.25rem + .8vw, 2rem);
  font-weight: 600; letter-spacing: -.02em; line-height: 1.2;
  color: var(--a-ink-head);
  margin: 0;
}

/* Başlıkta tek kelime vurgusu — Hizmetler'deki imza detayın aynısı:
   elle çizilmiş hissi veren, hafif eğik pembe alt çizgi. Mutlak konumludur,
   satır yüksekliğini etkilemez. Kaydırma px değil em'dir: başlık sarıp
   vurgulu kelime alt satırın üstüne geldiğinde sabit 6px, küçük puntolarda
   bir sonraki satırın harflerine değiyordu. */
.abt-mark { position: relative; white-space: nowrap; }
.abt-mark::after {
  content: "";
  position: absolute; left: -.04em; right: -.04em; bottom: -.08em;
  height: 3px;
  background: var(--a-pink);
  border-radius: 2px;
  transform: rotate(-.6deg);
  opacity: .9;
}

/* --- 1) Açılış: künye ------------------------------------------------------ */
.abt-hero {
  background: var(--a-paper);
  border-bottom: 1px solid var(--a-line);
  padding-block: 56px;
  color: var(--a-ink-2);
}
.abt-hero .breadcrumb { margin-bottom: 1rem; }

.abt-hero__grid { display: grid; gap: 40px; align-items: start; }
@media (min-width: 1280px) {
  .abt-hero__title { line-height: 1.12; }
}
@media (min-width: 1024px) {
  .abt-hero { padding-block: 88px; }
  /* Sağ kolon boş bırakılmaz: başlık bloğu ile künye paneli üstten aynı
     hizada başlar, geniş ekranda sayfanın sağ yarısı ölü alan olmaz. */
  .abt-hero__grid { grid-template-columns: 1.2fr .8fr; gap: 80px; }
}

.abt-hero__title {
  font-family: var(--a-head);
  /* 700 ağırlık + 56px, ekranda koyu bir blok gibi duruyordu. */
  font-weight: 600;
  font-size: clamp(1.75rem, 1.05rem + 2vw, 2.875rem);
  /**
   * Satır aralığı puntoya bağlıdır. Şartnamedeki sıkı 1.08 yalnızca başlık
   * 48px ve üzerindeyken (≥1280px) güvenli: küçük puntolarda "yayına"nın
   * altındaki çizgi ikinci satırın harflerine değiyor. Aşağısında açılır.
   */
  line-height: 1.24;
  letter-spacing: -.02em;
  color: var(--a-ink-head);
  margin: 0;
}
.abt-hero__text {
  margin: 24px 0 0;
  max-width: 540px;
  font-size: 17px; line-height: 1.65;
  color: var(--a-body);
}

/* Künye paneli — dekor değil, dört gerçek bilgi. Hover davranışı yok. */
.abt-facts {
  border: 1px solid var(--a-line);
  border-radius: 6px;
  background: var(--a-warm);
  padding: 28px;
}
.abt-facts__head {
  margin: 0 0 .5rem;
  font-family: var(--a-mono);
  font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--a-ink-3);
}
.abt-facts__list { margin: 0; }
.abt-facts__list > div {
  display: grid; gap: 4px;
  padding-block: 14px;
  border-top: 1px solid var(--a-line);
}
.abt-facts__list dt {
  font-family: var(--a-mono);
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--a-ink-3);
}
.abt-facts__list dd {
  margin: 0;
  font-size: 15px; font-weight: 500; line-height: 1.45;
  color: var(--a-ink);
}
.abt-facts__motto {
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--a-line);
  font-size: 11px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--a-ink-3);
}

@media (max-width: 1023px) {
  /* Panel paragrafın altına, aynı ölçü sütununda kalarak iner. */
  .abt-facts { max-width: 540px; }
}
@media (max-width: 639px) {
  .abt-hero__title { line-height: 1.28; }
  .abt-hero__text { font-size: 16px; }
  .abt-facts { padding: 20px; }
  .abt-facts__list > div { padding-block: 12px; }
}

/* --- 2) Ekip -------------------------------------------------------------- */
/**
 * Zemin: kırık beyaz bant + sağ üst köşede sönümlenen nokta ızgarası.
 *
 * Düz gri bant, iki kayıt için fazla büyük ve boş duruyordu. Desen bölümün
 * TAMAMINA yayılmaz — maske ile sağ üstten sol alta doğru söner; kaplarsa
 * gürültü olur, köşede kalınca derinlik olur. Aynı desen dili ana sayfadaki
 * .pattern-molecule ile ortaktır (nokta + radial maske).
 *
 * Bant iki ucundan da 1px çizgiyle kapanır: kesilmiş değil, ciltlenmiş durur.
 */
.abt-team {
  position: relative;
  isolation: isolate;
  background: var(--a-warm);
  border-top: 1px solid var(--a-line);
  border-bottom: 1px solid var(--a-line);
  padding-block: 56px;
  color: var(--a-ink-2);
}
.abt-team::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  /* Nokta rengi kapanış şeridiyle (site.css .cta-band::before) aynı reçeteyi
     kullanır: düz gri yerine çok saydam lacivert. Yeni soğuk zeminde düz
     #e4e8ec nokta görünmez oluyordu; saydam mürekkep zeminle birlikte çalışır. */
  background-image: radial-gradient(circle at 1px 1px, rgba(31, 42, 92, .06) 1px, transparent 0);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(680px 420px at 88% 8%, #000 0%, transparent 70%);
  mask-image: radial-gradient(680px 420px at 88% 8%, #000 0%, transparent 70%);
}
/* Telefonda desen tamamen kapalı: dar ekranda köşe etkisi okunmuyor,
   yalnızca zemini kirletiyor. */
@media (max-width: 639px) { .abt-team::before { display: none; } }
@media (min-width: 1024px) { .abt-team { padding-block: 88px; } }

/* Başlık ve kayıt ızgarası aynı 1000px'lik kutuyu paylaşır: aksi hâlde
   başlık, ortalanmış kayıtların 80px soluna düşüyordu. */
.abt-team__inner { max-width: 1000px; margin-inline: auto; }

/* Üst etiket kendi satırında; kısa not, üst etiketin değil BAŞLIĞIN sağında
   ve onunla aynı taban çizgisinde durur. */
.abt-team__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  column-gap: 24px; row-gap: .35rem;
  margin-bottom: 40px;
}
.abt-team__head > .abt-kicker { grid-column: 1 / -1; margin-bottom: .25rem; }
.abt-team__note { margin: 0; font-size: 14px; color: var(--a-ink-2); }
@media (max-width: 639px) {
  .abt-team__head { grid-template-columns: minmax(0, 1fr); }
}

/* İki kayıt geniş ekranda savrulmaz: ızgara .abt-team__inner ile 1000px'te
   durur ve ortalanır. */
.abt-team__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 40px;
}
@media (min-width: 1024px) {
  .abt-team__list { grid-template-columns: 1fr 1fr; gap: 48px; }
}

/**
 * Ekip bölümünün kapanış satırı — staj bağlantısı.
 * Kayıtlarla aynı sol hizada, ince bir çizginin altında tek satır. Kutu ya da
 * buton kullanılmaz: bu bir çağrı değil, ekibin altına düşülmüş bir nottur.
 */
.abt-team__closing {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--a-line);
}
.abt-team__closing-line {
  margin: 0;
  font-size: 15px; line-height: 1.6;
  color: var(--a-body);
}
.abt-team__closing-note {
  margin: 6px 0 0;
  font-size: 12px; line-height: 1.5;
  color: var(--a-ink-2);
}
.abt-intern-link {
  color: var(--a-pink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.abt-intern-link span[aria-hidden] {
  display: inline-block;
  transition: transform .2s ease;
}
.abt-intern-link:hover { color: var(--a-pink); }
.abt-intern-link:hover span[aria-hidden] { transform: translate(2px, -2px); }
@media (max-width: 639px) {
  /* Dokunma hedefi: bağlantı satır sarsa bile 44px yüksekliğinde kalır. */
  .abt-intern-link { display: inline-flex; align-items: center; min-height: 44px; }
}

.abt-person {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

/**
 * Portre 4:5 dikeydir (ölçü değişmedi: 200 / 160 / 120px).
 *
 * Fotoğrafın ARKASINDA, 8px sağ-alt kaydırılmış içi boş pembe bir çerçeve
 * durur. Gölge DEĞİLDİR — sistemin "gölge yok" kuralı bozulmadan editoryal
 * bir derinlik verir; fotoğraf zemine yapıştırılmış gibi durmaz. Üzerine
 * gelindiğinde kayma 5px'e çekilir: portre "yerine oturur".
 *
 * Kırpma artık kutuda değil <picture> üzerindedir; kutuda overflow:hidden
 * kalsaydı arkadaki çerçeve de kırpılırdı.
 */
.abt-person__photo {
  position: relative;
  width: 200px; max-width: 100%;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--a-line);
  border-radius: 8px;
  background: var(--a-paper);
}
.abt-person__photo::before {
  content: "";
  position: absolute;
  inset: 8px -8px -8px 8px;   /* aynı boyut, sağ-alta 8px kaymış */
  z-index: -1;
  border: 1.5px solid var(--a-pink);
  border-radius: 8px;
  transition: inset .3s cubic-bezier(.22, .61, .36, 1);
}
.abt-person:hover .abt-person__photo::before { inset: 5px -5px -5px 5px; }
.abt-person__photo picture {
  position: absolute; inset: 0; display: block;
  overflow: hidden;
  border-radius: inherit;
}
.abt-person__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top;
  filter: saturate(.9);
  transition: filter .3s ease, transform .45s cubic-bezier(.22, .61, .36, 1);
  transition: filter .3s ease;
}
.abt-person:hover .abt-person__photo img { filter: saturate(1); transform: scale(1.03); }

/* Yer tutucu görselin ARKASINDA durur: panelden fotoğraf silinse ya da
   dosya yüklenemese bile kolon boş kalmaz. */
.abt-person__initials {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--a-head);
  font-size: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  font-weight: 600; letter-spacing: -.02em;
  color: #b9bcc2;
  background: var(--a-paper);
  border-radius: inherit;
}

.abt-person__body { min-width: 0; }
.abt-person__name {
  margin: 0;
  font-family: var(--a-head);
  font-size: 20px; font-weight: 600;
  letter-spacing: -.01em; line-height: 1.25;
  color: var(--a-ink-head);
}
/* Ünvan isme bağlanır: bir tık koyu mürekkep, dar boşluk. */
.abt-person__role {
  margin: 4px 0 0;
  font-size: 14px; line-height: 1.5;
  color: #4a4e56;
}
.abt-person__summary {
  margin: 12px 0 0;
  font-size: 15px; line-height: 1.6;
  color: var(--a-body);
}

/**
 * Kaydın iki çıkışı: profil sayfası ve özgeçmiş.
 *
 * Alt çizgili iki bağlantı yığını, metin bloğunun altında "artık kalmış"
 * gibi duruyordu. İkisi de artık kompakt birer düğme: profil bağlantısı
 * çerçeveli sakin düğme, özgeçmiş çerçevesiz hayalet düğme.
 *
 * İkisi de DOLGULU PEMBE DEĞİLDİR: sayfadaki tek dolu pembe düğme başlıktaki
 * "Hizmet Talebi"dir ve öyle kalmalıdır — buradakiler sessiz durur.
 */
.abt-person__links {
  display: flex; flex-wrap: wrap;
  gap: 12px;
  margin: 20px 0 0;
}
.abt-person__link {
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 40px;
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 14px; font-weight: 600;
  color: var(--a-ink);
  text-decoration: none;
  background: var(--a-paper);
  border: 1px solid var(--a-line);
  transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
.abt-person__link span[aria-hidden] { transition: transform .2s ease-out; }
.abt-person__link:hover,
.abt-person__link:focus-visible {
  color: var(--a-pink);
  border-color: var(--a-pink);
  text-decoration: none;
}
.abt-person__link:hover span[aria-hidden] { transform: translateX(4px); }
.abt-person__link:focus-visible {
  outline: 2px solid var(--a-pink);
  outline-offset: 2px;
}

/* Özgeçmiş: hayalet düğme — dış dosya olduğu için oku değil, indirme imasını
   taşır (↓) ve hover'da açık pembe zemine oturur. */
.abt-person__link--cv {
  background: transparent;
  border-color: transparent;
  font-weight: 500;
  color: var(--a-ink-2);
}
.abt-person__link--cv:hover,
.abt-person__link--cv:focus-visible {
  background: var(--a-pink-bg);
  border-color: transparent;
  color: var(--a-pink);
}
.abt-person__link--cv:hover span[aria-hidden] { transform: translateY(2px); }

/* Orta genişlik: kayıtlar alt alta, kayıt içi yatay düzen korunur. */
@media (min-width: 640px) and (max-width: 1023px) {
  .abt-person { grid-template-columns: 160px minmax(0, 1fr); }
  .abt-person__photo { width: 160px; }
}

/* Dar ekran: portre solda 120px, metin sağında. */
@media (max-width: 639px) {
  .abt-team__head { margin-bottom: 32px; }
  .abt-person { grid-template-columns: 120px minmax(0, 1fr); gap: 16px; }
  .abt-person__photo { width: 120px; }
  .abt-person__name { font-size: 18px; }
  /* Düğmeler tam satır genişliğine yayılmaz: içerik genişliğinde yan yana
     dururlar, sığmazsa alt satıra sarar. Dokunma hedefi 44px. */
  .abt-person__links { gap: 10px; margin-top: 16px; }
  .abt-person__link { min-height: 44px; padding-inline: 16px; }
  /* Dar ekranda 8px'lik kayma taşkın duruyordu. */
  .abt-person__photo::before { inset: 5px -5px -5px 5px; }
  .abt-person:hover .abt-person__photo::before { inset: 4px -4px -4px 4px; }
}

/* --- 3) Vizyon & Misyon --------------------------------------------------- */
/* Kart yok, kutu yok: iki kolon ve aralarında tek bir 1px çizgi. */
.abt-vm {
  background: var(--a-paper);
  padding-block: 56px;
  color: var(--a-ink-2);
}
@media (min-width: 1024px) { .abt-vm { padding-block: 72px; } }
/* Hakkımızda sayfasının son bölümü budur (kapanış şeridi kaldırıldı):
   alt bilgiden önce nefes payı bırakılır. */
.abt-vm:last-of-type { padding-bottom: 72px; }
@media (min-width: 1024px) { .abt-vm:last-of-type { padding-bottom: 88px; } }

.abt-vm__grid {
  max-width: 1000px; margin-inline: auto;
  display: grid; gap: 32px;
}
.abt-vm__rule { height: 1px; background: var(--a-line); }
@media (min-width: 1024px) {
  .abt-vm__grid { grid-template-columns: 1fr 1px 1fr; gap: 56px; }
  .abt-vm__rule { height: auto; width: 1px; }
}
.abt-vm__text {
  margin: 0;
  font-size: 17px; line-height: 1.65;
  color: var(--a-body);
}

/* --- 4) Kapanış ----------------------------------------------------------- */
/* Hizmetler sayfasındaki kapanış şeridiyle aynı bileşen; metinler değişir. */
.abt-cta {
  background: var(--a-warm);
  border-top: 1px solid var(--a-line);
  padding-block: 56px;
}
@media (min-width: 1024px) { .abt-cta { padding-block: 72px; } }

.abt-cta__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 16px 28px;
  text-align: center;
}
.abt-cta__actions {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 14px 20px;
}
.abt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 44px;
  padding: .7rem 1.4rem;
  border-radius: 999px;
  background: var(--a-pink);
  color: #fff;
  font-size: 15px; font-weight: 600;
  text-decoration: none;
  transition: background-color .18s ease;
}
.abt-btn:hover { background: #c8076e; color: #fff; text-decoration: none; }

/**
 * Çerçeveli varyant — bir ekranda yalnızca TEK dolu pembe düğme görünsün diye.
 * İletişim sayfasının yapışkan rayı formun gönder düğmesiyle aynı ekrana
 * gelebiliyor; ray bu varyantı kullanır ve sessiz kalır.
 */
.abt-btn--ghost {
  background: var(--a-paper);
  border: 1px solid var(--a-line);
  color: var(--a-ink);
}
.abt-btn--ghost:hover,
.abt-btn--ghost:focus-visible {
  background: var(--a-paper);
  border-color: var(--a-pink);
  color: var(--a-pink);
}
.abt-btn span { transition: transform .2s ease-out; }
.abt-btn:hover span { transform: translateX(4px); }
.abt-cta__alt { font-size: 14px; color: var(--a-ink-2); }
.abt-cta__alt a { color: var(--a-ink); text-decoration: underline; text-underline-offset: 3px; }
.abt-cta__alt a:hover { color: var(--a-pink); }

@media (max-width: 639px) {
  .abt-cta__inner { flex-direction: column; }
  /* Düğme tam genişliğe yayılmaz; ortada 280px'te durur. */
  .abt-cta__actions { flex-direction: column; width: 100%; max-width: 280px; }
  .abt-btn { width: 100%; }
  .abt-cta__alt a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ==========================================================================
   EKİP PROFİLİ — /ekip/{slug} · "Profil dosyası"
   --------------------------------------------------------------------------
   Bu sayfaların içeriği kısa: iki-dört paragraf biyografi, birkaç çip, varsa
   iki proje. Yan ray denemesi bu yüzden bırakıldı — uzun bir ray kısa içeriğin
   yanında her zaman dengesiz kalıyordu. Yeni düzen tek okuma hattıdır:

     1) Fotoğraflı profil bandı (künye burada erir, aşağıda tekrar edilmez)
     2) Tek kolon gövde: Hakkında / Projeler / Konular
     3) Ekip gezinme şeridi (kısa sayfanın kapanışı; diğer üyeye köprü)
     4) Ortak kapanış şeridi

   Ölçü kararı: portre kahraman değil kimlik kartıdır — masaüstünde 280×350,
   tablette 200×250, telefonda 140×175 ve HER ZAMAN sola yaslı. Ortalanmış
   portre CV şablonu gibi duruyordu.

   Hiçbir kırılımda yatay taşma yoktur; dokunma hedefleri 44px'in altına
   inmez (çipler 40px'e kadar).
   ========================================================================== */

/* Sayfa kabı — Hakkımızda'nın kabıyla aynı ölçü, kırılım başına farklı iç
   boşluk (telefon 24, tablet 32, masaüstü 48). */
.tm-shell {
  width: 100%;
  max-width: 1160px;
  margin-inline: auto;
  padding-inline: 24px;
}
@media (min-width: 640px)  { .tm-shell { padding-inline: 32px; } }
@media (min-width: 1024px) { .tm-shell { padding-inline: 48px; } }

/* --- 1) Profil bandı ------------------------------------------------------- */
.tm-hero {
  background: var(--a-paper);
  border-bottom: 1px solid var(--a-line);
  padding-block: 24px 32px;
  color: var(--a-ink-2);
}
@media (min-width: 640px)  { .tm-hero { padding-block: 40px 48px; } }
@media (min-width: 1024px) { .tm-hero { padding-block: 48px 56px; } }

/* Telefonda tek kolon; sıra DOM sırasıdır: künye yolu → portre → kimlik. */
.tm-hero__grid { display: grid; }
@media (min-width: 640px) {
  .tm-hero__grid { grid-template-columns: 200px minmax(0, 1fr); column-gap: 32px; align-items: center; }
  .tm-hero__crumbs   { grid-column: 2; grid-row: 1; margin-bottom: 16px; }
  .tm-hero__portrait { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
  .tm-hero__id       { grid-column: 2; grid-row: 2; }
}
@media (min-width: 1024px) {
  .tm-hero__grid { grid-template-columns: 280px minmax(0, 1fr); column-gap: 56px; }
}

/* Künye yolu: uzun isim tek satırda kalır, sonu kısalır. */
.tm-hero__crumbs .breadcrumb { margin-bottom: 12px; }
.tm-hero__crumbs .breadcrumb ol { flex-wrap: nowrap; font-size: 13px; }
/* Ara basamaklar kırılmaz, yalnızca son öğe (uzun isim) kısalır. */
.tm-hero__crumbs .breadcrumb li { flex: none; white-space: nowrap; }
.tm-hero__crumbs .breadcrumb li:last-child {
  min-width: 0; flex: 0 1 auto;
  overflow: hidden; text-overflow: ellipsis;
}
@media (min-width: 640px) { .tm-hero__crumbs .breadcrumb ol { font-size: 14px; } }

/* Portre — sola yaslı, sabit ölçü; kırpma yukarıdan hizalanır (yüz kadraja
   girsin diye). */
.tm-hero__portrait {
  position: relative;
  width: 140px; aspect-ratio: 4 / 5;
  margin: 16px 0 20px;
  overflow: hidden;
  border: 1px solid var(--a-line);
  border-radius: 6px;
  background: var(--a-warm);
}
@media (min-width: 640px)  { .tm-hero__portrait { width: 200px; margin: 0; } }
@media (min-width: 1024px) { .tm-hero__portrait { width: 280px; } }
.tm-hero__portrait picture { position: absolute; inset: 0; display: block; }
.tm-hero__portrait img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  filter: saturate(.9);
  transition: filter .25s ease;
}
.tm-hero__portrait:hover img { filter: saturate(1); }
.tm-hero__initials {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--a-head);
  font-size: 1.75rem; font-weight: 600; letter-spacing: -.02em;
  color: #b9bcc2;
}
@media (min-width: 640px) { .tm-hero__initials { font-size: 2.25rem; } }

/* Kimlik bloğu */
.tm-hero__id .abt-kicker { margin-bottom: .5rem; font-size: 10px; }
@media (min-width: 640px) { .tm-hero__id .abt-kicker { font-size: 11px; } }

.tm-hero__name {
  margin: 0;
  font-family: var(--a-head);
  font-weight: 700;
  font-size: clamp(1.625rem, 8vw, 2rem);
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--a-ink-head);
}
@media (min-width: 640px) {
  .tm-hero__name { font-size: clamp(1.875rem, 1.2rem + 1.6vw, 2.375rem); line-height: 1.1; }
}
@media (min-width: 1024px) {
  .tm-hero__name { font-size: clamp(2.125rem, 1.4rem + 1.6vw, 3rem); }
}

.tm-hero__org {
  margin: 8px 0 0;
  max-width: 46ch;
  font-size: 14px; line-height: 1.55;
  color: var(--a-ink-2);
}
.tm-hero__duty {
  margin: 20px 0 0;
  max-width: 52ch;
  font-size: 14px; line-height: 1.6;
  color: var(--a-ink-2);
}
@media (min-width: 640px) {
  .tm-hero__org  { font-size: 15px; }
  .tm-hero__duty { font-size: 15px; }
}
@media (min-width: 1024px) { .tm-hero__org { font-size: 16px; } }

/* Aksiyon satırı — masaüstünde nokta ayraçlı tek satır, telefonda alt alta
   tam genişlikte dokunma satırları. */
.tm-hero__actions {
  display: flex; flex-direction: column;
  gap: 4px;
  margin-top: 20px;
}
@media (min-width: 640px) {
  .tm-hero__actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 0; margin-top: 24px; }
  /* Ayraç yalnızca aynı satırda yan yana gelen öğeler arasında görünür;
     satır sarınca başa düşmez. */
  .tm-hero__actions > * + *::before {
    content: "·";
    margin: 0 .85rem;
    color: #b9bcc2;
  }
}

.tm-doc,
.tm-mail {
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 44px;
  font-size: 15px; font-weight: 500;
  color: var(--a-ink);
  text-decoration: none;
  transition: color .18s ease;
}
.tm-doc__text {
  border-bottom: 1px solid var(--a-pink);
  padding-bottom: 2px;
  transition: border-color .18s ease;
}
.tm-doc span[aria-hidden] { transition: transform .2s ease-out; }
.tm-doc:hover, .tm-doc:focus-visible { color: var(--a-pink); text-decoration: none; }
.tm-doc:hover span[aria-hidden] { transform: translateX(4px); }
.tm-mail {
  color: var(--a-ink-2);
  text-decoration: underline; text-decoration-color: #c9ccd1;
  text-underline-offset: 3px;
}
.tm-mail:hover { color: var(--a-pink); text-decoration-color: var(--a-pink); }

/* --- 2) Gövde: tek okuma hattı -------------------------------------------- */
.tm-body {
  background: var(--a-paper);
  padding-block: 40px 56px;
  color: var(--a-ink-2);
}
@media (min-width: 640px)  { .tm-body { padding-block: 48px 72px; } }
@media (min-width: 1024px) { .tm-body { padding-block: 56px 88px; } }

.tm-body__inner { max-width: 720px; }
@media (min-width: 1024px) {
  /* Gövde, hero'nun ızgarasını aynen sürdürür: solda 280px'lik etiket kolonu
     (hero'daki portrenin hizası), sağda metin (kimlik bloğunun hizası). Bölüm
     etiketleri bu sayede sol kolonu doldurur — sayfa boyunca tek bir omurga
     okunur, sol taraf boş kalmaz. */
  .tm-body__inner { max-width: calc(280px + 56px + 720px); }
  .tm-block {
    display: grid;
    grid-template-columns: 280px minmax(0, 720px);
    column-gap: 56px;
    align-items: start;
  }
  /* Etiket, sağdaki ilk satırın x-yüksekliğine oturur. */
  .tm-block > .abt-kicker { margin: 0; padding-top: 6px; }
}

.tm-block + .tm-block { margin-top: 44px; }
@media (min-width: 640px)  { .tm-block + .tm-block { margin-top: 56px; } }
@media (min-width: 1024px) { .tm-block + .tm-block { margin-top: 48px; padding-top: 48px; border-top: 1px solid var(--a-line); } }

/* Biyografi */
.tm-bio p {
  margin: 0 0 16px;
  font-size: 17px; line-height: 1.7;
  color: var(--a-body);
}
@media (min-width: 640px) { .tm-bio p { margin-bottom: 20px; font-size: 18px; line-height: 1.75; } }
.tm-bio p:last-child { margin-bottom: 0; }

/* Projeler — kart değil kayıt satırı. Telefonda rozet üstte, başlık altında:
   uzun proje adları yan yana dizilimde kırılıyordu. */
.tm-projects { list-style: none; margin: 0; padding: 0; }
.tm-project {
  position: relative;
  display: grid; gap: 8px;
  padding: 16px 0;
}
@media (min-width: 640px) {
  .tm-project { grid-template-columns: 150px minmax(0, 1fr); gap: 24px; padding: 20px 0; }
}
/* Üst çizgi ayrı bir katmandır: girişte soldan sağa çizilir. */
.tm-project::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--a-line);
  transform: scaleX(1); transform-origin: left center;
  transition: transform .4s ease-out;
}
.tm-project__badge {
  justify-self: start; align-self: start;
  padding: 4px 10px;
  border-radius: 4px;
  background: var(--a-pink-bg);
  font-family: var(--a-mono);
  font-size: 12px; font-weight: 600; letter-spacing: .04em;
  color: var(--a-pink);
  white-space: nowrap;
}
.tm-project__title {
  margin: 0;
  font-size: 15px; font-weight: 500; line-height: 1.5;
  color: var(--a-ink-head);
}
@media (min-width: 640px) { .tm-project__title { font-size: 16px; } }

/* Konu çipleri — eşleşen hizmet kaydına giden bağlantılardır; eşleşmesi
   olmayan çip aynı görünümde düz metin kalır. */
.tm-chips {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
@media (min-width: 640px) { .tm-chips { gap: 10px; } }
.tm-chip {
  display: inline-flex; align-items: center;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--a-line);
  border-radius: 999px;
  background: transparent;
  font-size: 14px; line-height: 1.3;
  color: var(--a-ink);
  text-decoration: none;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
@media (min-width: 640px) { .tm-chip { padding: 8px 16px; font-size: 15px; } }
a.tm-chip:hover,
a.tm-chip:focus-visible {
  background: var(--a-pink-bg);
  border-color: var(--a-pink);
  color: var(--a-pink);
  text-decoration: none;
}
a.tm-chip:active { background: var(--a-pink-bg); }
.tm-chip--plain { color: var(--a-ink-2); }

/* --- 3) Geri dönüş şeridi -------------------------------------------------- */
/* Gövdeyi kapatan ince şerit: içinde yalnızca ekibe dönüş bağlantısı var. */
/* Sayfanın son bölümü budur (kapanış şeridi kaldırıldı): alt bilgiye
   yapışmasın diye dikey boşluk bir kademe açılır ve altta ayraç çizgisi
   bulunur — alt bilgi kendi üst çizgisiyle üstüne oturur. */
.tm-people {
  background: var(--a-warm);
  border-top: 1px solid var(--a-line);
  border-bottom: 1px solid var(--a-line);
  padding-block: 32px;
  color: var(--a-ink-2);
}
@media (min-width: 1024px) { .tm-people { padding-block: 40px; } }

.tm-back {
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 44px;
  font-size: 15px; font-weight: 500;
  color: var(--a-ink-2);
  text-decoration: none;
}
.tm-back span[aria-hidden] { transition: transform .2s ease-out; }
.tm-back:hover { color: var(--a-pink); text-decoration: none; }
.tm-back:hover span[aria-hidden] { transform: translateX(-4px); }

/* --- Girişler ------------------------------------------------------------- */
/* Ortak .reveal düzeneği; mesafe ve gecikme bu sayfada telefonda kısalır. */
.js .tm-reveal.reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .35s ease, transform .35s ease;
}
.js .tm-reveal.reveal.is-visible { opacity: 1; transform: none; }

/* Hero: portre ve kimlik bloğu 80ms arayla gelir (kaydırma beklemez). */
.js .tm-hero__id.reveal { transition-delay: .08s; }

/* Proje kayıtlarının üst çizgileri bölüm görünüme girince çizilir.
   JavaScript kapalıysa çizgiler zaten yerindedir. */
.js .tm-block.reveal .tm-project::before { transform: scaleX(0); }
.js .tm-block.reveal.is-visible .tm-project::before { transform: scaleX(1); }
.tm-project:nth-child(2)::before { transition-delay: .06s; }
.tm-project:nth-child(3)::before { transition-delay: .12s; }
.tm-project:nth-child(4)::before { transition-delay: .18s; }

@media (max-width: 639px) {
  .js .tm-reveal.reveal { transform: translateY(6px); }
  .js .tm-hero__id.reveal { transition-delay: .06s; }
}

@media (prefers-reduced-motion: reduce) {
  .tm-hero__portrait img,
  .tm-doc, .tm-doc__text, .tm-doc span[aria-hidden],
  .tm-mail, .tm-chip,
  .tm-back span[aria-hidden],
  .tm-project::before { transition: none; }
  .tm-doc:hover span[aria-hidden],
  .tm-back:hover span[aria-hidden] { transform: none; }
  /* Çizgi animasyonu kapalı: kayıt çizgileri doğrudan yerinde durur. */
  .js .tm-block.reveal .tm-project::before { transform: scaleX(1); }
}

/* ==========================================================================
   İLETİŞİM — form + eşlik rayı
   --------------------------------------------------------------------------
   Yalnızca sayfanın ALT bölümü; açılış (page-header) dokunulmadan kalır.

   Sorun neydi: sol kutu kısa, sağdaki form uzundu; form uzadıkça solda dev
   bir boşluk kalıyordu. Çözüm, ağırlığı ters çevirmek: form ana eleman olarak
   sola geçti, yönlendirmeler sağda yapışkan (sticky) dar bir raya alındı.
   Ray artık formun boyundan bağımsız; boşluk sorunu ortadan kalkıyor.

   Kutu/gölge yok: form çıplak, ray tek bir ince çerçeveli panel.
   ========================================================================== */

.ct-body {
  background: var(--a-paper);
  border-top: 1px solid var(--a-line);
  padding-block: 56px;
  color: var(--a-ink-2);
}
@media (min-width: 1024px) { .ct-body { padding-block: 88px; } }

.ct-grid { display: grid; gap: 40px; align-items: start; }
@media (min-width: 1024px) {
  .ct-grid { grid-template-columns: minmax(0, 1fr) 380px; gap: 64px; }
  /* DOM sırası rayı önce verir (dar ekranda üstte olmalı); geniş ekranda
     ızgara ikisini de kendi kolonuna, aynı satıra yerleştirir. */
  .ct-form { grid-column: 1; grid-row: 1; }
  .ct-rail { grid-column: 2; grid-row: 1; }
}

/* --- Form ----------------------------------------------------------------- */
.ct-head { margin-bottom: 28px; }
.ct-head__note { margin: 0; font-size: 14px; color: var(--a-ink-2); }

/* Girdi stilleri sisteme uydurulur: mavi-gri çerçeve ve halka yerine
   #E4E8EC çizgi, odakta pembe çerçeve + açık pembe dış halka. */
.ct-form .field { gap: 6px; }
.ct-form .field__label {
  font-size: 13px; font-weight: 500;
  color: var(--a-ink);
}
.ct-form .field__req { color: var(--a-pink); }
.ct-form .field__hint { font-size: 12px; color: var(--a-ink-3); }
.ct-form .input,
.ct-form .textarea,
.ct-form .select {
  font-size: 15px;
  color: var(--a-ink);
  background: var(--a-paper);
  border: 1px solid var(--a-line);
  border-radius: 6px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.ct-form .input::placeholder,
.ct-form .textarea::placeholder { color: #a7abb2; }
.ct-form .input:hover,
.ct-form .textarea:hover,
.ct-form .select:hover { border-color: #cfcac6; }
.ct-form .input:focus,
.ct-form .textarea:focus,
.ct-form .select:focus {
  outline: none;
  border-color: var(--a-pink);
  box-shadow: 0 0 0 2px var(--a-pink-bg);
}
/* Yukarıdaki `background` kısayolu site.css'teki no-repeat/position/size
   longhand'larını sıfırlıyor; ok simgesi bu yüzden burada tam olarak
   yeniden tanımlanır (aksi hâlde okun kopyaları yan yana diziliyordu). */
.ct-form .select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a5e66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .85rem center;
  background-size: 1.05rem;
}
.ct-form .checkbox input[type="checkbox"] { accent-color: var(--a-pink); }
.ct-form .checkbox__text { font-size: 14px; color: var(--a-ink-2); }
.ct-form .checkbox__text a { color: var(--a-ink); text-underline-offset: 3px; }
.ct-form .checkbox__text a:hover { color: var(--a-pink); }

/* Konu seçimine bağlı tek satır yönlendirme. */
.ct-subject-note {
  margin: 8px 0 0;
  font-size: 13px;
}
.ct-subject-note a {
  color: var(--a-pink);
  text-decoration: underline; text-underline-offset: 3px;
}
.ct-subject-note a:hover { color: #b8076a; }

.ct-actions { margin-top: 28px; }

/* Gönderim sonrası: düğmenin yerini alan tek satır onay. İkon yok, yeşil yok;
   sayfanın kendi pembesiyle yazılır. */
.ct-sent {
  margin: 0;
  padding: 14px 0 0;
  border-top: 2px solid var(--a-pink);
  font-size: 15px; font-weight: 500;
  color: var(--a-ink);
}
.ct-alert {
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--a-line);
  border-left: 2px solid var(--a-pink);
  border-radius: 4px;
  background: var(--a-warm);
  font-size: 14px; color: var(--a-ink);
}

/* --- Eşlik rayı ------------------------------------------------------------ */
@media (min-width: 1024px) {
  /* Form ne kadar uzarsa uzasın ray ekranda kalır. */
  .ct-rail { position: sticky; top: calc(var(--header-h) + 24px); }
}
.ct-rail__panel {
  border: 1px solid var(--a-line);
  border-radius: 6px;
  background: var(--a-warm);
  padding: 24px;
}
.ct-block + .ct-block {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--a-line);
}
.ct-block__title {
  margin: 0 0 6px;
  font-family: var(--a-head);
  font-size: 16px; font-weight: 600; letter-spacing: -.01em;
  color: var(--a-ink-head);
}
.ct-block__text { margin: 0 0 16px; font-size: 15px; line-height: 1.6; color: var(--a-body); }
.ct-block__note { margin: 6px 0 0; font-size: 12px; color: var(--a-ink-3); }
.ct-btn { width: 100%; }

.ct-link {
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 24px;
  font-size: 15px; font-weight: 500;
  color: var(--a-ink);
  text-decoration: none;
}
.ct-link span:first-child {
  border-bottom: 1px solid var(--a-pink);
  padding-bottom: 2px;
}
.ct-link:hover { color: var(--a-pink); text-decoration: none; }

/* Mini SSS — details/summary; ok ikonu yok, +/− metin işareti var. */
.ct-faq { display: grid; }
.ct-faq details + details { border-top: 1px solid var(--a-line); }
.ct-faq summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 10px 0;
  min-height: 44px;
  font-size: 14px; font-weight: 500; line-height: 1.5;
  color: var(--a-ink);
  cursor: pointer;
  list-style: none;
}
.ct-faq summary::-webkit-details-marker { display: none; }
.ct-faq summary::after {
  content: "+";
  flex: none;
  font-family: var(--a-mono);
  font-size: 14px; line-height: 1.6;
  color: var(--a-pink);
}
.ct-faq details[open] summary::after { content: "–"; }
.ct-faq summary:hover { color: var(--a-pink); }
.ct-faq p {
  margin: 0;
  padding: 0 0 12px;
  font-size: 13px; line-height: 1.6;
  color: var(--a-ink-2);
}

@media (max-width: 639px) {
  .ct-rail__panel { padding: 20px; }
  .ct-form .input, .ct-form .select { min-height: 48px; }
  .ct-form .btn { width: 100%; justify-content: center; }
}

/* --- Bölüm girişleri ------------------------------------------------------ */
/* Site genelindeki .reveal düzeneği kullanılır; süre/mesafe bu sayfada
   Hizmetler'le aynı: 350ms fade + 10px. */
.js .abt-reveal.reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .35s ease, transform .35s ease;
}
.js .abt-reveal.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .abt-person__photo img,
  .abt-person__photo::before,
  .abt-person__link,
  .abt-person__link span[aria-hidden],
  .tm-portrait img,
  .tm-link, .tm-link__text, .tm-link span[aria-hidden],
  .tm-back span[aria-hidden],
  .tm-project::before,
  .tm-chip,
  .abt-btn span { transition: none; }
  .abt-person:hover .abt-person__photo::before { inset: 8px -8px -8px 8px; }
  .abt-person__link:hover span[aria-hidden],
  .tm-link:hover span[aria-hidden],
  .tm-back:hover span[aria-hidden],
  .abt-btn:hover span { transform: none; }
  /* Çizgi animasyonu kapalı: kayıt çizgileri doğrudan yerinde durur. */
  .js .tm-block.reveal .tm-project::before { transform: scaleX(1); }
}