/* ==========================================================================
   NeoPreklinik — Kurumsal site stil sistemi
   Açık zeminli, bilimsel ve kurumsal kimlik. Derleme adımı yoktur.

   İçindekiler
     01. Tasarım değişkenleri
     02. Sıfırlama ve temel
     03. Tipografi
     04. Yerleşim (container, section, grid)
     05. Butonlar
     06. Kartlar
     07. Başlık ve navigasyon
     08. Hero ve dekoratif katmanlar
     09. İçerik bileşenleri
     10. Formlar
     11. Bildirimler ve rozetler
     12. Alt bilgi
     13. Yardımcı sınıflar ve hareket
   ========================================================================== */

/* ---- 01. Tasarım değişkenleri -------------------------------------------- */
:root {
  /**
   * Marka renkleri NeoPreklinik kurumsal logosundan alınmıştır:
   *   lacivert  #1f2a5c  (kelime logosu)
   *   magenta   #e6007e  (simge ve slogan)
   * Lacivert taşıyıcı renk, magenta ise vurgu rengidir.
   */
  --brand-50:  #eef0f8;
  --brand-100: #dadeef;
  --brand-200: #b6bedd;
  --brand-300: #8894c4;
  --brand-400: #5b69a6;
  --brand-500: #3c4a87;
  --brand-600: #2e3a71;
  --brand-700: #253061;
  --brand-800: #1f2a5c;
  --brand-900: #161d42;

  /* Vurgu — kurumsal magenta */
  --accent-50:  #fdeaf4;
  --accent-100: #fbd2e6;
  --accent-200: #f7a3cb;
  --accent-300: #f166ab;
  --accent-400: #ea2f90;
  --accent-500: #e6007e;
  --accent-600: #c2006a;
  --accent-700: #9c0055;

  /**
   * İkincil vurgu — laboratuvar yeşili (teal).
   *
   * Magenta markanın rengidir ve "buraya bak" der; her yerde kullanıldığında
   * vurgu olmaktan çıkar. Bu ikinci ton yalnızca SÜREÇ anlamı taşıyan
   * yerlerde kullanılır: ana sayfadaki adım çizgisi, hizmet detayındaki
   * süreç adımları ve talep durumu akışı. Böylece renk bir süs değil,
   * "bu bir akış" bilgisi verir.
   *
   * Lacivert ve magenta ile aynı doygunluk ailesinden seçilmiştir; açık
   * zeminde kontrast oranı metin için de yeterlidir.
   */
  --step-50:  #e7f5f2;
  --step-100: #c6e7e0;
  --step-200: #8fd0c5;
  --step-500: #0f8f86;
  --step-600: #0b7a72;

  /* Yüzeyler */
  --paper:      #ffffff;
  /* İkincil zemin: sayfa CSS'lerindeki --*-warm ile AYNI değer. İkisi bir
     zamanlar 1-2 birim ayrışıyordu (#f7f8fc / #f6f8fa); tek sistem olsun
     diye birleştirildi — beyaz ↔ soğuk gri-beyaz ritmi her sayfada aynı. */
  --surface:    #f6f8fa;
  --surface-2:  #eef1f8;
  --surface-3:  #e4e8f3;

  /* Metin */
  --ink:        #171f42;
  --ink-2:      #333d63;
  /**
   * Gövde ve mikro etiket mürekkebi.
   * Önceki tonlar (#4f5876 / #7d859f) beyaz üzerinde sırasıyla 5.9:1 ve
   * 3.8:1 kalıyordu: paragraflar silik okunuyor, 12-14px'lik etiketler AA'yı
   * geçmiyordu. İkisi de birer basamak koyulaştı (7.9:1 ve 5.3:1); sayfanın
   * sakin dili korunur, metin "yerine oturur".
   */
  --body:       #3d4463;
  --muted:      #676f8b;

  /* Çizgiler */
  /* Sayfa CSS'lerindeki --*-line ile aynı soğuk gri. */
  --line:       #e4e8ec;
  --line-strong:#cfd5e5;

  /* Durum renkleri */
  --ok:      #157d56;
  --ok-bg:   #e8f6f0;
  --warn:    #a76a09;
  --warn-bg: #fdf3e2;
  --danger:  #c2185b;
  --danger-bg:#fdeaf1;
  --info:    #2e3a71;
  --info-bg: #eef0f8;

  /* Ölçek */
  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  --shadow-xs: 0 1px 2px rgba(22, 29, 66, .05);
  --shadow-sm: 0 2px 8px rgba(22, 29, 66, .06);
  --shadow:    0 8px 24px -10px rgba(22, 29, 66, .18);
  --shadow-lg: 0 24px 56px -28px rgba(22, 29, 66, .32);

  --container: 1180px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  /* Başlık yazı tipi. Inter'in kalın kesimleri büyük puntoda koyu bir blok
     gibi okunuyordu; Instrument Sans daha açık gözlü ve daha zarif durur.
     Editoryal sayfalar (services.css, editorial.css) zaten bu aileyi
     kullanıyor — böylece tüm site tek başlık diline gelir. */
  --font-display: "Instrument Sans", "Archivo", "Inter", var(--font-sans);
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;

  --ease: cubic-bezier(.22, .61, .36, 1);
  /* Giriş koreografisi için "expo out": hızlı başlar, yumuşak durur. */
  --ease-hero: cubic-bezier(.22, 1, .36, 1);
  --header-h: 76px;
}

/* ---- 02. Sıfırlama ve temel ---------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--body);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
svg { flex-shrink: 0; }

a { color: var(--brand-600); text-decoration-color: color-mix(in srgb, var(--brand-600) 35%, transparent); text-underline-offset: 3px; }
a:hover { color: var(--brand-700); }

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

::selection { background: var(--brand-200); color: var(--brand-900); }

hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }

/* hidden niteligi, display degeri atanmis bilesenlerde (orn. .service-card
   display:flex) tarayici varsayilanini ezer; bu kural onu geri kazandirir. */
[hidden] { display: none !important; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--brand-700); color: #fff; padding: .75rem 1.25rem;
  border-radius: 0 0 var(--radius-sm) 0; font-weight: 600;
}
.skip-link:focus { left: 0; color: #fff; }

/* ---- 03. Tipografi ------------------------------------------------------- */
/**
 * Başlıklar.
 * Önceki ölçüler (650 ağırlık, 3.35rem'e kadar) büyük ekranda koyu bir
 * blok gibi okunuyor ve sayfayı bastırıyordu. Şimdi: daha açık gözlü bir
 * başlık yazı tipi, 600 ağırlık, bir tık küçük punto ve tam siyaha
 * yaklaşmayan mürekkep rengi. Hiyerarşi punto ve boşlukla kurulur.
 */
h1, h2, h3, h4, h5 {
  margin: 0 0 .6em;
  /* Başlıklar artık siyaha yakın mürekkeple değil, kurumsal lacivertle
     yazılır: aynı okunaklılık, gözü yormayan bir ton. */
  color: var(--brand-800);
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.018em;
  text-wrap: balance;
}

h1, .h1 { font-size: clamp(1.85rem, 1.3rem + 2vw, 2.9rem); }
h2, .h2 { font-size: clamp(1.45rem, 1.15rem + 1.15vw, 2.05rem); }
h3, .h3 { font-size: clamp(1.15rem, 1.02rem + .45vw, 1.4rem); }
h4, .h4 { font-size: 1.075rem; letter-spacing: -.012em; }

p { margin: 0 0 1.15rem; }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: clamp(1.05rem, .99rem + .3vw, 1.2rem);
  line-height: 1.7;
  color: var(--ink-2);
}

/**
 * Bölüm etiketi. Bilinçli olarak dekoratif çizgi/ikon TAŞIMAZ: her başlığın
 * önüne küçük bir çizgi koymak sayfaları birbirine benzeten jenerik bir
 * kalıptır. Ayrım yalnızca tipografiyle (mono, uppercase, harf aralığı)
 * kurulur.
 */
/**
 * Bölüm üst etiketi.
 * Önündeki kısa magenta çizgi, sayfa başlığındaki kareyle aynı aileden ama
 * ondan ayrılır: kare sayfayı, çizgi sayfa içindeki bölümü işaretler.
 */
.eyebrow {
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--font-mono);
  font-size: .715rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--accent-600);
  margin: 0 0 .9rem;
}
.eyebrow::before {
  content: ""; flex: none;
  width: 22px; height: 2px;
  background: var(--accent-500);
  transform-origin: left center;
}
/**
 * Bölüm görünür olunca etiket çizgisi soldan sağa çizilir.
 * Tek seferlik, 0,4 saniyelik ve yalnızca 22 piksellik bir hareket: bölümün
 * başladığını sezdirir, okumayı bölmez. Yalnızca .reveal ile işaretlenmiş
 * bölüm başlıklarında çalışır; sayfa açılışındaki etikete dokunmaz.
 */
.js .section-head.reveal .eyebrow::before { transform: scaleX(0); }
.js .section-head.reveal.is-visible .eyebrow::before {
  transform: scaleX(1);
  transition: transform .45s var(--ease) .12s;
}

/**
 * Bölüm başlangıcı — ortak iskelet, dört yerleşim.
 *
 * Amaç her bölümün aynı görünmesi değil: iskelet (etiket → başlık → kısa
 * açıklama) ortaktır, yerleşim bölümün işine göre seçilir.
 *
 *   (varsayılan)  sola yaslı, ölçülü genişlik — anlatı bölümleri
 *   --center      ortalanmış — yalnızca gerçekten simetrik bölümlerde
 *   --between     başlık solda, bağlantı sağda, altta ince çizgi — listeler
 *   --split       başlık solda, açıklama sağda — geniş girişler
 */
.section-head { max-width: 62ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head h2 { margin-bottom: 0; }
.section-head p { color: var(--body); margin: .9rem 0 0; max-width: 62ch; }

.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head--center p { margin-inline: auto; }

.section-head--between {
  max-width: none;
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 1rem 2.5rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--line);
}
.section-head--between > * { max-width: 52ch; }

@media (min-width: 900px) {
  .section-head--split {
    max-width: none;
    display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    gap: clamp(1.75rem, 4vw, 3.5rem);
    align-items: start;
  }
  .section-head--split p { margin-top: .35rem; }
}

/**
 * Metin sütunu içindeki ara başlıklar (hizmet/çalışma detayı, ekip profili).
 * Üstlerindeki kısa çizgi, uzun metinde bölüm geçişini gözle yakalatır;
 * etiket eklemeye gerek kalmaz.
 */
.heading-rule { position: relative; padding-top: 1.15rem; }
.heading-rule::before {
  content: "";
  position: absolute; top: 0; left: 0;
  width: 26px; height: 2px;
  background: var(--accent-500);
}

/* Uzun metin blokları */
.prose { color: var(--body); }
.prose > p { margin-bottom: 1.15rem; }
.prose h3 { margin-top: 2rem; }
.prose strong { color: var(--ink-2); font-weight: 620; }
.prose ul, .prose ol { margin: 0 0 1.15rem; padding-left: 1.25rem; }
.prose li { margin-bottom: .45rem; }

/* ---- 04. Yerleşim -------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: 860px; }
.container--wide   { max-width: 1320px; }

.section { padding-block: clamp(3.25rem, 7vw, 6rem); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section--tint  { background: var(--surface); }
.section--tint-2 { background: var(--surface-2); }

.grid { display: grid; gap: clamp(1rem, 2.2vw, 1.75rem); }
.grid > * { min-width: 0; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
/* auto-fill (auto-fit degil): filtreleme sonucu tek kart kaldiginda auto-fit
   bos sutunlari cokertir ve kart tum genislige yayilarak gorseli devlesir.
   auto-fill sutun genisligini korur, kart normal boyutunda kalir. */
.grid--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

/**
 * Portre kart ızgarası (ekip vb.).
 * Kart sayısı azken kartlar sola yapışıp dengesiz durmasın diye ortalanır;
 * kartlar da aşırı genişlemesin diye üst sınır verilir.
 */
.grid--cards {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 330px));
  justify-content: center;
}

.split {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
  .split--reverse > :first-child { order: 2; }
}

.stack > * + * { margin-top: 1rem; }
.cluster { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

/* ---- 05. Butonlar -------------------------------------------------------- */
.btn {
  --btn-bg: var(--brand-600);
  --btn-fg: #fff;
  --btn-border: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .8rem 1.4rem;
  border: 1px solid var(--btn-border);
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: inherit;
  font-size: .935rem;
  font-weight: 600;
  letter-spacing: -.005em;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease),
              background-color .18s var(--ease), color .18s var(--ease),
              border-color .18s var(--ease);
  box-shadow: var(--shadow-xs);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); color: var(--btn-fg); }
.btn:active { transform: translateY(1px); }

.btn--primary { --btn-bg: var(--accent-600); }
.btn--primary:hover { --btn-bg: var(--accent-700); }

.btn--secondary {
  --btn-bg: var(--paper);
  --btn-fg: var(--brand-700);
  --btn-border: var(--line-strong);
}
.btn--secondary:hover { --btn-bg: var(--brand-50); --btn-border: var(--brand-300); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--brand-700);
  --btn-border: transparent;
  box-shadow: none;
}
.btn--ghost:hover { --btn-bg: var(--brand-50); box-shadow: none; }

.btn--light {
  --btn-bg: rgba(255,255,255,.12);
  --btn-fg: #fff;
  --btn-border: rgba(255,255,255,.34);
  backdrop-filter: blur(6px);
}
.btn--light:hover { --btn-bg: rgba(255,255,255,.2); --btn-border: rgba(255,255,255,.55); }

.btn--on-dark { --btn-bg: #fff; --btn-fg: var(--brand-800); }
.btn--on-dark:hover { --btn-bg: var(--brand-50); --btn-fg: var(--brand-900); }

.btn--sm { padding: .55rem 1rem; font-size: .855rem; }
.btn--lg { padding: .95rem 1.75rem; font-size: 1rem; }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }

.btn__icon { width: 18px; height: 18px; }
.btn--primary .btn__icon, .btn--light .btn__icon, .btn--on-dark .btn__icon { transition: transform .2s var(--ease); }
.btn:hover .btn__icon--arrow { transform: translateX(3px); }

/* Metin bağlantısı — ok işaretli */
.link-arrow {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 600; font-size: .93rem; text-decoration: none;
  color: var(--accent-600);
}
.link-arrow svg { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.link-arrow:hover svg { transform: translateX(3px); }
/* Telefonda 25px'lik bir bağlantı parmakla ıskalanır; hedef 44px'e çıkarılır.
   Metin yerinde kalsın diye yükseklik dolgudan değil min-height'tan gelir. */
@media (max-width: 767px) {
  .link-arrow { min-height: 44px; }
}

/* ---- 06. Kartlar --------------------------------------------------------- */
.card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.35rem, 2.4vw, 1.85rem);
  transition: border-color .22s var(--ease), box-shadow .22s var(--ease),
              transform .22s var(--ease);
}
.card--hover:hover {
  border-color: var(--brand-200);
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}
.card--flat { box-shadow: none; }
.card__title { margin-bottom: .5rem; }
.card__text { font-size: .95rem; margin-bottom: 0; }

/* Hizmet kartı */
/* scroll-margin: hizmetler açılışındaki dizinden gelen çapa, kartı yapışkan
   başlığın altında bırakmasın diye. */
.service-card {
  display: flex; flex-direction: column; height: 100%;
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
}
.service-card__icon {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 13px;
  background: linear-gradient(140deg, var(--accent-50), var(--accent-100));
  color: var(--accent-600);
  border: 1px solid var(--accent-100);
  margin-bottom: 1.1rem;
}
.service-card__icon svg { width: 23px; height: 23px; }
.service-card__cat {
  font-family: var(--font-mono);
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin-bottom: .5rem;
}
.service-card__title { font-size: 1.115rem; margin-bottom: .55rem; letter-spacing: -.015em; }
.service-card__title a { color: inherit; text-decoration: none; }
.service-card__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.service-card__text { font-size: .925rem; color: var(--body); margin-bottom: 1.2rem; }
.service-card__more { margin-top: auto; }
.card--hover:hover .service-card__icon {
  background: linear-gradient(140deg, var(--accent-100), var(--accent-200));
  border-color: var(--accent-200);
}

/* Gerçek görsel varsa hizmet kartı da resimli düzene geçer (bkz. .portfolio-card--media). */
.service-card--media { padding: 0; overflow: hidden; }
.service-card__media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--surface-2); }
/* Telefonda kart tek sütuna düşer; 3/2 oranındaki görsel neredeyse yarım
   ekran kaplar. Daha yatık bir şerit, kartı okunur bir yükseklikte tutar. */
@media (max-width: 719px) {
  .service-card__media { aspect-ratio: 2 / 1; }
}
.service-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s var(--ease);
}
.service-card--media:hover .service-card__media img { transform: scale(1.04); }
.service-card__content {
  display: flex; flex-direction: column; flex: 1;
}
.service-card--media .service-card__content {
  padding: clamp(1.35rem, 2.4vw, 1.85rem);
}
.service-card--media .service-card__more { margin-top: auto; }

/**
 * Not: Ekip profili (/ekip/{slug}) de editoryal tasarım diline geçti
 * (public/assets/css/editorial.css). Eski kart/portre stilleri —
 * .team-card ve türevleri — hiçbir görünümde kullanılmadığı için kaldırıldı.
 */

/* Portfolyo kartı */
.portfolio-card { display: flex; flex-direction: column; height: 100%; position: relative; }

/* Gerçek görsel varsa kart resimli düzene geçer: görsel kenara taşar,
   metin içerik kendi dolgusunu alır. */
.portfolio-card--media { padding: 0; overflow: hidden; }
.portfolio-card__media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--surface-2); }
.portfolio-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s var(--ease);
}
.portfolio-card--media:hover .portfolio-card__media img { transform: scale(1.04); }
.portfolio-card__content {
  padding: clamp(1.35rem, 2.4vw, 1.85rem);
  display: flex; flex-direction: column; flex: 1;
}
.portfolio-card--media .portfolio-card__foot { margin-top: auto; }

/**
 * Portfolyo listesi — editoryal "araştırma sicili".
 * Kart ızgarası DEĞİLDİR: az sayıda ama bilgi yoğun kayıt (dönem, kurum,
 * yöntem) tablo benzeri satırlarda daha hızlı taranır ve hizmetler
 * sayfasındaki görsel kart düzeniyle aynı görünmez.
 */
/* Kayıt listesinin üstündeki tek satırlık künye — katalog fişi tonu. */
.register__meta-line {
  margin: 0 0 1.1rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

/**
 * Çalışma kayıtları — her kayıt KENDİ KUTUSUDUR.
 *
 * Kayıtlar önce yalnızca ince bir çizgiyle ayrılıyordu. Bir kayıt sekiz satıra
 * kadar çıkabildiği (yıl, kurum, bölüm, kategori, başlık, özet, yöntem çipleri,
 * bağlantı) ve kayıt İÇİ boşluklar kayıt ARASI boşluğa yaklaştığı için göz
 * gruplamayı yapamıyordu: nerede bittiği, nerede başladığı okunmuyordu.
 *
 * Çözüm çerçevedir. Kutu, kaydın sınırını tartışmasız çizer; içerideki
 * hiyerarşiyi de serbest bırakır — başlık büyür, künye küçülür, aralarındaki
 * fark artık kutunun içinde okunur.
 */
/**
 * Kutular bir DİZİ oluşturur: solda zaman çizgisi.
 *
 * Çerçeve, kaydın nerede başlayıp bittiğini çözdü ama yeni bir şey kaybettirdi:
 * kayıtlar birbirinden bağımsız kartlar gibi durmaya başladı. Oysa bu bir arşiv
 * ve sırası anlamlı — listenin üstünde zaten "en güncel çalışma en üstte"
 * yazıyor. Sıra duygusunu geri veren şey numaralandırma değildir (numara
 * "birincilik" ima eder, oysa bu bir zaman dizisidir): kartların solundan inen
 * ince bir çizgi ve her kartın hizasında duran bir düğüm.
 *
 * Çizgi ilk düğümde başlar, son düğümde biter — listenin dışına sarkmaz.
 */
.register {
  position: relative;
  list-style: none; margin: 0; padding: 0 0 0 var(--reg-rail, 30px);
  display: grid;
  gap: clamp(.85rem, 2vw, 1.15rem);
}
.register::before {
  content: "";
  position: absolute;
  left: calc(var(--reg-rail, 30px) / 2 - 1px);
  /* Üstte ve altta düğümlerin merkezine kadar iner. */
  top: var(--reg-node-y, 34px);
  bottom: var(--reg-node-y, 34px);
  width: 2px;
  background: var(--line);
}
/**
 * Dolan çizgi — gri rayın üstünde ilerleyen pembe bölüm.
 * Yüksekliği JS'ten gelir (--reg-fill); kaydırma ilerledikçe büyür, böylece
 * arşiv "yukarıdan aşağı okunuyor" hissini verir.
 */
.register::after {
  content: "";
  position: absolute;
  left: calc(var(--reg-rail, 30px) / 2 - 1px);
  top: var(--reg-node-y, 34px);
  width: 2px;
  height: var(--reg-fill, 0px);
  max-height: calc(100% - var(--reg-node-y, 34px) * 2);
  background: var(--accent-500);
  transition: height .15s linear;
}
.register__row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding: clamp(1.15rem, 3vw, 1.75rem);
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
  transition: border-color .22s var(--ease), box-shadow .22s var(--ease);
}
/* Düğüm: kaydın kategorisi hizasında, çizginin üstünde durur. */
.register__row::before {
  content: "";
  position: absolute;
  left: calc(var(--reg-rail, 30px) / -2 - 6px);
  top: calc(var(--reg-node-y, 34px) - 6px);
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--line-strong);
  transition: border-color .22s var(--ease), background-color .22s var(--ease);
}
/**
 * Sırası gelen düğüm yanar (JS, kaydırma konumuna göre .is-passed verir).
 * Böylece dizi fareyle değil, okumayla ilerler — dokunmatik ekranda da çalışır.
 */
.register__row.is-passed::before {
  background: var(--accent-500);
  border-color: var(--accent-500);
}
.register__row:hover {
  border-color: var(--accent-200, var(--line-strong));
  box-shadow: var(--shadow-sm);
}
.register__row:hover::before { border-color: var(--accent-500); }

@media (max-width: 639px) {
  /* Telefonda ray daralır: kart genişliğinden çalınan yer en aza iner. */
  .register { --reg-rail: 22px; --reg-node-y: 28px; }
}

/* Satırlar görünüme girerken 70ms arayla belirir (sayfa yukarıdan aşağı
   "dolar"); sıra numarası şablondan --i ile gelir. */
.js .register__row.reveal { transition-delay: calc(var(--i, 0) * 70ms); }

.register__category {
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent-600); margin: 0 0 .4rem;
}
/**
 * Künye başlığın ALTINDA tek satırdır: yıl · kurum · anabilim dalı.
 * Üç ayrı satır hâlinde ve koyu yazıldığında başlıkla yarışıyordu; artık
 * tek gri şerit hâlinde, başlığa ait bir dipnot gibi durur.
 */
.register__meta {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .45rem;
  margin: 0 0 .7rem;
  font-size: .85rem; line-height: 1.45;
  color: var(--muted);
}
.register__meta-sep { color: var(--line-strong); }
.register__title { font-size: clamp(1.12rem, 1.9vw, 1.32rem); margin-bottom: .35rem; letter-spacing: -.015em; }
.register__title a { color: inherit; text-decoration: none; transition: color .2s var(--ease); }
.register__title a::after { content: ""; position: absolute; inset: 0; }
.register__row:hover .register__title a { color: var(--brand-600); }
.register__summary { color: var(--body); margin-bottom: .9rem; max-width: 68ch; }

.register__methods {
  list-style: none; margin: 0 0 1rem; padding: 0;
  display: flex; flex-wrap: wrap; gap: .4rem;
}
.register__methods li {
  font-size: .78rem; color: var(--ink-2);
  padding: .25rem .65rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
/* Satırın üzerindeyken yöntem çipleri de bir tık öne çıkar. */
.register__row:hover .register__methods li {
  border-color: var(--accent-200);
  background: var(--accent-50);
}
.register__link { font-size: .9rem; }

/**
 * Detay sayfalarındaki destekleyici görsel (hizmet ve portfolyo).
 *
 * Tam genişlik "hero band" DEĞİLDİR: bu fotoğraflar çalışmanın birebir sahne
 * kaydı değil, yöntemi temsil eden laboratuvar görüntüleridir; sayfanın en
 * büyük öğesi olmaları taşıdıkları bilgiyi abartır. İçerik sütununun içinde,
 * metne eşlik eden bir figür olarak durur.
 *
 * max-width kaynak dosyanın gerçek genişliğidir (800px): daha geniş
 * gösterilirse görsel büyütülür ve bulanıklaşır.
 */
.content-figure {
  margin: 0 0 clamp(1.5rem, 3vw, 2rem);
  max-width: 800px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 16 / 9;
  background: var(--surface-2);
}
.content-figure img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Telefonda figür tek sütunda tam genişliğe çıkar; oranı yatıklaştırmak
   görselin metni ekrandan itmesini önler. */
@media (max-width: 719px) { .content-figure { aspect-ratio: 2 / 1; } }

/**
 * Çalışma detayındaki figür — KÜÇÜK (kullanıcı kararı, 02.09.2026).
 *
 * Sol sütun tam genişlikte bir figür taşıyınca (~600px, 16:9'da ~340px yüksek)
 * yan sütundaki kartlardan çok daha uzun oluyor ve iki sütun dengesiz
 * görünüyordu. Figür 420px'e indirilince iki kolonun ağırlığı eşitleniyor;
 * fotoğraf kanıt olarak duruyor ama sayfayı ele geçirmiyor.
 *
 * Dar ekranda (tek sütun) sınır kalkar: orada zaten yan yana bir şey yok.
 */
@media (min-width: 900px) {
  .content-figure--work { max-width: 420px; }
}

.portfolio-card__meta {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  margin-bottom: .85rem;
}
.portfolio-card__title { font-size: 1.1rem; margin-bottom: .6rem; letter-spacing: -.015em; }
.portfolio-card__title a { color: inherit; text-decoration: none; }
.portfolio-card__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.portfolio-card__inst {
  font-size: .875rem; color: var(--ink-2); font-weight: 560;
  display: flex; align-items: flex-start; gap: .45rem; margin-bottom: .35rem;
}
.portfolio-card__inst svg { width: 15px; height: 15px; margin-top: 3px; color: var(--accent-400); }
.portfolio-card__dept { font-size: .84rem; color: var(--muted); margin-bottom: 1rem; padding-left: 1.4rem; }
.portfolio-card__text { font-size: .925rem; margin-bottom: 1.15rem; }
.portfolio-card__foot { margin-top: auto; }

/* Öne çıkan sayı / istatistik */
.stat { text-align: left; }
.stat__value {
  font-size: clamp(1.85rem, 1.4rem + 1.4vw, 2.5rem);
  font-weight: 660; color: var(--brand-700); line-height: 1.05;
  letter-spacing: -.03em; margin-bottom: .3rem;
}
.stat__label { font-size: .88rem; color: var(--muted); }

/* Özellik satırı */
.feature { display: flex; gap: 1rem; align-items: flex-start; }
.feature__icon {
  flex: none; width: 40px; height: 40px; border-radius: 11px;
  display: grid; place-items: center;
  background: var(--brand-50); color: var(--brand-600);
  border: 1px solid var(--brand-100);
}
.feature__icon svg { width: 20px; height: 20px; }
.feature__title { font-size: 1rem; font-weight: 620; color: var(--ink); margin-bottom: .3rem; }
.feature__text { font-size: .91rem; margin: 0; }

/* ---- 07. Başlık ve navigasyon -------------------------------------------- */
/* Üst iletişim bandı (.topbar) kaldırıldı: aynı bilgi her sayfada alt
   bilgide duruyordu (bkz. partials/header.php). */

.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.9);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease);
}
/* 80px kaydırıldıktan sonra başlık zeminden ayrılır: ince gölge + bulanıklık.
   Yukarı dönünce ikisi de kalkar. */
.site-header.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: 0 1px 8px rgba(0, 0, 0, .06);
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: var(--header-h);
}

/* --- Kurumsal logo ------------------------------------------------------- */
/**
 * Logo TEK GÖRSELDİR (bkz. partials/brand.php).
 *
 * Önce üç parçadan kodla kuruluyordu: SVG simge + CSS ayraç + metin olarak
 * yazılmış "NEOPREKLİNİK". O yeniden çizim kurumun gerçek logosunun aynısı
 * değildi; artık asıl dosya basılıyor. Simge/ayraç/metin kuralları bu yüzden
 * kaldırıldı — panelde kullanılan .a-*__mark kuralları etkilenmedi.
 */
.brand { display: inline-flex; align-items: center; text-decoration: none; flex: none; }
.brand__img {
  display: block;
  height: 40px; width: auto;
  /* Kaynak 354×79; oran korunur, yükseklik başlık şeridine göre verilir. */
}

@media (max-width: 400px) {
  .brand__img { height: 33px; }
}

.nav { display: flex; align-items: center; gap: .15rem; }
.nav__link {
  padding: .55rem .8rem;
  border-radius: 999px;
  font-size: .935rem;
  font-weight: 550;
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
  transition: color .18s var(--ease), background-color .18s var(--ease);
}
.nav__link:hover { color: var(--brand-700); background: var(--brand-50); }
.nav__link.is-active { color: var(--brand-700); background: var(--brand-50); font-weight: 620; }

.header-actions { display: flex; align-items: center; gap: .6rem; flex: none; }

/**
 * Dil değiştirici — TR / EN.
 * Açılır kutu değil: iki seçenek için menü açtırmak fazladan bir tıklamadır ve
 * hangi dilde olduğunuz görünmez olur. İki etiket yan yana durur, geçerli dil
 * koyu ve zeminlidir, diğeri sade bağlantıdır. Aralarındaki ince çizgi ikisinin
 * aynı denetimin parçası olduğunu söyler.
 */
.lang-switch {
  display: inline-flex; align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px;
  background: var(--paper);
  flex: none;
}
.lang-switch__item {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; min-height: 30px;
  padding: 0 .55rem;
  border-radius: 999px;
  font-size: .78rem; font-weight: 650; letter-spacing: .04em;
  color: var(--muted);
  text-decoration: none;
  transition: color .2s var(--ease), background-color .2s var(--ease);
}
.lang-switch__item.is-active { background: var(--brand-50); color: var(--brand-700); }
a.lang-switch__item:hover { color: var(--accent-600); text-decoration: none; }

/* Mobil menü içindeki sürüm: tam genişlik, 44px dokunma hedefi. */
.nav__lang { display: none; }
.lang-switch--nav { width: 100%; padding: 3px; }
.lang-switch--nav .lang-switch__item { flex: 1; min-height: 44px; font-size: .95rem; }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: var(--paper); border: 1px solid var(--line-strong);
  border-radius: 12px; cursor: pointer; color: var(--ink);
}
.nav-toggle svg { width: 22px; height: 22px; }
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }

/* KIRILMA NOKTASI 1020 -> 1079.
   1021-1073 arasinda masaustu menusu ciziliyor ama SIGMIYORDU: baslikta
   logo + bes baglanti + dil secici + "Hizmet Talebi" dugmesi 1074px istiyor,
   sonucta SITENIN HER SAYFASI o araliktan 49px yana kayiyordu (iPad yatay,
   kucuk dizustu). Menu artik 1080px'e kadar hamburger kalir. */
@media (max-width: 1079px) {
  .nav, .header-actions .btn { display: none; }
  .nav-toggle { display: inline-flex; }
  /* Dar ekranda başlıktaki dil değiştirici de düşer; menünün içindeki
     tam genişlikli sürüm devralır. */
  .header-actions .lang-switch { display: none; }
  .nav__lang { display: block; margin: .75rem 0 .25rem; }

  /* ÖNEMLİ: backdrop-filter, position:fixed alt öğeler için yeni bir
     kapsayıcı blok oluşturur ve açılır menüyü başlığın içine hapseder.
     Mobilde bu yüzden bulanıklık yerine düz zemin kullanılır. */
  .site-header,
  .site-header.is-stuck {
    background: var(--paper);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /**
   * Tam ekran menü.
   * Bağlantılar 22px'lik dikey bir liste hâlinde, aralarında 1px çizgiyle
   * durur; aktif sayfa pembedir. En altta tam genişlik pembe eylem düğmesi
   * ve doğrudan iletişim satırları vardır. Menü açılırken bağlantılar 60ms
   * arayla belirir.
   */
  .nav {
    position: fixed;
    inset: var(--header-h) 0 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: .5rem var(--gutter) 2.5rem;
    background: var(--paper);
    border-top: 1px solid var(--line);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s var(--ease), transform .22s var(--ease);
  }
  .nav.is-open { display: flex; transform: none; opacity: 1; pointer-events: auto; }

  .nav__link {
    padding: 1.05rem .25rem;
    min-height: 44px;
    display: flex; align-items: center;
    border-radius: 0;
    border-bottom: 1px solid var(--line);
    font-size: 22px; font-weight: 600;
    color: var(--ink);
    background: none;
  }
  .nav__link:hover { background: none; color: var(--accent-600); }
  .nav__link.is-active { background: none; color: var(--accent-600); }

  /* Açılışta kademeli giriş: her bağlantı 60ms sonra. */
  .js .nav.is-open .nav__link,
  .js .nav.is-open .nav__cta,
  .js .nav.is-open .nav__contact {
    animation: np-rise .32s var(--ease-hero) both;
  }
  .js .nav.is-open .nav__link:nth-child(1) { animation-delay: .02s; }
  .js .nav.is-open .nav__link:nth-child(2) { animation-delay: .08s; }
  .js .nav.is-open .nav__link:nth-child(3) { animation-delay: .14s; }
  .js .nav.is-open .nav__link:nth-child(4) { animation-delay: .2s; }
  .js .nav.is-open .nav__link:nth-child(5) { animation-delay: .26s; }
  .js .nav.is-open .nav__cta { animation-delay: .32s; }
  .js .nav.is-open .nav__contact { animation-delay: .38s; }

  .nav__cta { margin-top: 1.5rem; display: flex; flex-direction: column; gap: .65rem; }
  .nav__cta .btn { min-height: 48px; }
  .nav__contact {
    margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line);
    display: grid; gap: .25rem; font-size: .95rem;
  }
  .nav__contact a {
    display: flex; align-items: center; gap: .6rem;
    min-height: 44px;
    text-decoration: none; color: var(--ink-2);
  }
  .nav__contact svg { width: 17px; height: 17px; color: var(--accent-500); }
  body.nav-open { overflow: hidden; }
}
@media (min-width: 1080px) {
  .nav__cta, .nav__contact { display: none; }
}

/* ---- 08. Hero ve dekoratif katmanlar ------------------------------------- */
/* ---------------------------------------------------------------------------
   Hero — hücre kültürü görseli tam genişlikte zemin olarak kullanılır.
   Görsel açık tonda olduğu için üzerine marka renginde kontrollü bir katman
   uygulanır; beyaz metin her ekran boyutunda okunaklı kalır.
   --------------------------------------------------------------------------- */
/**
 * Hero — kurumun sağladığı hücre kültürü fotoğrafı, ÜZERİNE RENK BASILMADAN
 * tam genişlikte zemin olarak kullanılır. Fotoğraf çok açık tonda olduğu için
 * metin lacivert yazılır; okunabilirlik renkli bir katmanla değil, yalnızca
 * metnin arkasındaki çok hafif beyaz yumuşatmayla sağlanır.
 */
/**
 * Açılış — iki kolon: solda ne yaptığımız, sağda laboratuvarın kendisi.
 *
 * ÖNCEKİ KURGU: fotoğraf tam sayfa zemindi ve üstüne beyaz radyal bir
 * yumuşatma biniyordu. Kaynak görsel zaten açık tonda olduğu için ikisi
 * üst üste gelince ne fotoğraf okunuyordu ne de zemin — ekranın üçte biri
 * soluk pembe bir bulanıklığa dönüşüyordu. Metin de ortalanmış olduğu için
 * göz nereye bakacağını bilmiyordu.
 *
 * YENİ KURGU: metin solda, soldan hizalı ve okuma sırasına göre dizili
 * (künye → başlık → tanım → süreç → eylem → kanıt). Fotoğraf sağda, kendi
 * çerçevesinde, tam netliğinde. İki kolon eşit paydadır.
 */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
  background: linear-gradient(180deg, #fbf6f8 0%, #fdfbfc 100%);
  color: var(--ink);
  text-align: left;
}

/**
 * Kapak görseli — metnin ARKASINDA, kendi katmanında.
 *
 * Görsel iki kadrajda hazırlanır: masaüstünde yatay, telefonda dikey
 * (bkz. home.php'deki <picture>). Tek bir yatay kareyi telefonda kırpmak
 * kadrajın merkezini ekran dışında bırakıyordu.
 *
 * Üzerine beyazdan bir perde iner: görsel zaten açık tonda, ama metnin ve
 * sağdaki katalog panelinin altında kontrastı tesadüfe bırakmamak gerekiyor.
 * Perde sol tarafta (metnin durduğu yerde) daha yoğun, sağa doğru açılır —
 * böylece görselin dokusu panelin arkasında görünür kalır.
 */
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media picture { display: block; position: absolute; inset: 0; }
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.hero::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  /**
   * Perde İNCELDİ — arka plandaki hücre dokusu görünsün diye.
   *
   * Kapak tam ekrana çıkınca (100svh) arka plan için çok daha fazla alan
   * oluştu, ama perde eski yoğunluğundaydı (.88 → .12) ve dokuyu neredeyse
   * tamamen yutuyordu: ziyaretçi düz beyaz bir zemin görüyordu.
   *
   * Yoğunluk metnin oturduğu sol tarafta hâlâ en yüksek, sağa doğru tamamen
   * açılıyor. Değerler tahminle değil, ÖLÇÜMLE seçildi: başlık ve tanım
   * cümlesinin kontrastı bu ayarla da AA'nın çok üstünde kalıyor.
   */
  background: linear-gradient(100deg,
    rgba(255,255,255,.72) 0%,
    rgba(255,255,255,.55) 34%,
    rgba(255,255,255,.18) 62%,
    rgba(255,255,255,.02) 100%);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}
@media (min-width: 1024px) {
  /* 5fr metin / 7fr proje: hoca projeyi başrol istiyor. Eşit kolonlarda
     fotoğraf hero alanının yalnızca %14'üydü. */
  /* 5fr metin / 6fr proje. Bir ara 7fr denendi; fotoğraf gereğinden büyük
     durdu ve sol mesaj sıkıştı. Proje hâlâ geniş olan taraf. */
  .hero__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }

  /**
   * İKİ KOLON AYNI TABAN ÇİZGİSİNDE BİTER.
   *
   * Ortalanmış hizada sahne soldaki bloktan uzun olduğu için ikisi ne üstten
   * ne alttan denk geliyordu; geniş ekranda düğmelerin altında sebepsiz bir
   * boşluk kalıyor, kapak "iki ayrı parça" gibi okunuyordu. Alta hizalanınca
   * sol düğme satırı ile sahnedeki eylem satırı aynı çizgiye gelir.
   *
   * Sol kolonun alt dolgusu, sahnenin bilgi şeridindeki alt dolgunun aynısıdır:
   * hizalanan şey kutuların kenarı değil, DÜĞMELERİN tabanıdır.
   */
  /* Kolonlar dikeyde ORTALI: alt hizalama koyu panelli sürümün ihtiyacıydı;
     açık kart havada hafif durur, ortalanınca iki taraf da eşit nefes alır. */
  .hero__grid { align-items: center; }

  /**
   * KAPAK EKRANI DOLDURUR.
   *
   * Kart küçüldükçe hero 507px'e inmiş, sayfanın üstü bir "şerit" gibi
   * kalmıştı; ziyaretçi kapağı değil, altındaki bölümü görüyordu. Telefonda
   * bu kural zaten vardı (100svh), masaüstünde yoktu.
   *
   * svh kullanılır: adres çubuğu gizlenirken yükseklik zıplamaz. İçerik
   * dikeyde ortalanır; içerik uzarsa min-height kendiliğinden aşılır, taşma
   * olmaz.
   */
  .hero {
    min-height: calc(100vh - var(--header-h));
    min-height: calc(100svh - var(--header-h));
    display: flex; align-items: center;
  }
  .hero__inner { width: 100%; }

  /**
   * SOLDAKİ DÜĞME MASAÜSTÜNDE İKİNCİL GÖRÜNÜR.
   *
   * Tek ekranda üç dolu pembe düğme vardı (üst menüdeki "Hizmet Talebi", bu ve
   * sahnedeki "Çalışmayı İncele"). Pembe "asıl eylem" demektir; üçe bölününce
   * hiçbiri asıl olmuyordu. Kapağın yıldızı güncel proje olduğu için dolu
   * pembe sahnede kaldı.
   *
   * DEĞİŞİKLİK YALNIZCA MASAÜSTÜNDE: telefonda üst menü düğmesi hamburgerin
   * içinde, sahnedeki dolu düğme de yok — orada bu düğme kapaktaki TEK dolu
   * düğmedir ve birincil kalmalıdır. Bu yüzden sınıf markup'ta değil, burada
   * değiştirilir.
   */
  /* ÇERÇEVELİ DEĞİL, DOLU LACİVERT: ikincil görünüme düşürüldüğünde yanındaki
     "İletişime Geç" ile birebir ikiz oluyordu — yan yana iki eş düğme
     "hangisi asıl?" sorusunu doğuruyordu. Lacivert dolgu ağırlığı geri verir,
     pembeyle de yarışmaz. */
  .hero__actions .btn--primary {
    --btn-bg: var(--brand-800);
    --btn-fg: #fff;
    --btn-border: var(--brand-800);
  }
  .hero__actions .btn--primary:hover {
    --btn-bg: var(--brand-900);
    --btn-border: var(--brand-900);
  }
  /* Başlığın masaüstü puntosu BURADA DEĞİL: taban `.hero__title` kuralı bu
     medya sorgusundan SONRA geldiği ve özgüllüğü eşit olduğu için buraya
     yazılan font-size hiçbir zaman uygulanmıyordu. Kural taban bloğun
     ardına taşındı — aşağıya bakınız. */
}

/* Fotoğraf artık zemin değil, sağ kolondaki çerçeveli karttır: Ken Burns
   yakınlaştırması ve alttaki beyaza geçiş kuralları bu yüzden kaldırıldı. */

.hero__inner { position: relative; z-index: 2; width: 100%; }
.hero__content { position: relative; max-width: 34rem; }

/**
 * a) Konum künyesi — sitenin imza mikro satırı: 8px pembe kare + 11px
 * harf aralıklı büyük harf. Ortalanmış düzende kare metnin solunda durur.
 */
.hero__kicker {
  /**
   * SOLA DAYALI.
   *
   * Burada `justify-content: center` duruyordu — kapağın ortalanmış eski
   * sürümünden kalma. Kapak artık sola dayalı olduğu için künye satırı,
   * altındaki başlıktan ~125px içeriden başlıyordu: sol kolonun ilk satırı
   * hiçbir şeyle hizalanmıyor, blok dağınık görünüyordu.
   */
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start;
  gap: .35rem .75rem;
  margin: 0 0 18px;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: #16181D;
}
.hero__kicker::before {
  content: ""; flex: none;
  width: 8px; height: 8px;
  background: var(--accent-500);
}
.hero__kicker span + span { border-left: 1px solid rgba(22,24,29,.25); padding-left: .75rem; }

/* b) Marka damgası — ince, gergin, bağırmayan bir künye. */
.hero__stamp {
  margin: 0 0 12px;
  font-size: 23px; font-weight: 700;
  letter-spacing: .35em; text-transform: uppercase;
  color: #16181D;
}

/* c) Asıl başlık.
   Punto ve ağırlık bilinçli olarak düşük tutulur: fotoğrafın üzerinde
   kocaman siyah bir blok değil, okunur bir cümle olarak durur. Mürekkep
   tam siyah değil, kurumsal lacivert. */
/**
 * DİKEY RİTİM — eşit aralıklar yerine GRUPLAMA.
 *
 * Aralıklar 20 / 20 / 26 idi; üçü de birbirine yakın olunca dört öğe tek
 * bir yığın gibi okunuyor, göz nereye bakacağını bilmiyordu. Yeni ölçüler
 * öğeleri anlamlarına göre kümeler:
 *   künye →(18)→ başlık   : etiket ve başlık tek bir birim
 *   başlık →(24)→ tanım    : nefes
 *   tanım  →(34)→ düğmeler : eylem satırı belirgin biçimde ayrılır
 */
.hero__title {
  margin: 0 0 24px;
  color: var(--brand-800);
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 1.2rem + 1.7vw, 2.7rem);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.16;
  /**
   * Satır kırılımı: "Araştırmanızı laboratuvardan" / "yayına taşıyoruz."
   *
   * 22ch'te başlık üç satıra bölünüyor ve ilk iki satır tek kelimeye
   * düşüyordu ("Araştırmanızı" / "laboratuvardan"); cümle parça parça
   * okunuyordu. Ölçü ilk yarının sığacağı genişliğe açılır — punto ile
   * birlikte ölçeklendiği için kırılım her kırılımda aynı yerde kalır.
   */
  max-width: 20ch;
  /* Metin artık fotoğrafın üstünde değil, açık zeminin üzerinde: okunurluk
     için halo gerekmiyor. */
}

/**
 * BAŞLIĞIN MASAÜSTÜ PUNTOSU — taban kuraldan SONRA yazılmak zorunda.
 *
 * Bu kural yukarıdaki `min-width: 1024px` bloğunun içindeydi ve o blok taban
 * `.hero__title` kuralından ÖNCE geldiği için hiç uygulanmıyordu: başlık
 * masaüstünde de taban ölçüsünde (1440px'te ~43px) kalıyordu. Yani "başlık
 * kapağın en belirgin öğesi" kararı yazılmış ama yürürlüğe girmemişti.
 *
 * Ölçü büyütüldü: başlık başrol olsun ve sol kolon (340px) sağdaki kartın
 * (590px) boyuna yaklaşsın — ikisi de dikeyde ortalı olduğundan aradaki fark
 * sol tarafı kartın ortasında yüzüyormuş gibi gösteriyordu.
 *
 * Ölçü ÖLÇÜLEREK seçildi, 1440 ve 1280px'te satır sayısı sayıldı:
 *     43px → 3 satır, sol blok 353, kartla fark 237
 *     50px → 4 satır, sol blok 435, kartla fark 155   ← seçilen
 *     53px → 5 satır, sol blok 509, kartla fark  81
 * 53px dengeyi en çok düzeltiyor ama başlığı beş satırlık bir metin duvarına
 * çeviriyor; başrol olması onu paragrafa dönüştürmek demek değil. 50px hem
 * puntoyu belirgin biçimde büyütür hem dört satırda kalır.
 */
@media (min-width: 1024px) {
  .hero__title { font-size: clamp(2.2rem, 3.47vw, 3.15rem); }
}

/**
 * BAŞLIK ALTINDAKİ KISA ÇİZGİ KALDIRILDI.
 *
 * Başlıkta iki pembe vurgu üst üste biniyordu: "çözüm ortağınız" altındaki
 * imza fırça çizgisi ve bloğun altındaki bu ayrı çizgi. İmza bir kere atılır;
 * fırça kalır, çizgi gider. Kural, eski markup'ı olan sayfalar için değil,
 * yalnızca kapak için geçerliydi — bu yüzden tamamen çıkarıldı.
 */

/**
 * İMZA ŞERİDİ — "Araştır / Öğren / Keşfet / Sonuçlandır" (02.09.2026).
 *
 * Kurumun logo kilitlenmesindeki sloganı. Paragrafın ALTINDA, düğmelerin
 * ÜSTÜNDE durur (markup gerekçesi home.php'de): başlıkla paragrafın arasına
 * konduğunda sayfanın en küçük öğesi en kalabalık yere sıkışıyor ve sönük
 * kalıyordu. Burada kendi beati var; üstündeki paragrafın 34px'lik alt
 * boşluğu -4px ile 30px'e iner, altına düğmelerden önce 30px kalır.
 *
 * NEDEN MONO DEĞİL: Kapağın künye satırı (.hero__kicker) zaten mono, büyük
 * harf ve geniş harf aralıklı. Slogan da öyle olsaydı kapakta birbirinin
 * aynı iki küçük şerit olurdu. Slogan başlığın yazı ailesinde (display) ve
 * cümle düzeninde dizilir: künye "nerede", slogan "nasıl çalışırız" der.
 *
 * BİÇİM: her kelime, önünde pembe dolgulu bir ikon çipi taşır. İki şey
 * BİLEREK yok:
 *   - OK: dört kelimeyi süreç şemasına çevirirdi. Aşağıdaki Bilim Yolculuğu
 *     bölümü gerçekten süreçtir (beş adım, 52px daireler, bağlantı çizgisi);
 *     buraya ok koymak ikisini aynı şeye çevirir ve sloganın bir kez
 *     kapaktan çıkarılma sebebini geri getirirdi.
 *   - AYRAÇ ÇİZGİSİ: dar ekranda şerit sarınca ikinci satır ayraçla başlıyor
 *     ve bozuk görünüyordu. Ayırma işini boşluk (gap) yapar; sarma her
 *     genişlikte temiz.
 *
 * ÇİPİN DOLGUSU — ikinci düzeltme. Önce yarı saydam BEYAZ zemin + accent-100
 * çeper denendi; kapağın pembe suluboya fonu zaten beyaza yakın olduğu için
 * çip ile fon arasında neredeyse fark kalmıyordu ve şerit "aşırı sönük"
 * görünüyordu (ondan önceki deneme, düz accent-50 dolgu, büsbütün
 * görünmüyordu). Çözüm çeper eklemek değil, DOLGUYU KOYULAŞTIRMAK: accent-100
 * dolgu + accent-700 ikon. İkisi arasında yüksek karşıtlık var, çip fondan
 * net ayrılıyor ve pembe yine de fırça imzasından hafif kalıyor.
 */
/**
 * ÜÇÜNCÜ BİÇİM — TEK PARÇA BUZLU CAM ŞERİT.
 *
 * Önceki iki deneme de "sönük / olmamış" bulundu ve ikisinin de ortak kusuru
 * renk değil YAPIydı: dört ikon+kelime çifti kapağın fonunda serbest
 * duruyordu. Onları bir arada tutan hiçbir şey yoktu; göz dört ayrı küçük
 * etiket görüyor, "tasarlanmış bir öğe" görmüyordu. Dolguyu koyulaştırmak
 * (accent-100 çip) okunurluğu düzeltti ama yüzme sorununu çözmedi.
 *
 * Bu sürümde dördü TEK NESNE: hafif buzlu beyaz bir şerit, içinde ince dikey
 * ayraçlarla bölünmüş dört bölme. Kazançları:
 *   - Şerit artık kendi kabı olan bir öğe, kapağın üstüne serpilmiş etiketler
 *     değil.
 *   - İkonlar ve yazı BEYAZ zeminde duruyor; kapağın pembe suluboya fonunun
 *     üstünde okunurluk fotoğrafın şansına kalmıyor. Çipe gerek kalmadı,
 *     ikonlar doğrudan pembe çiziliyor — dört pembe kutu da gitti.
 *   - Şeridi fondan ayıran şey ton farkı değil GÖLGE: beyaz zemin, beyaza
 *     yakın bir fonun üstünde tek başına kaybolur; alttaki yumuşak gölge onu
 *     yüzeyden kaldırıyor. Önceki sürümlerin "sönük" görünme sebebi tam da
 *     buydu ve renk oynayarak çözülemiyordu.
 *
 * Kap `inline-flex`: şerit sol kolonun tamamını kaplamaz, yalnızca içeriği
 * kadar yer tutar. Tam genişlik verilseydi sağ ucunda kocaman bir boşluk
 * kalırdı.
 */
.hero__tagline {
  display: inline-flex; flex-wrap: wrap; align-items: stretch;
  margin: -2px 0 30px;
  padding: 3px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .82);
  border: 1px solid var(--accent-100);
  box-shadow: 0 14px 30px -22px rgba(31, 42, 92, .55);
  font-family: var(--font-display);
  font-size: 14.5px; font-weight: 650;
  letter-spacing: .008em;
  line-height: 1.3;
  color: var(--brand-800);
}
.hero__tagline-word {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: 7px 14px;
  white-space: nowrap;
}
/* Ayraç: bölmeler arası ince çizgi. Masaüstünde şerit tek satır olduğu için
   sarma sorunu yok; telefonda ızgaraya geçerken kaldırılıyor (aşağıda). */
.hero__tagline-word + .hero__tagline-word { border-left: 1px solid var(--line); }
/**
 * İkon: 17px, çipsiz, doğrudan pembe.
 *
 * Bir ara 13px'ti; 3x büyütülmüş ekran görüntüsünde çizgiler birbirine girip
 * hangi ikon olduğu seçilmiyordu. Bu set 15px'ten itibaren okunuyor. Beyaz
 * şerit zemininde 17px rahat okunur ve arkasına kutu gerekmez.
 */
.hero__tagline-icon {
  flex: none;
  width: 17px; height: 17px;
  color: var(--accent-600);
}
/* İkonlar çizilemiyorsa (slogan panelden değiştirilip kelime sayısı değişmişse)
   bölmeler kalır, yalnızca ikonlar düşer — şerit yine tek parça durur. */

/**
 * GİRİŞ: kelime kelime DEĞİL, TEK BLOK.
 *
 * Kelimeler bir sürümde tek tek (:nth-child gecikmeleriyle) beliriyordu.
 * Şerit artık kendi kabı olan tek bir nesne; kap sabit dururken içindeki
 * kelimelerin sırayla düşmesi, nesnenin kendisi değil içeriği yükleniyormuş
 * izlenimi veriyordu. Şerit kapağın geri kalanı gibi .reveal ile blok hâlinde
 * gelir (markup'ta reveal--d3): künye 0 → başlık .1s → paragraf .2s →
 * ŞERİT .3s → düğmeler .4s.
 */

/* Tanım cümlesi: ne yaptığımızı bir cümlede söyler. */
.hero__lede {
  margin: 0 0 34px;
  max-width: 46ch;
  font-size: 17px; line-height: 1.68;
  color: var(--body);
}

/**
 * İMZA VURGUSU — başlıktaki kelimenin altındaki el çizimi pembe çizgi.
 *
 * Sayfanın en karakteristik hareketi; Yayınlar sayfasının başlığı da bunu
 * kullanır. Bir ara süreç ikonlarının CSS'i sökülürken bu kural da yanlışlıkla
 * silinmiş, iki sayfada birden çizilmez olmuştu.
 */
.hero__mark { position: relative; white-space: nowrap; }
.hero__mark::after {
  content: "";
  position: absolute; left: -.04em; right: -.04em; bottom: -.08em;
  height: 4px;
  background: var(--accent-500);
  border-radius: 2px;
  transform: rotate(-.6deg);
  opacity: .9;
}
@keyframes np-draw-line {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
.js .hero__mark::after { animation: np-draw-line .6s var(--ease-hero) .5s both; }

.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/**
 * Aşağı kaydırma işareti — varsayılan olarak GİZLİ.
 *
 * Yalnızca telefonda görünür (aşağıdaki medya sorgusu açar). Masaüstünde
 * kapak ekranı doldurmuyor, altındaki bölüm zaten görünüyor; orada ipucuna
 * gerek yok.
 *
 * Gizleme kuralı medya sorgusundan ÖNCE durmalıdır: CSS'te eşit ağırlıklı
 * iki kuraldan sonra yazılan kazanır, sonraya koyulsaydı telefonda da
 * gizlerdi.
 */
.hero__scroll { display: none; }

/**
 * "Güncel çalışma" satırı — VARSAYILAN OLARAK GİZLİ.
 *
 * Masaüstünde bu bilgi kapağın sağ kolonundaki büyük kartta durur; aynı şeyi
 * iki kez göstermemek için burada gizli, yalnızca telefonda açılır.
 * Gizleme kuralı medya sorgusundan ÖNCE durur — sonraya koyulsaydı eşit
 * ağırlık nedeniyle telefonda da gizlerdi.
 */
.ministage { display: none; }

/**
 * Mobil kapak.
 *
 * İki kolon tek sütuna iner: önce metin, sonra fotoğraf.
 *
 * NOT: Buradaki eski açıklama "sabit bir ekran yüksekliği DAYATILMAZ"
 * diyordu. Bu artık geçerli değil — kapak telefonda ilk ekranı tam
 * dolduruyor (bkz. yukarıdaki 100svh kuralı). O kararın gerekçesi
 * "yazıları küçültmemek"ti; yükseklik dayatmak yazı boyutuna dokunmadan
 * da mümkün olduğu için gerekçe düşmüş oldu.
 */
@media (max-width: 639px) {
  .hero { padding-block: 1.75rem 2.25rem; }
  .hero__kicker { margin-bottom: 14px; }
  .hero__title { font-size: clamp(27px, 7.6vw, 34px); max-width: none; }
  /**
   * Telefonda şerit 2×2 IZGARA olur.
   *
   * Serbest sarmaya bırakılınca üç kelime birinci, "Sonuçlandır" tek başına
   * ikinci satıra düşüyordu — öksüz satır, şeridi imza değil artık gibi
   * gösteriyordu. İki eşit sütun dördünü dengeli iki satıra oturtur.
   *
   * Şerit kabı (buzlu cam zemin, çeper, gölge) telefonda da DURUR: tek parça
   * olması masaüstüne özel bir süs değil, tasarımın kendisi.
   */
  .hero__tagline {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    font-size: 14px; margin: -2px 0 22px;
    padding: 2px;
    border-radius: 12px;
  }
  .hero__tagline-word { padding: 8px 10px; }
  /* Izgarada ayraç ÇİFT SÜTUNA göre kurulur: soldaki bölmelerde sol çizgi
     olmaz, alttaki iki bölme üstten ince çizgiyle ayrılır. `+` seçicisi
     ızgarada satır başına da çizgi koyuyordu. */
  .hero__tagline-word + .hero__tagline-word { border-left: 0; }
  .hero__tagline-word:nth-child(2n) { border-left: 1px solid var(--line); }
  .hero__tagline-word:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .hero__tagline-icon { width: 16px; height: 16px; }
  .hero__lede { font-size: 15.5px; margin-bottom: 22px; }

  /**
   * İki düğme YAN YANA.
   * Alt alta ve tam genişlikte iki hap, telefonda kapağın üçte birini
   * kaplıyordu. Eşit iki sütuna girerler; punto ve yatay dolgu bir tık kısılır
   * ki iki etiket de tek satırda kalsın.
   */
  .hero__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 0;
  }
  .hero__actions .btn {
    width: 100%;
    min-height: 46px;
    padding-inline: .55rem;
    font-size: 14px;
    justify-content: center;
    text-align: center;
  }

  /**
   * TELEFONDA KAPAK İLK EKRANI TAM DOLDURUR.
   *
   * Kapağın yüksekliği içeriği kadardı (~500px). Telefon ekranı 844px
   * olduğu için sayfa açılır açılmaz altındaki "Çalışma ortamımız" bölümü
   * de görünüyordu: ölçüldüğünde 390×844'te 267px, 430×932'de 370px alt
   * bölüm ilk ekranda kalıyordu. Sonuç, kapağın yarım kalmış gibi
   * durmasıydı — ziyaretçi daha ilk saniyede iki bölümü birden görüyor,
   * hiçbirine tam bakamıyordu.
   *
   * `svh` (small viewport height) bilinçli seçildi: `vh` telefonda adres
   * çubuğu GİZLİYKEN ölçülen en büyük yüksekliktir, onunla kapak ekrandan
   * taşar ve düğmeler alta kaçar. `svh` adres çubuğu görünürken geçerli
   * olan yüksekliktir — kapak açılışta tam oturur, kaydırınca da bir şey
   * kırpılmaz. Eski tarayıcılar için önce `vh` yazılır.
   */
  .hero {
    min-height: calc(100vh - var(--header-h));
    min-height: calc(100svh - var(--header-h));
    display: flex;
    align-items: stretch;
  }

  /**
   * İÇERİK YÜKSEKLİĞE DAĞILIR.
   *
   * Kapak ekranı doldurunca içerik ortada bir küme hâlinde kalıyor, üstte
   * ve altta yüzlerce piksel boşluk oluşuyordu. Satırlar artık aralarındaki
   * boşluğu paylaşıyor (`space-between`).
   *
   * `max-height` bilerek var: sınırsız bırakılsaydı uzun telefonlarda
   * satırlar birbirinden kopar, tanım cümlesi ile adımlar arasında 90px'lik
   * boşluklar açılırdı. Blok en fazla bu kadar yayılır, artan yer üstte ve
   * altta eşit paylaşılır (`margin-block: auto`).
   *
   * Zincirin tamamı esnetilir; aksi hâlde ızgara kendi içeriği kadar
   * yüksek kalır ve dağıtacak boşluk hiç oluşmaz.
   */
  .hero__inner { width: 100%; display: flex; }
  .hero__grid { flex: 1; align-items: stretch; }
  .hero__content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /**
     * KESİN yükseklik şart: `max-height` yazıldığında kutu yine içeriği
     * kadar kalıyor, `space-between`in paylaştıracağı boşluk hiç oluşmuyor
     * ve satırlar birbirine yapışık duruyordu. `min(34rem, 100%)` kutuyu
     * kapağın boyuna kadar açar ama 34rem'i geçmesine izin vermez —
     * uzun telefonlarda satırlar birbirinden kopmaz.
     */
    height: min(34rem, 100%);
    /* Emniyet: içerik kutudan uzunsa (İngilizce başlık daha uzun, ya da
       kullanıcı yazı boyutunu büyütmüşse) satırlar sıkıştırılmaz, kutu
       büyür. Bu olmadan flex öğeleri ezilir ve yazılar üst üste biner. */
    min-height: min-content;
    margin-block: auto;
  }
  /* Dağıtımı flex yapsın diye kendi alt boşlukları kalkar. */
  .hero__kicker,
  .hero__lede { margin-bottom: 0; }

  /**
   * Telefonda da TEK pembe vurgu.
   *
   * Burada bir dönem başlığın altına ayrı bir çizgi çiziliyordu; "çözüm
   * ortağınız" altındaki imza fırça çizgisiyle birlikte iki vurgu üst üste
   * biniyordu. İmza bir kere atılır — fırça kalır, çizgi gider.
   */

  /* Aşağı kaydırma işareti: kapağın alt ortasında, hafifçe iner kalkar. */
  .hero__scroll {
    display: block;
    position: absolute; z-index: 2;
    left: 50%; bottom: 12px;
    width: 26px; height: 26px;
    color: var(--accent-500);
    opacity: .75;
    animation: heroScroll 2s ease-in-out infinite;
  }
  .hero__scroll svg { width: 100%; height: 100%; display: block; }
}

@keyframes heroScroll {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 7px); }
}
/* Hareketi azaltılmış tercihi: işaret durur, kaybolmaz. */
@media (prefers-reduced-motion: reduce) {
  .hero__scroll { animation: none; }
}

@media (max-width: 900px) {

  /**
   * Telefonda perde DİKEY ve açık.
   *
   * Yatay degrade dikey kadrajda anlamsızdı. İlk düzeltmede perde %86'dan
   * başlıyordu; görsel kapağın üst yarısında neredeyse tamamen siliniyor,
   * kapak "yarısı boş, alt yarısı fotoğraflı" gibi görünüyordu — sanki
   * görsel alanı kaplamıyormuş gibi. Oysa görsel kutusu kapağın tamamıyla
   * birebir aynı (ölçüldü: 390×500 / 390×500); sorun perdenin yoğunluğuydu.
   *
   * Değerler ölçerek seçildi. Perde %58/%42/%16'ya indirildiğinde metin
   * kontrastı neredeyse hiç değişmiyor (başlık 13,0 · açıklama 7,7 · adım
   * etiketleri 15,4 — eşikler 3,0 ve 4,5), çünkü görselin kendisi soluk
   * pembe. Kazanç ise gözle görülür: arka planın belirginliği %16 artıyor.
   */
  .hero::after {
    background: linear-gradient(180deg,
      rgba(255,255,255,.58) 0%,
      rgba(255,255,255,.42) 45%,
      rgba(255,255,255,.16) 100%);
  }

  /**
   * Kadraj aşağı kaydırılır.
   *
   * Dikey görselin üst üçte biri boş pembe zemindir. `object-position` ortada
   * kalınca o boşluk tam başlığın arkasına düşüyor ve küreler ekranın
   * ortasında birden başlıyordu — okuyan kişiye sert bir çizgi gibi görünen
   * şey buydu. Kadraj %72'ye çekilince kürelerin dokusu kapağın tamamına
   * yayılır.
   */
  .hero__media img { object-position: 50% 72%; }
}

/**
 * Künye paneli TELEFONDA GÖSTERİLMEZ.
 *
 * İki kolon tek sütuna indiğinde panel metnin altına iniyor ve kapağı ikinci
 * bir bilgi bloğuyla uzatıyordu; üstelik "Konum" satırı alt bilgideki adresle,
 * "Süreç" satırı da aşağıdaki süreç bölümüyle aynı şeyi söylüyordu. Telefonda
 * kapak tek iş yapar: ne yaptığımızı söyler ve iki eylem sunar.
 */
/**
 * VİTRİN TABLETTE DE DURUR, TELEFONDA DURMAZ.
 *
 * Kart 1024px altında büsbütün kapanıyordu. Tablette (640–1023px) kartın
 * duracak yeri var: tek sütuna inen kapakta hero metninin altına iner,
 * ortalanır ve genişliği 560px ile sınırlanır.
 *
 * TELEFONDA (<640px) kart yerine tek satırlık kayıt açılır. Sebep ölçülmüş
 * bir kısıt: kapak telefonda TEK EKRANA sığmak zorunda (başlık + tanım +
 * dört adım + iki düğme zaten ~600px). Buraya ~460px'lik bir kart eklemek
 * kapağı 1,7 ekrana çıkarır, alttaki bölüm sızar ve aşağı kaydırma işareti
 * ekran dışında kalır.
 *
 * İki kural AYNI sınırı paylaşmak zorundadır: kart nerede kapanıyorsa satır
 * orada açılmalı. Bir dönem biri 1023'te diğeri 639'da duruyordu ve arada
 * kalan tabletlerde güncel çalışma ana sayfadan büsbütün kaybolmuştu.
 *
 * Satırın hafif beyaz zemini onu arka plandaki fotoğraftan ayırır; yoksa
 * yazılar desenin üstünde kayboluyordu.
 */
@media (max-width: 639px) {
  .hero__visual { display: none; }

  /* MİNİ SAHNE — telefonda güncel proje.
     Önceki tek satırlık kayıt (küçük kare + ad + ok) projeyi tanıtmıyordu,
     yalnızca anıyordu. Bu, masaüstündeki sahnenin küçültülmüş aynısı:
     fotoğraf + karartma şeridi + başlık + eylem. */
  .ministage {
    position: relative;
    display: block;
    margin-top: .4rem;
    border-radius: 14px;
    overflow: hidden;
    background: var(--surface-2);
    -webkit-tap-highlight-color: transparent;
  }
  .ministage__media { display: block; aspect-ratio: 16 / 9; min-height: 10rem; }
  .ministage__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .ministage__media--plain {
    position: relative;
    display: grid; place-items: center;
    color: var(--accent-400);
  }
  .ministage__media--plain svg { width: 34px; height: 34px; position: relative; }
  .ministage__badge {
    position: absolute; top: .6rem; left: .6rem;
    padding: .3rem .55rem;
    border-radius: 999px;
    background: var(--accent-600);
    font-family: var(--font-mono); font-size: 9px; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
    color: #fff;
    white-space: nowrap;
  }
  .ministage__info {
    position: absolute; inset: auto 0 0 0;
    display: flex; flex-direction: column; gap: .35rem;
    padding: 1.6rem .85rem .75rem;
    background: linear-gradient(0deg, rgba(16, 21, 47, .94) 0%, rgba(16, 21, 47, .82) 58%, rgba(16, 21, 47, .35) 88%, transparent 100%);
  }
  .ministage__title {
    display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 1.02rem; font-weight: 650; line-height: 1.35;
    letter-spacing: -.012em;
    color: #fff;
  }
  .ministage__go {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .82rem; font-weight: 650;
    color: #fff;
  }
  .ministage__go svg { width: 14px; height: 14px; color: var(--accent-300); }
}

/* Not: burada bir zamanlar ikinci bir .hero__visual/.hero__figure tanımı
   vardı (turkuaz-yeşil duotone katmanlı, rozetli eski kapak tasarımından
   kalma). Yeni tanımların ARDINDAN geldiği için onları eziyor, fotoğrafı
   marka paletinin dışında bir renge boyuyordu. Kaldırıldı. */

/* Molekül deseni — çok hafif, arka planda */
.pattern-molecule {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: .5;
  background-image:
    radial-gradient(circle at 1px 1px, var(--brand-200) 1px, transparent 0);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(700px 380px at 78% 12%, #000 0%, transparent 72%);
  mask-image: radial-gradient(700px 380px at 78% 12%, #000 0%, transparent 72%);
}
/* Koyu hero zemininde desen açık renkte olmalı. */
.hero .pattern-molecule {
  z-index: -1;
  opacity: .35;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.55) 1px, transparent 0);
  -webkit-mask-image: radial-gradient(760px 420px at 82% 18%, #000 0%, transparent 74%);
  mask-image: radial-gradient(760px 420px at 82% 18%, #000 0%, transparent 74%);
}

/**
 * "Nasıl destek oluyoruz?" — 3 sade alan.
 * Kasıtlı olarak hafif: gölge yok, gradyan ikon kutusu yok. Yalnızca ince
 * bir üst çizgi ve bol boşlukla ayrılan üç sütun.
 */
.support-grid {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 1fr);
}
/* Üç kolon yalnızca masaüstünde: tablette sütunlar sıkışıp metni kırıyordu.
   Ara "1+2" düzeni yerine doğrudan tek kolonlu listeye geçilir. */
@media (min-width: 1024px) { .support-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.support-tile { position: relative; text-align: center; padding-top: 1.5rem; }
/* Üst çizgi kenarlık değil, çizilebilen bir öğedir: bölüm görünüme girince
   soldan sağa açılır (scaleX; düzen hesaplaması tetiklenmez). */
.support-tile::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--accent-400);
  transform-origin: left;
}
.js .support-tile.reveal::before { transform: scaleX(0); transition: transform .5s var(--ease-hero); }
.js .support-tile.reveal.is-visible::before { transform: scaleX(1); }

.support-tile__icon {
  width: 44px; height: 44px; margin: 0 auto 1rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--accent-50);
  color: var(--accent-600);
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.support-tile__icon svg { width: 21px; height: 21px; }
.support-tile__title { font-size: 1.05rem; margin-bottom: .5rem; transition: color .25s var(--ease); }
.support-tile__text { font-size: .95rem; line-height: 1.6; color: var(--body); margin: 0; max-width: 32ch; margin-inline: auto; }

/* Hover: renk değişir ve ikon çok hafifçe büyür (gölge, kart yükselmesi yok). */
.support-tile__icon { transition: background-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease); }
.support-tile:hover .support-tile__icon { background: var(--accent-500); color: #fff; transform: scale(1.08); }
.support-tile:hover .support-tile__title { color: var(--accent-600); }
/* Üç alan sırayla belirir. */
.js .support-tile.reveal:nth-child(2) { transition-delay: .08s; }
.js .support-tile.reveal:nth-child(3) { transition-delay: .16s; }
.js .support-tile.reveal:nth-child(2)::before { transition-delay: .08s; }
.js .support-tile.reveal:nth-child(3)::before { transition-delay: .16s; }

/**
 * Dar ekran: ortalanmış dikey yığın yerine sola hizalı liste satırı.
 * İkon solda 48px, başlık ve açıklama sağında; kurumsal bir liste gibi
 * okunur ve dikeyde yer kazandırır.
 */
@media (max-width: 1023px) {
  .support-grid { gap: 40px; }
  .support-tile {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: 16px; row-gap: 4px;
    text-align: left;
    padding-top: 1.15rem;
  }
  .support-tile__icon {
    width: 48px; height: 48px; margin: 0;
    grid-row: 1 / span 2;
  }
  .support-tile__title { margin-bottom: 0; align-self: center; }
  .support-tile__text { max-width: none; margin-inline: 0; }
}

/**
 * Bilim Yolculuğu — grafiksel süreç.
 * Masaüstünde yatay, noktalı bağlantı çizgisiyle; mobilde dikey.
 * Yalnızca ikon + iki kısa etiket; paragraf yok.
 */
.journey {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2.25rem;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  max-width: 760px;
}
@media (min-width: 860px) {
  .journey { flex-direction: row; align-items: flex-start; gap: 0; max-width: none; }
}

.journey__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  text-align: left;
}
@media (min-width: 860px) {
  .journey__item { flex: 1; flex-direction: column; align-items: center; text-align: center; gap: .6rem; }
}

/**
 * Süreç bileşeni.
 * Renk kararı: adımlar nötr gride başlar, koreografi ilerledikçe marka
 * pembesine döner. Sitede teal/yeşil bir vurgu rengi yok; bu bileşende de
 * kullanılmaz.
 */
.journey__icon {
  position: relative;
  z-index: 2;
  flex: none;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--paper);
  border: 1.5px solid var(--line-strong);
  color: #5a5e66;
  transition: border-color .25s var(--ease), background-color .25s var(--ease),
              color .25s var(--ease);
}
.journey__icon svg { width: 22px; height: 22px; }
.journey__label { font-weight: 650; color: var(--ink); font-size: .95rem; transition: color .25s var(--ease); }
.journey__sub { display: block; font-size: .8rem; color: var(--muted); margin-top: 2px; }

/* Koreografi çizgiye ulaştığında adım "tamamlanır" ve öyle kalır. */
.journey__item.is-done .journey__icon {
  border-color: var(--accent-500);
  color: var(--accent-600);
}
.journey__item.is-done .journey__label { color: var(--ink); }

/* Hover: dolgu açılır, alt etiket pembeleşir. Ölçek/gölge yok. */
.journey__item:hover .journey__icon { background: var(--accent-50); border-color: var(--accent-500); }
.journey__item:hover .journey__sub { color: var(--accent-600); }

/**
 * Bağlantı çizgisi.
 * Mobilde dikey (yukarıdan aşağı), masaüstünde yatay (soldan sağa) çizilir.
 * Çizim transform ile yapılır: genişlik/yükseklik animasyonu yoktur.
 */
.journey__item:not(:last-child)::after {
  content: "";
  position: absolute; left: 26px; top: 52px; bottom: -2.25rem; width: 1px;
  background-image: linear-gradient(var(--line-strong) 50%, transparent 0);
  background-size: 1px 8px;
  background-repeat: repeat-y;
  transform-origin: top;
}
.js [data-journey] .journey__item:not(:last-child)::after {
  transform: scaleY(0);
  transition: transform .3s linear;
}
.js [data-journey] .journey__item.is-drawn:not(:last-child)::after { transform: scaleY(1); }

/* Masaüstü: yatay noktalı bağlantı çizgisi, ikon merkezlerinden geçer */
@media (min-width: 860px) {
  .journey__item:not(:last-child)::after {
    left: calc(50% + 26px + .5rem); right: auto; top: 26px; bottom: auto;
    width: calc(100% - 52px - 1rem); height: 1px;
    background-image: linear-gradient(90deg, var(--line-strong) 50%, transparent 0);
    background-size: 8px 1px;
    background-repeat: repeat-x;
    transform-origin: left;
  }
  .js [data-journey] .journey__item:not(:last-child)::after { transform: scaleX(0); }
  .js [data-journey] .journey__item.is-drawn:not(:last-child)::after { transform: scaleX(1); }
}

/* Geniş tablette süreç yatay kalır ama çemberler bir tık küçülür. */
@media (min-width: 860px) and (max-width: 1023px) {
  .journey__icon { width: 48px; height: 48px; }
  .journey__icon svg { width: 20px; height: 20px; }
  .journey__item:not(:last-child)::after {
    left: calc(50% + 24px + .5rem); top: 24px;
    width: calc(100% - 48px - 1rem);
  }
}

/**
 * Mobil süreç: yatay dizilim sığmaz, dikey zaman çizelgesine dönüşür.
 * Çember 44px, başlık ve alt etiket çemberin sağında yan yana.
 */
/**
 * Telefonda süreç dikey bir listedir; ritmi sıkı tutulur.
 *
 * Beş adım 2,25rem aralıkla ~450px yer kaplıyordu: tek bir bilgi bloğu için
 * neredeyse yarım ekran. Bağlantı çizgisi metaforu (adımların birbirine
 * bağlanması) korunduğu için adımlar sütuna bölünmez; aralık daraltılır.
 * Çizginin alt ucu da aynı değere bağlıdır, ikisi birlikte değişir.
 */
@media (max-width: 859px) {
  .journey { gap: 1.25rem; }
  .journey__item {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    column-gap: .85rem; row-gap: 1px;
    align-items: center;
    text-align: left;
  }
  .journey__icon { width: 42px; height: 42px; grid-row: 1 / span 2; }
  .journey__icon svg { width: 18px; height: 18px; }
  .journey__label { align-self: end; }
  .journey__sub { align-self: start; margin-top: 0; }
  .journey__item:not(:last-child)::after { left: 21px; top: 42px; bottom: -1.25rem; }
}

/**
 * Laboratuvardan kareler — yatay foto şeridi.
 *
 * Kural: kaydırmalı ama düzenli. Her kare aynı orandadır (4:3) ve aynı
 * genişlikte durur; scroll-snap ile hizalanır, yani şerit nerede durursa
 * dursun kareler hep aynı kenardan başlar — yarım kalmış, kaymış bir kare
 * görünmez. Şerit kabın dışına taşar ki kareler ekranın kenarına kadar aksın,
 * ama ilki sayfanın kendi hizasında başlar.
 *
 * Not: bölümün kendisi (başlık + şerit) şimdilik denemedir; fotoğraflar
 * home.php içindeki dizide durur, panele taşınması sonraki adımdır.
 */
/**
 * Alt boşluk bilerek dardır.
 *
 * Bölümün altındaki nefes payını bir sonraki bölümün ÜST dolgusu (.section,
 * 96px'e kadar) zaten veriyor. Burada da tam dolgu bırakılınca ikisi üst üste
 * biniyor ve fotoğrafların altında ~150px'lik boş bir alan kalıyordu.
 */
.lab-strip-section { padding-block: clamp(1.75rem, 4vw, 3rem) clamp(.25rem, 1vw, .75rem); }

/**
 * Şeritten SONRAKİ bölümün üst dolgusu da kısılır.
 *
 * Şeridin alt dolgusunu kısmak tek başına yetmiyordu: fotoğraf etiketleri ile
 * bir sonraki başlık arasında yine ~130px boşluk kalıyordu, çünkü asıl payı
 * sonraki .section'ın üst dolgusu (90px'e kadar) veriyor. İki bölüm birbirinin
 * devamı gibi okunmalı; aradaki nefes payı bir bölüm sınırı kadar geniş olmamalı.
 */
.lab-strip-section + .section { padding-top: clamp(1.5rem, 3vw, 2.25rem); }

/* Şerit .container içindedir; kenar boşluğunu negatif marj ile geri verip
   kendi dolgusuyla kurar (Seçilmiş Çalışmalar şeridiyle aynı yöntem).
   Böylece ilk kare sayfanın hizasında başlar, son kare ekranın kenarına akar. */
.lab-strip {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /**
   * Şerit taşmaz: kabın tam içinde durur.
   *
   * Önce ekranın kenarına akan (full-bleed) bir kurgu denendi; negatif marj +
   * iç boşluk gerekiyordu ve tarayıcılar yatay kaydırmada SON iç boşluğu
   * kaydırılabilir uzunluğa saymadığı için şerit sona birkaç düzine piksel
   * kala duruyordu: son durakta soldaki fotoğrafın bir dilimi ekranda asılı
   * kalıyordu. Kenar boşluğu numaralarıyla uğraşmak yerine şerit sayfanın
   * kendi hizasına alındı — kaydırılabilir uzunluk artık tam olarak kare
   * adımlarına bölünür, her durakta yalnızca tam kareler görünür.
   */
  padding-block: .25rem .75rem;
}
.lab-strip::-webkit-scrollbar { display: none; }
.lab-strip:focus-visible { outline: 2px solid var(--accent-500); outline-offset: 4px; }

/**
 * Kare genişliği SABİT PİKSEL DEĞİL, şeridin tam bölünmüş payıdır.
 *
 * Sabit genişlikte (300/360/400px) son kare kabın kenarında daima ortasından
 * kesiliyordu: şerit nereye durursa dursun ekranda yarım bir fotoğraf kalıyor,
 * bölüm özensiz görünüyordu. Kare artık "görünür alan ÷ kare sayısı" olarak
 * hesaplanır; şerit her durakta yalnızca TAM kareler gösterir.
 *
 * --lab-per-view: aynı anda kaç kare görünecek. Oklar bir kare ilerlettiği
 * için sonraki durakta da kareler tam kalır.
 */
.lab-strip__track {
  --lab-gap: 1rem;
  --lab-per-view: 1;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc(
    (100% - (var(--lab-per-view) - 1) * var(--lab-gap)) / var(--lab-per-view)
  );
  gap: var(--lab-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px)  { .lab-strip__track { --lab-per-view: 2; } }
@media (min-width: 1024px) { .lab-strip__track { --lab-per-view: 3; } }

/**
 * Şerit okları.
 *
 * Kaydırma jestini bilmeyen ya da fare kullanan için şerit tek başına yeterli
 * değildi: oklar başlığın sağında, fotoğrafların üstüne binmeden durur ve her
 * basışta bir kare ilerletir. Şeridin sonuna gelindiğinde ilgili ok söner
 * (JS `disabled` yapar) — tıklayıp hiçbir şey olmaması engellenir.
 */
/**
 * Şerit denetim satırı — galerinin ALTINDA.
 *
 * Yerleşim: [ 01 / 04 ] [ ————— ilerleme ————— ] [ ← ] [ → ]
 * Sayaç ve oklar uçlarda, ilerleme çizgisi aradaki tüm boşluğu alır; böylece
 * satır kap genişliği ne olursa olsun kendini toparlar, sabit piksel gerekmez.
 * Üstteki ince çizgi denetimleri galeriye bağlar (başlığa değil).
 */
.strip-nav {
  display: flex; align-items: center;
  gap: clamp(.85rem, 2.5vw, 1.5rem);
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

/* Konum sayacı — tabular rakamlar: sayı değişince satır zıplamaz. */
.strip-nav__count {
  margin: 0;
  flex: none;
  font-family: var(--font-mono);
  font-size: 13px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  color: var(--muted);
}
.strip-nav__now { color: var(--ink); }
.strip-nav__count-sep { margin: 0 .25rem; }

/* İlerleme çizgisi — aradaki boşluğu doldurur. */
.strip-nav__track {
  flex: 1 1 auto;
  height: 2px;
  border-radius: 2px;
  background: var(--line);
  overflow: hidden;
}
.strip-nav__bar {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--accent-500);
  transition: width .3s var(--ease);
}

.strip-nav__btns { display: flex; gap: .5rem; flex: none; }
.strip-nav__btn {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, opacity .18s ease;
}
.strip-nav__btn svg { width: 18px; height: 18px; }
.strip-nav__btn:hover { background: var(--surface, #f6f8fa); border-color: var(--accent-500); color: var(--accent-600); }
.strip-nav__btn:disabled { opacity: .35; cursor: default; }
.strip-nav__btn:disabled:hover { background: var(--paper); border-color: var(--line-strong); color: var(--ink); }
.lab-shot { scroll-snap-align: start; }
.lab-shot__figure { margin: 0; }
.lab-shot__figure picture {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 14px;
  background: var(--surface, #f6f8fa);
}
.lab-shot__figure img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/**
 * Kare etiketi: sıra numarası + kısa ad.
 * Sitenin bütün mikro bilgileriyle aynı biçim (büyük harf, monospace, geniş
 * harf aralığı). Numara pembedir ve tabular rakamla dizilir; etiketler farklı
 * uzunlukta olsa bile numaralar alt alta aynı hizada durur.
 */
.lab-shot__caption {
  display: flex; align-items: baseline; gap: .5rem;
  margin-top: .7rem;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
}
.lab-shot__no {
  color: var(--accent-500);
  font-variant-numeric: tabular-nums;
}

/* Telefonda tek kare tam genişlikte durur; yanında yarım kare kalmaz.
   Kaç kare olduğunu okların arasındaki sayaç söyler. */
@media (max-width: 560px) {
  /* Başlık ve oklar dar ekranda alt alta sığmaz; oklar başlığın altına,
     sağa yaslı iner. */
  .lab-strip-section .section-head--between { gap: .75rem; }
  /* Telefonda aynı hiyerarşi, daha sıkı: sayaç ve oklar uçlarda kalır,
     ilerleme çizgisi aradaki daralmış boşluğu alır. */
  .strip-nav { gap: .7rem; margin-top: .9rem; padding-top: .8rem; }
  .strip-nav__count { font-size: 12px; }
  .strip-nav__btn { width: 40px; height: 40px; }
  .strip-nav__btn svg { width: 16px; height: 16px; }
}

/**
 * Seçilmiş Çalışmalar — sahte fotoğraf kullanılmaz.
 * Gerçek proje görseli yoksa, molekül desenli sade bir bilimsel panel
 * "büyük görsel alan" hissi verir; marka rengi yalnızca ince vurgu olarak kullanılır.
 */
.portfolio-teaser-grid {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 700px) { .portfolio-teaser-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/**
 * Şeritteki iki kart kırılıma göre gizlenir (bkz. home.php, $stripItems).
 *
 * Kapaktaki güncel çalışma masaüstünde sağdaki büyük kartta zaten durur;
 * şeritte tekrar etmesin diye orada gizlenir. 1024px'in altında kapak paneli
 * hiç görünmediğinden aynı kart bu kez ŞERİTTE gösterilir, yerini bıraktığı
 * dördüncü kayıt ise gizlenir. Her iki durumda da ekranda üç kart durur.
 *
 * Kırılım 1024px'tir: kapak panelinin gizlendiği genişliğin aynısı. İkisi
 * ayrışırsa ya güncel çalışma iki kez görünür ya da hiç görünmez.
 */
/* Seçici ızgara üzerinden yazılır: aşağıdaki `.portfolio-teaser { display: block }`
   aynı özgüllükte ve DAHA SONRA geldiği için sade sınıf seçicisini eziyordu. */
@media (max-width: 1023px) {
  .portfolio-teaser-grid > .portfolio-teaser--wide { display: none; }
}
@media (min-width: 1024px) {
  .portfolio-teaser-grid > .portfolio-teaser--narrow { display: none; }
}

/**
 * Kart hover'ı: kartın kendisi büyümez, gölge patlamaz.
 * Yalnızca içerideki görsel yaklaşır, kategori pembeleşir ve kartın alt
 * kenarında 2px'lik pembe bir çizgi soldan sağa çizilir.
 */
.portfolio-teaser {
  position: relative;
  display: block;
  text-decoration: none;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--paper);
  transition: border-color .22s var(--ease);
}
.portfolio-teaser:hover { border-color: var(--line-strong); }
.portfolio-teaser::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--accent-500);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease-hero);
}
.portfolio-teaser:hover::after,
.portfolio-teaser:focus-visible::after { transform: scaleX(1); }

.portfolio-teaser__visual {
  position: relative;
  display: grid; place-items: center;
  aspect-ratio: 3 / 2;
  background: var(--surface-2);
  overflow: hidden;
}
/**
 * picture varsayılan olarak inline'dır ve yüzde yükseklik, kabın yüksekliği
 * aspect-ratio ile belirlendiğinde çözümlenmez; bu durumda img kendi doğal
 * oranında kalıp alttan kırpılır (object-fit devreye girmez, kırpma ortalanmaz).
 * Mutlak konumlandırma kabı birebir doldurur ve object-fit beklendiği gibi çalışır.
 */
.portfolio-teaser__visual picture { position: absolute; inset: 0; display: block; }
.portfolio-teaser__visual img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease);
}
.portfolio-teaser:hover .portfolio-teaser__visual img { transform: scale(1.04); }
/* Telefonda üç önizleme alt alta gelir; 3/2 oranındaki görseller bölümü
   yalnızca fotoğraf yığınına çevirdiği için şerit orana geçilir. */
@media (max-width: 719px) {
  .portfolio-teaser__visual { aspect-ratio: 2 / 1; }
}
.portfolio-teaser__icon {
  position: relative; z-index: 1;
  width: 40px; height: 40px;
  color: var(--accent-400);
  opacity: .85;
}

.portfolio-teaser__body { display: block; padding: 1.1rem 1.25rem 1.3rem; }
/* Kategori Portfolyo sayfasındaki kayıtlarla aynı dili konuşur: gri değil,
   pembe üst etiket. İki liste aynı içeriği gösteriyor; aynı görünmeliler. */
.portfolio-teaser__cat {
  display: block;
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent-600); margin-bottom: .4rem;
}

/* Tek cümlelik özet — iki satırda kesilir, kart yüksekliği sabit kalır. */
.portfolio-teaser__summary {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: .5rem;
  font-size: .9rem; line-height: 1.55;
  color: var(--body);
}

/**
 * Seçilmiş çalışmalar telefonda ALT ALTA durur — yatay şerit değil.
 *
 * Kartlar bir dönem yana kaydırmalı bir şeritteydi: üç kart sayfayı uzatmasın
 * diye. Bedeli ağırdı — ekranda hep tek kart görünüyor, ikincisi kenardan
 * kesik duruyor, diğer ikisine ulaşmak için kaydırma jestini keşfetmek
 * gerekiyordu; üstelik ekranın sağında kalan kartlar görünüme-girme
 * gözlemcisini hiç tetiklemediği için saydam kalabiliyordu.
 *
 * Üç kart alt alta: hepsi görünür, jest gerektirmez, hiçbir kart kesilmez.
 * 700px'ten itibaren zaten üç kolona geçer (yukarıdaki kural), yani bu yığın
 * yalnızca telefon içindir. Noktalar da anlamsızlaştığı için gizli kalır.
 */
.portfolio-dots { display: none; }
.portfolio-teaser { scroll-snap-align: none; }
.portfolio-teaser__title {
  display: block;
  font-size: 1.02rem; font-weight: 640; color: var(--ink); letter-spacing: -.012em; line-height: 1.35;
}

/* ---- Hakkımızda sayfası ---------------------------------------------- */

/**
 * Not: Hakkımızda sayfası kendi editoryal tasarım diline geçti
 * (public/assets/css/about.css). Eski bölümlerin stilleri — .about-hero__meta,
 * .about-intro, .about-points, .approach, .principle-list, .ecosystem-strip —
 * hiçbir görünümde kullanılmadığı için buradan kaldırıldı.
 */

/**
 * Ekip — kompakt profil satirlari.
 *
 * Iki kisilik bir ekipte yan yana iki sutun, portreleri 400px genisligine
 * ve yarim ekran yuksekligine cikariyordu; fotograf bolumun kendisinden
 * daha buyuk bir ogeye donusuyordu. Bunun yerine her uye tek bir satirdir:
 * olculu bir portre solda, kimlik ve ozet sagda. Portfolyo sayfasindaki
 * kayit listesiyle ayni okuma mantigi.
 *
 * Kart cercevesi/golgesi yoktur; uyeler ince bir cizgiyle ayrilir.
 */
.team-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.75rem, 3.5vw, 2.5rem);
  max-width: 820px;
}

.team-member {
  position: relative;
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  column-gap: clamp(1.35rem, 3vw, 2.25rem);
  align-items: start;
}
.team-member + .team-member {
  border-top: 1px solid var(--line);
  padding-top: clamp(1.75rem, 3.5vw, 2.5rem);
}
.team-member__body { min-width: 0; }

.team-member__portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  margin-bottom: 0;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface-2);
  display: grid; place-items: center;
}
.team-member__portrait picture { position: absolute; inset: 0; display: block; }
.team-member__portrait img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s var(--ease);
}
.team-member:hover .team-member__portrait img { transform: scale(1.03); }
.team-member__initials {
  font-family: var(--font-mono); font-weight: 650;
  font-size: 2rem; color: var(--brand-500);
}

.team-member__role {
  font-family: var(--font-mono);
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent-600);
  margin: 0 0 .5rem;
}
.team-member__name { font-size: 1.16rem; margin: 0 0 .35rem; letter-spacing: -.018em; }
.team-member__name a { color: inherit; text-decoration: none; }
.team-member__name a::after { content: ""; position: absolute; inset: 0; }
.team-member:hover .team-member__name a { color: var(--brand-600); }
.team-member__affiliation {
  font-size: .86rem; color: var(--muted); line-height: 1.5;
  margin: 0 0 .8rem;
}
.team-member__excerpt {
  font-size: .93rem; color: var(--body); line-height: 1.6;
  margin: 0 0 .9rem;
}
.team-member__link { font-size: .9rem; }

/**
 * Telefon: iki sütun yerine sarmalı düzen. Küçük kare portre sola yaslanır;
 * kimlik bilgisi yanına akar, özet ve bağlantı portrenin bittiği yerden
 * sonra tam genişlikte devam eder — dar ekranda satır uzunluğu korunur.
 */
@media (max-width: 719px) {
  .team-member { grid-template-columns: 92px minmax(0, 1fr); column-gap: 1.1rem; }
  /* Metin kabı ızgaraya saydamlaşır; böylece kimlik satırları portrenin
     yanına, özet ve bağlantı ise portrenin altına tam genişlikte yerleşir. */
  .team-member__body { display: contents; }
  .team-member__portrait { aspect-ratio: 1 / 1; grid-column: 1; grid-row: 1 / span 3; }
  .team-member__role,
  .team-member__name,
  .team-member__affiliation { grid-column: 2; }
  .team-member__excerpt,
  .team-member__link { grid-column: 1 / -1; }
  .team-member__initials { font-size: 1.5rem; }
  .team-member__role { margin-bottom: .35rem; }
  .team-member__name { font-size: 1.08rem; }
  .team-member__affiliation { margin-bottom: 0; }
  .team-member__excerpt { margin: 1rem 0 .75rem; }
}

/**
 * Sayfa açılışı (iç sayfalar).
 *
 * Markanın kendi lacivertinde koyu bir bant. Sayfa böylece koyu bir açılış
 * ile (cta-band) koyu bir kapanış arasında beyaz bir gövde olarak kurgulanır.
 * Gradyan, cam efekti veya dekoratif şekil yoktur; derinlik yalnızca çok
 * düşük kontrastlı bir ölçüm dokusundan gelir.
 */
.opener {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--brand-800);
  color: #fff;
  padding-block: clamp(2.75rem, 6vw, 5rem) clamp(3rem, 6.5vw, 5.5rem);
}
/* Laboratuvar defteri / grafik ekseni çağrışımı — neredeyse görünmez. */
.opener::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 76px 76px;
  -webkit-mask-image: radial-gradient(115% 95% at 82% 0%, #000 15%, transparent 72%);
  mask-image: radial-gradient(115% 95% at 82% 0%, #000 15%, transparent 72%);
}

.opener__inner { position: relative; z-index: 2; }

/**
 * Fotograflı varyant: gercek laboratuvar gorseli tam genislikte zemine
 * yerlesir, uzerine lacivert bir katman gelir. Katman metnin bulundugu
 * sol tarafta koyu, sag tarafta seffaftir; boylece yazi okunakli kalirken
 * fotograf da gorunur kalir.
 */
.opener--media { background: var(--brand-900); }
.opener__media { position: absolute; inset: 0; z-index: -2; }
.opener__media picture { position: absolute; inset: 0; display: block; }
.opener__media img { width: 100%; height: 100%; object-fit: cover; }
.opener--media::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg,
    rgba(22,29,66,.95) 0%,
    rgba(22,29,66,.88) 40%,
    rgba(22,29,66,.55) 100%);
}
@media (max-width: 760px) {
  /* Dar ekranda metin gorselin uzerine tam biner; katman her yerde koyu olur. */
  .opener--media::after { background: rgba(22,29,66,.9); }
}
/* Fotograf varken olcum dokusu gereksiz gurultudur. */
.opener--media::before { display: none; }

.opener__body { max-width: 62rem; }

.opener__label {
  font-family: var(--font-mono);
  font-size: .7rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent-300);
  margin: 0 0 1.15rem;
}

/* Başlık: sayfanın en güçlü öğesi. Dar ölçü güçlü bir siluet oluşturur. */
.opener__title {
  color: #fff;
  margin: 0 0 1.15rem;
  max-width: 17ch;
  font-size: clamp(2.2rem, 1.25rem + 3.4vw, 3.6rem);
  line-height: 1.1;
  letter-spacing: -.032em;
}

.opener__text {
  margin: 0;
  max-width: 52ch;
  font-size: clamp(1rem, .96rem + .25vw, 1.115rem);
  line-height: 1.65;
  color: rgba(255,255,255,.78);
}

/* Koyu zeminde breadcrumb ve ikincil buton uyarlaması */
.opener .breadcrumb ol { color: rgba(255,255,255,.55); }
.opener .breadcrumb a { color: rgba(255,255,255,.62); }
.opener .breadcrumb a:hover { color: #fff; }
.opener .breadcrumb li + li::before { color: rgba(255,255,255,.3); }
.opener .breadcrumb [aria-current="page"] { color: rgba(255,255,255,.9); }

.opener .btn--secondary {
  background: transparent; color: #fff;
  border-color: rgba(255,255,255,.4);
}
.opener .btn--secondary:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.65); }

/* ==========================================================================
   Sayfa başlığı — sitedeki TEK açılış sistemi
   --------------------------------------------------------------------------
   Her sayfa aynı çerçeveyi kullanır: açık zemin, altta ayraç çizgisi, sola
   yaslanmış hizalama, aynı üst etiket ve aynı H1 ölçüsü. Sayfadan sayfaya
   değişen tek şey çerçevenin taşıdığı içeriktir (künye satırları, hizmet
   dizini, arşiv sayaçları, iletişim bilgisi).

   Vurgu rengi her sayfada tek bir yerde görünür: üst etiketin karesi.
   ========================================================================== */
.page-head {
  position: relative;
  /* Düz beyaz yerine üstten inen çok hafif kurumsal tint: sayfa açılışı
     gövdeden ayrılır, renk gürültü yapmadan kimliğe bağlanır. */
  background: linear-gradient(180deg, var(--brand-50) 0%, var(--paper) 68%);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(2rem, 4.5vw, 3.75rem) clamp(2.25rem, 5vw, 4rem);
}
/* Sayfanın en üstünde ince marka çizgisi — kurumsal antet hissi. */
.page-head::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--accent-500) 0%, var(--brand-600) 42%, var(--brand-300) 100%);
}

.page-head__grid { display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: start; }
@media (min-width: 900px) {
  .page-head--split .page-head__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .8fr);
    gap: clamp(2.5rem, 5vw, 4.5rem);
  }
}
.page-head__main { min-width: 0; }

/* Üst etiket: monospace, harf aralığı açık, önünde tek vurgu karesi. */
.page-head__eyebrow {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: .35rem .8rem;
  margin: 0 0 clamp(1rem, 2.5vw, 1.5rem);
  font-family: var(--font-mono);
  font-size: .7rem; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--brand-600);
}
.page-head__eyebrow::before {
  content: ""; flex: none;
  width: 8px; height: 8px;
  background: var(--accent-500);
}
/* Etiket birden çok bilgi taşıyorsa (ör. arşiv sayaçları) parçalar ayraçla ayrılır. */
.page-head__eyebrow span + span {
  border-left: 1px solid var(--line-strong);
  padding-left: .8rem;
}
@media (max-width: 700px) {
  .page-head__eyebrow span + span { border-left: 0; padding-left: 0; }
}
.page-head__eyebrow strong { color: var(--ink-2); font-weight: 600; }

.page-head__title {
  margin: 0;
  max-width: 21ch;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.1rem + 2.2vw, 2.75rem);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -.025em;
  color: var(--brand-800);
}
.page-head--split .page-head__title { max-width: none; }

.page-head__lead {
  margin: clamp(1rem, 2.2vw, 1.35rem) 0 0;
  max-width: 62ch;
  font-size: 1.02rem;
  color: var(--body);
}
.page-head__extra { margin-top: clamp(1.25rem, 3vw, 1.85rem); }
.page-head__actions { margin-top: clamp(1.35rem, 3vw, 2rem); }

/* --- Çerçevenin taşıdığı sayfaya özgü içerikler --------------------------- */

/**
 * Hizmet düğmeleri — sayfa açılışının altındaki hızlı geçiş bandı.
 * Kullanıcı hangi hizmeti görmek istiyorsa doğrudan ona iner; ayrıntı zaten
 * aşağıdaki kartlardadır. Dikey bir dizin yerine yan yana düğmeler kullanılır:
 * açılış alçak kalır, dokuz satırlık liste sayfayı aşağı itmez.
 */
.service-band {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .5rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--line);
}
.service-band__label,
.filter-bar__label {
  font-family: var(--font-mono);
  font-size: .68rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--muted);
  margin-right: .3rem;
}
.filter-bar__label { margin: 0 0 .6rem; }
.service-band__item {
  display: inline-flex; align-items: center;
  padding: .5rem .95rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  box-shadow: var(--shadow-xs);
  font-size: .88rem; font-weight: 560;
  color: var(--ink-2);
  text-decoration: none;
  transition: border-color .18s var(--ease), color .18s var(--ease),
              background-color .18s var(--ease), transform .18s var(--ease);
}
.service-band__item:hover, .service-band__item:focus-visible {
  border-color: var(--accent-300);
  background: var(--accent-50);
  color: var(--accent-700);
  transform: translateY(-1px);
  text-decoration: none;
}

/**
 * Formdaki isteğe bağlı bölüm.
 * Zorunlu olmayan alanlar kapalı bir bölümde durur: form ilk bakışta kısa
 * görünür, ayrıntı verecek kullanıcı tek tıkla açar. JavaScript gerekmez.
 */
.form-optional {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  margin-bottom: 1.5rem;
}
.form-optional__summary {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .6rem;
  padding: .9rem 1.1rem;
  cursor: pointer;
  list-style: none;
  border-radius: var(--radius);
}
.form-optional__summary::-webkit-details-marker { display: none; }
/* Açılır/kapanır göstergesi metinden önce gelir. */
.form-optional__summary::before {
  content: "";
  width: 8px; height: 8px; flex: none;
  margin-right: .2rem;
  border-right: 2px solid var(--brand-500);
  border-bottom: 2px solid var(--brand-500);
  transform: rotate(-45deg) translate(-1px, -1px);
  transition: transform .2s var(--ease);
}
.form-optional[open] .form-optional__summary::before { transform: rotate(45deg) translate(-2px, -2px); }
.form-optional__summary:hover { background: var(--surface-2); }
.form-optional__title { font-weight: 600; color: var(--ink); font-size: .97rem; }
.form-optional__hint { font-size: .84rem; color: var(--muted); }
.form-optional__body {
  padding: .25rem 1.1rem 1.25rem;
  border-top: 1px solid var(--line);
}

/**
 * Doğrudan hat — başlığın altındaki en hızlı kanal.
 * Adresin kendisi eylem çağrısıdır; yanındaki düğme adresi panoya kopyalar,
 * böylece kullanıcı e-posta programını açmadan da adresi alabilir.
 * Sol kenardaki vurgu çizgisi bloğu "bilgi" değil "eylem" olarak işaretler.
 */
.page-head__direct {
  display: flex; align-items: flex-start; gap: 1rem; flex-wrap: wrap;
  max-width: 44rem;
  padding: 1rem 1.15rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent-500);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
}
.page-head__direct-body { flex: 1 1 16rem; min-width: 0; }
/* Adres bu blokta tek satırda kalmalı: iki parçaya bölünen bir e-posta
   adresi okunmaz ve yanlış kopyalandığı izlenimi verir. */
.page-head__direct .page-head__mail {
  font-size: clamp(.98rem, .82rem + .55vw, 1.32rem);
  text-underline-offset: .25em;
}
.page-head__direct-alt { margin: .45rem 0 0; font-size: .85rem; color: var(--muted); }
.page-head__direct-alt a { color: var(--ink-2); text-decoration: none; }
.page-head__direct-alt a:hover { color: var(--brand-600); text-decoration: underline; }
.page-head__direct .btn { flex: none; }

/**
 * Başlık paneli — sağ kolonda duran bilgi kartı.
 * Açılışın sağ yarısı boş kalmasın diye değil, sayfanın en çok aranan
 * bilgisini (iletişim kanalları) ilk ekrana taşımak için vardır.
 */
/**
 * Panel, başlık kolonuna göre DİKEYDE ORTALANIR.
 *
 * Üste yaslıyken kutunun üst kenarı H1'in epey yukarısında başlıyor, altında
 * da boşluk kalıyordu: sayfa dengesiz görünüyordu. Ortalanınca kutunun ağırlık
 * merkezi başlık bloğuyla aynı hizaya geliyor.
 */
/* İki kolon da ortalanır: hangisi uzunsa satır yüksekliğini o belirler,
   kısa olan onun ortasına oturur. Yalnızca panel ortalanınca kısa başlıklı
   sayfada bu kez panel aşağı taşıyordu. */
.page-head--split .page-head__main,
.page-head__aside { align-self: center; }

.page-head__panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.page-head__panel-head {
  padding: .7rem 1.15rem;
  background: var(--brand-50);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: .68rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--brand-700);
}
.page-head__panel-list { list-style: none; margin: 0; padding: .4rem 0; }
.page-head__panel-list li {
  display: flex; gap: .85rem; align-items: flex-start;
  padding: .7rem 1.15rem;
}
.page-head__panel-list li + li { border-top: 1px solid var(--line); }
.page-head__panel-icon {
  flex: none;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: var(--accent-50);
  color: var(--accent-600);
}
.page-head__panel-icon svg { width: 17px; height: 17px; }
.page-head__panel-label {
  display: block;
  font-size: .68rem; font-weight: 650;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .15rem;
}
.page-head__panel-value {
  display: block; min-width: 0;
  font-size: .95rem; color: var(--ink-2); line-height: 1.5;
  overflow-wrap: anywhere;
}
.page-head__panel-value a { color: var(--ink-2); text-decoration: none; }
.page-head__panel-value a:hover { color: var(--brand-600); text-decoration: underline; }
/* Harita bağlantısı adres metnine yapışmasın: kendi satırına iner. */
.page-head__panel-value .link-arrow {
  display: flex; width: fit-content;
  margin-top: .35rem; font-size: .85rem;
}

/* Panelin içine giren künye, panelin kendi çizgileriyle çakışmaz. */
.page-head__panel .page-head__facts { padding: 1rem 1.15rem 1.15rem; }

/* Künye satırları (hakkımızda) */
.page-head__facts { margin: 0; display: grid; gap: .85rem; }
.page-head__facts > div {
  display: grid; grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 1rem; align-items: baseline;
}
.page-head__facts dt {
  font-family: var(--font-mono);
  font-size: .68rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--muted);
}
.page-head__facts dd { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--ink-2); }
@media (max-width: 560px) {
  .page-head__facts > div { grid-template-columns: 1fr; gap: .2rem; }
}

/* Sürmekte olan çalışma göstergesi (portfolyo) */
.page-head__dot {
  display: inline-block;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent-500);
  margin-right: .35rem;
}

/* Sınıflandırma önizlemesi (portfolyo) — bağlantı değil, taksonomi hissi. */
.page-head__tags {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .2rem .5rem;
  font-size: .8rem; color: var(--muted);
}
.page-head__tags li + li::before { content: "·"; margin-right: .5rem; color: var(--line-strong); }

/* İletişim: adresin kendisi eylem çağrısıdır, buton yoktur. */
.page-head__mail {
  display: inline-block; max-width: 100%;
  font-size: clamp(1.05rem, .8rem + 1.2vw, 1.7rem);
  font-weight: 600; letter-spacing: -.022em;
  color: var(--ink);
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-decoration-color: var(--accent-500);
  text-decoration-thickness: 2px;
  text-underline-offset: .3em;
  transition: text-decoration-thickness .18s var(--ease);
}
.page-head__mail:hover, .page-head__mail:focus-visible {
  color: var(--ink); text-decoration-thickness: 3px;
}
.page-head__meta { margin: 1.25rem 0 0; font-size: .95rem; color: var(--ink-2); }
.page-head__meta + .page-head__meta { margin-top: .3rem; }
.page-head__meta--soft { color: var(--muted); }
.page-head__meta a { color: inherit; text-decoration: none; }
.page-head__meta a:hover { color: var(--brand-600); }

/* Dizinden gelen çapa: hedef kart kısa süre işaretlenir. */
.service-card:target {
  outline: 2px solid transparent; outline-offset: 4px;
  animation: np-anchor 1.8s var(--ease) both;
}
@keyframes np-anchor {
  0%, 45% { outline-color: var(--accent-400); }
  100%    { outline-color: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .service-card:target { animation: none; outline-color: var(--accent-300); }
}
.breadcrumb { margin-bottom: 1.1rem; }
.breadcrumb ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: .45rem;
  list-style: none; margin: 0; padding: 0;
  font-size: .82rem; color: var(--muted);
}
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--brand-600); }
.breadcrumb li + li::before { content: "/"; margin-right: .45rem; color: var(--line-strong); }
.breadcrumb [aria-current="page"] { color: var(--ink-2); font-weight: 550; }

/* Koyu CTA bandı */
.cta-band {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border-top: 1px solid var(--line);
  color: var(--ink-2);
  padding-block: clamp(2.75rem, 6vw, 4.25rem);
}
/* Doku, açık zeminde göz yormayacak kadar düşük kontrastta tutulur.
   Çok yavaş kayar (60 saniyede 40px): desen "duruyor" gibi değil, sayfa
   yaşıyor gibi okunur. Kaydırma transform ile yapılır; desen kabın dışına
   taşırıldığı için kenarlarda boşluk oluşmaz. Mobilde kapalıdır. */
.cta-band::before {
  content: "";
  position: absolute; inset: -48px;
  background-image: radial-gradient(circle at 1px 1px, rgba(31,42,92,.07) 1px, transparent 0);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(620px 320px at 85% 20%, #000, transparent 70%);
  mask-image: radial-gradient(620px 320px at 85% 20%, #000, transparent 70%);
}
@keyframes np-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(40px, 20px, 0); }
}
@media (min-width: 640px) {
  .js .cta-band::before { animation: np-drift 60s linear infinite alternate; }
}
.cta-band__inner {
  position: relative; z-index: 2;
  display: grid; gap: 1.75rem; align-items: center;
}
@media (min-width: 880px) {
  .cta-band__inner { grid-template-columns: minmax(0, 1.35fr) auto; gap: 2.5rem; }
}
.cta-band h2 { color: var(--ink); margin-bottom: .7rem; }
.cta-band p { color: var(--body); margin: 0; max-width: 58ch; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/**
 * Kapanış düğmesi görünür olunca BİR KEZ nabız atar: kenarında pembe bir
 * halka genişleyip söner. Döngü değildir; dikkat çeker, rahatsız etmez.
 */
@keyframes np-pulse {
  from { box-shadow: 0 0 0 0 rgba(229, 9, 127, .45); }
  to   { box-shadow: 0 0 0 14px rgba(229, 9, 127, 0); }
}
.cta-band .btn--primary.is-pulsing { animation: np-pulse .9s var(--ease-hero) 1; }

@media (max-width: 639px) {
  .cta-band { text-align: center; }
  .cta-band h2 { font-size: 26px; }
  .cta-band p { font-size: 15px; margin-inline: auto; }
  .cta-band__actions { justify-content: center; }
  .cta-band__actions .btn { width: 100%; max-width: 300px; justify-content: center; min-height: 48px; }
}

/* ---- 09. İçerik bileşenleri ---------------------------------------------- */

/* Numaralı süreç adımları */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; counter-reset: step; }
.steps__item { position: relative; padding-left: 3.25rem; counter-increment: step; }
/* Numaralı adımlar da bir süreçtir: ikincil "akış" tonunu kullanır. */
.steps__item::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: -2px;
  width: 2.25rem; height: 2.25rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--step-50);
  border: 1px solid var(--step-100);
  color: var(--step-600);
  font-family: var(--font-mono); font-size: .77rem; font-weight: 600;
}
.steps__item::after {
  content: ""; position: absolute; left: 1.115rem; top: 2.5rem; bottom: -1.5rem;
  width: 1px; background: linear-gradient(var(--step-100), transparent);
}
.steps__item:last-child::after { display: none; }
.steps__title { font-weight: 600; color: var(--ink); }

/* İşaretli liste */
.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.check-list li {
  position: relative; padding-left: 1.85rem; font-size: .945rem; color: var(--body);
}
.check-list li::before {
  content: "";
  position: absolute; left: 0; top: .35em;
  width: 1.1rem; height: 1.1rem;
  border-radius: 50%;
  background: var(--accent-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e6007e' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/.7rem no-repeat;
}

/* Bilgi listesi (etiket/değer) */
.info-list { display: grid; gap: 0; margin: 0; }
.info-list__row {
  display: grid; gap: .25rem 1.5rem;
  padding: .85rem 0;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 640px) { .info-list__row { grid-template-columns: 190px minmax(0, 1fr); } }
.info-list__row:last-child { border-bottom: 0; }
.info-list__label { font-size: .84rem; color: var(--muted); font-weight: 550; }
.info-list__value { color: var(--ink-2); font-size: .95rem; }

/* Etiket bulutu */
.tag {
  display: inline-flex; align-items: center;
  padding: .32rem .7rem;
  border-radius: 999px;
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  color: var(--brand-700);
  font-size: .785rem; font-weight: 560;
  white-space: nowrap;
}
.tag--neutral { background: var(--surface-2); border-color: var(--line); color: var(--ink-2); }
.tag--accent { background: var(--accent-50); border-color: var(--accent-100); color: var(--accent-600); }

/* Filtre çubuğu */
.filter-bar {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
}
.filter-bar__item {
  padding: .5rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--paper);
  color: var(--ink-2);
  font-size: .875rem; font-weight: 550;
  text-decoration: none;
  transition: all .18s var(--ease);
}
.filter-bar__item:hover { border-color: var(--brand-300); color: var(--brand-700); background: var(--brand-50); }
.filter-bar__item.is-active {
  background: var(--brand-600); border-color: var(--brand-600); color: #fff;
}

/* İletişim bilgi kartı */
.contact-card {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1.25rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.contact-card__icon {
  flex: none; width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--brand-50); color: var(--brand-600); border: 1px solid var(--brand-100);
}
.contact-card__icon svg { width: 20px; height: 20px; }
.contact-card__label { font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; margin-bottom: .25rem; }
.contact-card__value { color: var(--ink); font-weight: 550; font-size: .95rem; line-height: 1.5; }
.contact-card__value a { color: inherit; text-decoration: none; }
.contact-card__value a:hover { color: var(--brand-600); }

/* Boş durum */
.empty-state {
  text-align: center;
  padding: clamp(2.5rem, 6vw, 4rem) 1.5rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.empty-state__icon {
  width: 52px; height: 52px; margin: 0 auto 1.1rem;
  border-radius: 15px; display: grid; place-items: center;
  background: var(--paper); border: 1px solid var(--line); color: var(--brand-400);
}
.empty-state__icon svg { width: 26px; height: 26px; }
.empty-state h3 { font-size: 1.1rem; margin-bottom: .4rem; }
.empty-state p { color: var(--muted); font-size: .93rem; max-width: 46ch; margin-inline: auto; }

/* Sayfalama */
.pagination { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: center; margin-top: 2.5rem; }
.pagination a, .pagination span {
  min-width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  padding-inline: .7rem;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink-2);
  font-size: .89rem; font-weight: 550; text-decoration: none;
}
.pagination a:hover { border-color: var(--brand-300); color: var(--brand-700); background: var(--brand-50); }
.pagination .is-current { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
.pagination .is-gap { border-color: transparent; background: transparent; color: var(--muted); }

/* ---- 10. Formlar --------------------------------------------------------- */
.form { display: grid; gap: 1.25rem; }
.form-grid { display: grid; gap: 1.25rem; }
@media (min-width: 700px) { .form-grid--2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* align-content: iki alan yan yana geldiğinde (form-grid--2) yalnızca birinde
   ipucu metni varsa, diğerinin satırları yüksekliği doldurmak için gerilir ve
   etiket/kutu hizası kayardı. Satırlar doğal yüksekliğinde kalır. */
.field { display: grid; gap: .4rem; align-content: start; }
.field__label {
  font-size: .875rem; font-weight: 600; color: var(--ink-2);
  display: flex; align-items: center; gap: .3rem;
}
.field__req { color: var(--danger); font-weight: 700; }
.field__hint { font-size: .8rem; color: var(--muted); line-height: 1.5; }
.field__error {
  font-size: .82rem; color: var(--danger); font-weight: 550;
  display: flex; align-items: flex-start; gap: .35rem;
}
.field__error svg { width: 15px; height: 15px; margin-top: 2px; flex: none; }

.input, .textarea, .select {
  width: 100%;
  padding: .75rem .95rem;
  font: inherit;
  font-size: .95rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
.input::placeholder, .textarea::placeholder { color: #9db3bd; }
.input:hover, .textarea:hover, .select:hover { border-color: var(--brand-300); }
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-400) 22%, transparent);
}
.textarea { min-height: 130px; resize: vertical; line-height: 1.6; }

.select {
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236d8b98' stroke-width='2.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;
  cursor: pointer;
}

.field.has-error .input,
.field.has-error .textarea,
.field.has-error .select { border-color: var(--danger); background: #fffbfb; }

/* Onay kutusu */
.checkbox { display: flex; gap: .7rem; align-items: flex-start; cursor: pointer; }
.checkbox input[type="checkbox"] {
  flex: none; width: 1.2rem; height: 1.2rem; margin-top: .15rem;
  accent-color: var(--brand-600); cursor: pointer;
}
.checkbox__text { font-size: .88rem; color: var(--body); line-height: 1.55; }

/* Radyo kart grubu */
.radio-cards { display: grid; gap: .65rem; }
@media (min-width: 640px) { .radio-cards--2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.radio-card {
  display: flex; gap: .7rem; align-items: flex-start;
  padding: .85rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all .18s var(--ease);
}
.radio-card:hover { border-color: var(--brand-300); background: var(--brand-50); }
.radio-card:has(input:checked) { border-color: var(--brand-500); background: var(--brand-50); box-shadow: 0 0 0 1px var(--brand-500); }
.radio-card input { accent-color: var(--brand-600); margin-top: .2rem; }
.radio-card__title { font-size: .92rem; font-weight: 600; color: var(--ink); }
.radio-card__text { font-size: .82rem; color: var(--muted); }

/* Dosya alanı */
.filedrop {
  position: relative;
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 1.5rem 1.25rem;
  text-align: center;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.filedrop:hover, .filedrop.is-dragover { border-color: var(--brand-400); background: var(--brand-50); }
.filedrop input[type="file"] {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer;
}
.filedrop__icon { color: var(--brand-400); margin-bottom: .6rem; }
.filedrop__icon svg { width: 28px; height: 28px; margin-inline: auto; }
.filedrop__title { font-size: .93rem; font-weight: 600; color: var(--ink-2); }
.filedrop__hint { font-size: .8rem; color: var(--muted); margin-top: .25rem; }
.filedrop__list { margin-top: 1rem; display: grid; gap: .4rem; text-align: left; }
.filedrop__file {
  display: flex; align-items: center; gap: .55rem;
  padding: .5rem .7rem;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 8px; font-size: .83rem; color: var(--ink-2);
}
.filedrop__file svg { width: 15px; height: 15px; color: var(--brand-500); flex: none; }
.filedrop__file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filedrop__size { margin-left: auto; color: var(--muted); font-size: .78rem; flex: none; }

/* Sadece ekran okuyucular için */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Bal küpü (bot tuzağı) */
.honeypot { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* Form paneli */
.form-panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  box-shadow: var(--shadow-sm);
}
.form-panel__head { margin-bottom: 1.75rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--line); }
.form-panel__head h2 { font-size: 1.35rem; margin-bottom: .4rem; }
.form-panel__head p { font-size: .93rem; margin: 0; }

.fieldset { border: 0; padding: 0; margin: 0; }
.fieldset + .fieldset { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.fieldset__legend {
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent-600); font-weight: 600;
  margin-bottom: 1.1rem; padding: 0;
}

/* ---- 11. Bildirimler ve rozetler ----------------------------------------- */
.alert {
  display: flex; gap: .8rem; align-items: flex-start;
  padding: .95rem 1.15rem;
  border-radius: var(--radius-sm);
  border: 1px solid;
  font-size: .92rem;
  line-height: 1.55;
}
.alert svg { width: 19px; height: 19px; flex: none; margin-top: 1px; }
.alert--success { background: var(--ok-bg); border-color: #bde3d3; color: #10553c; }
.alert--error   { background: var(--danger-bg); border-color: #f2c9c6; color: #8d2721; }
.alert--warning { background: var(--warn-bg); border-color: #f0dcb6; color: #7d4f06; }
.alert--info    { background: var(--info-bg); border-color: #bcdde8; color: #0f5063; }
.alert strong { font-weight: 640; }

.badge {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .25rem .6rem;
  border-radius: 999px;
  font-size: .74rem; font-weight: 620;
  letter-spacing: .01em;
  white-space: nowrap;
  border: 1px solid transparent;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge--new       { background: var(--info-bg);   color: #0f5063; border-color: #bcdde8; }
.badge--review    { background: #eef1fb;          color: #384b96; border-color: #ccd5f2; }
.badge--waiting   { background: var(--warn-bg);   color: #7d4f06; border-color: #f0dcb6; }
.badge--approved  { background: #eef6ff;          color: #1d5b93; border-color: #c5dcf3; }
.badge--progress  { background: #f3eefb;          color: #5a3a94; border-color: #ddd0f2; }
.badge--done      { background: var(--ok-bg);     color: #10553c; border-color: #bde3d3; }
.badge--cancelled { background: #f2f5f6;          color: #5b7480; border-color: #dde5e8; }
.badge--test      { background: #fff4e6;          color: #92500b; border-color: #f6d9b3; }

/* ---- 12. Alt bilgi -------------------------------------------------------
   Üç kolon aynı yatay hizada başlar: MARKA · KURUMSAL · İLETİŞİM.
   Marka kolonu kesintisiz tek akıştır (logo → tanım → sosyal); sosyal ikonlar
   artık ayrı bir ızgara öğesi değildir, logodan kopup aşağıda yüzmezler.
   İletişim satırlarında ikon yoktur: site ikonsuz bir dil kullanıyor.
   Alt bilgiye giriş animasyonu EKLENMEZ — her sayfanın sonunda tekrarlanırdı;
   yalnızca 200ms'lik hover geçişleri vardır.
   -------------------------------------------------------------------------- */
.site-footer {
  /* Alt bilgi kendi paletini taşır: sayfadan sayfaya değişmeyen tek bileşen. */
  --f-paper: #ffffff;
  --f-line:  #e4e8ec;
  --f-ink:   #16181d;
  --f-ink-2: #5a5e66;
  --f-pink:  #e5097f;

  background: var(--f-paper);
  border-top: 1px solid var(--f-line);
  color: var(--f-ink-2);
}

/* Sayfa gövdesiyle aynı ölçü: 1160px kutu, kırılıma göre 24/32/48px iç boşluk. */
.site-footer__inner {
  width: 100%;
  max-width: 1160px;
  margin-inline: auto;
  padding-inline: 24px;
}
@media (min-width: 640px)  { .site-footer__inner { padding-inline: 32px; } }
@media (min-width: 1024px) { .site-footer__inner { padding-inline: 48px; } }

.site-footer__grid {
  display: grid;
  gap: 40px;
  padding-block: 48px 40px;
}
/* Küçük tablet (640–767): marka üstte tam genişlik, altında iki kolon. */
@media (min-width: 640px) {
  .site-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
    padding-block: 48px 40px;
  }
  .site-footer__brand { grid-column: 1 / -1; }
  .site-footer__desc  { max-width: 480px; }
}
/* 768px'ten itibaren üç kolon: marka tam genişlikken alt bilgi tablette
   gereksiz yere uzuyordu (600px+). Üç kolon aynı bilgiyi yarı yükseklikte
   verir ve kolonlar hâlâ 200px'in üzerinde kalır. */
@media (min-width: 768px) {
  .site-footer__grid {
    grid-template-columns: 1.1fr .8fr 1.1fr;
    gap: 40px;
    padding-block: 56px 40px;
  }
  .site-footer__brand { grid-column: auto; }
  .site-footer__desc  { max-width: 320px; }
}
/* Tablette eşit oranlarda iletişim kolonu 229px'e iniyor ve e-posta kelime
   ortasından kırılıyordu. Punto küçültmek yerine yer, ihtiyaca göre dağıtılır:
   kurumsal bağlantılar kısa (tek kelime), iletişim satırları uzun. */
@media (min-width: 768px) and (max-width: 1023px) {
  .site-footer__grid { grid-template-columns: 1fr .7fr 1.3fr; }
}
@media (min-width: 1024px) {
  .site-footer__grid {
    gap: 64px;
    padding-block: 64px 48px;
  }
}

/* --- Kolon 1: marka ------------------------------------------------------- */
.site-footer__desc {
  margin: 16px 0 0;
  max-width: 320px;
  font-size: 14px; line-height: 1.6;
  color: var(--f-ink-2);
}
/* Alt bilgideki logo aynı dosyadır; zemini beyaz olduğu için renk uyarlaması
   gerekmiyor (eskiden simge/metin CSS ile boyanıyordu). */
.site-footer .brand__img { height: 38px; }

.footer-social { display: flex; gap: 12px; margin-top: 20px; }
.footer-social a {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid var(--f-line);
  border-radius: 6px;
  background: transparent;
  color: var(--f-ink-2);
  transition: color .2s ease, border-color .2s ease;
}
.footer-social a:hover { color: var(--f-pink); border-color: var(--f-pink); }
.footer-social svg { width: 18px; height: 18px; }

/**
 * Staj başvurusu düğmesi — sosyal ikonların hemen altında.
 *
 * Çerçeveli sürümü metnin içinde kayboluyordu: alt bilgiye kadar inen bir
 * öğrenci bu bağlantıyı arıyor demektir, görmesi gerekir. Bu yüzden sitenin
 * standart eylem dilini kullanır: dolu pembe hap, beyaz metin, 44px dokunma.
 * Alt bilgideki TEK dolu yüzeydir; ikinci bir renkli düğme eklenmez.
 */
/**
 * Staj başvurusu şeridi.
 *
 * Dolu pembe hap değildir: sayfanın kapanış bandında zaten dolu pembe bir
 * düğme var ve ikisi alt alta gelince yarışıyorlardı. Burada açık pembe
 * zemin + pembe çerçeve kullanılır; vurgu yalnızca soldaki dolu daireden
 * gelir. Sağdaki ikon bağlantının yeni sekmede açıldığını söyler.
 */
.footer-intern {
  display: flex; align-items: center; gap: .85rem;
  width: 100%;
  margin-top: 18px;
  min-height: 60px;
  padding: .6rem 1rem;
  border: 1px solid #f3c3da;
  border-radius: 14px;
  background: #fdf2f7;
  font-size: 1rem; font-weight: 600;
  color: var(--f-ink);
  text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease;
}
.footer-intern:hover {
  background: #fbe7f1; border-color: var(--f-pink);
  color: var(--f-ink); text-decoration: none;
}
.footer-intern__badge {
  flex: none;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--f-pink);
  color: #fff;
}
/* Oku sağ-yukarı çevirir: "dışarı açılır" işareti. */
.footer-intern__badge svg { width: 18px; height: 18px; transform: rotate(-45deg); }
.footer-intern__label { flex: 1 1 auto; }
.footer-intern__ext { flex: none; color: var(--f-pink); display: grid; place-items: center; }
.footer-intern__ext svg { width: 20px; height: 20px; }

/* --- Kolon 2 ve 3: başlık + bağlantı listeleri ---------------------------- */
.site-footer__title {
  margin: 0 0 16px;
  font-size: 11px; font-weight: 600; line-height: 1.4;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--f-ink);
}

.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links a,
.footer-links span {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 36px;
  font-size: 15px; line-height: 1.4;
  color: var(--f-ink-2);
  text-decoration: none;
}
.footer-links a { transition: color .2s ease; }
.footer-links a:hover { color: var(--f-pink); text-decoration: none; }

/**
 * Bağlantı başındaki pembe çentik.
 * Başlık ("KURUMSAL") kaldırıldığı için listenin liste olduğunu ve nereye
 * gittiğini bu işaret söyler. Üzerine gelindiğinde bir adım sağa kayar.
 */
.footer-links__mark {
  flex: none; display: grid; place-items: center;
  color: var(--f-pink);
  transition: transform .2s ease;
}
.footer-links__mark svg { width: 14px; height: 14px; }
.footer-links a:hover .footer-links__mark { transform: translateX(2px); }
.footer-links a { font-weight: 600; color: var(--f-ink); }

/**
 * İletişim satırlarındaki ikon kutusu.
 * Başlık yerine türü (konum / telefon / e-posta) bu kutu söyler; çerçeveli ve
 * sabit ölçüdedir, üç satır aynı hizada başlar.
 */
/**
 * İkon kutusu — seçici bilerek `.footer-links` ile başlar.
 *
 * Liste kuralları `.footer-links a, .footer-links span { ... }` biçiminde
 * yazılmış ve ikon kutusu da bir <span> olduğu için onları miras alıyordu:
 * telefonda `justify-content: flex-start` ikonu kutunun soluna yapıştırıyor
 * (sol 1px, sağ 20px), `min-height: 44px` de kutuyu 38×44'lük bir dikdörtgene
 * çeviriyordu. Tip seçicisini geçmek için burada da sınıf zinciri kullanılır.
 */
.footer-links .footer-ico {
  flex: none;
  width: 38px; height: 38px;
  min-height: 38px;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  border: 1px solid var(--f-line);
  border-radius: 10px;
  color: var(--f-pink);
  transition: border-color .2s ease, background-color .2s ease;
}
.footer-links .footer-ico svg { width: 17px; height: 17px; display: block; }
.footer-links--contact a:hover .footer-ico { border-color: var(--f-pink); background: #fdf2f7; }
.footer-links--contact a,
.footer-links--contact span {
  align-items: center;
  gap: .75rem;
  padding-block: 6px;
  font-weight: 500;
  color: var(--f-ink-2);
}
/* Uzun e-posta dar ekranda taşmaz, kırılarak sarar. */
.footer-links__mail { overflow-wrap: anywhere; }

/* --- Alt bar -------------------------------------------------------------- */
.site-footer__bottom {
  border-top: 1px solid var(--f-line);
  padding-block: 20px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px 24px;
  font-size: 13px;
  color: var(--f-ink-2);
}
.site-footer__copy { margin: 0; }
.site-footer__legal { display: flex; align-items: center; gap: 16px; }
.site-footer__legal a {
  color: var(--f-ink-2);
  text-decoration: none;
  transition: color .2s ease;
}
.site-footer__legal a:hover { color: var(--f-pink); }
/* İki yasal bağlantı arasındaki dikey ayraç. */
.site-footer__legal-sep {
  width: 1px; height: 14px;
  background: var(--f-line);
}

/**
 * Telefonda alt bilgi: sola yaslı tek sütun, bölümler arası ince çizgi.
 *
 * Bir ara ortalanmıştı (staj düğmesi tam genişlikken sağ-sol dengesi
 * bozuluyordu). Staj artık kendi şeridinde durduğu için hizaya gerek kalmadı:
 * marka, bağlantılar ve iletişim soldan başlar — okuma yönüyle aynı. Yalnızca
 * en alttaki telif ve yasal satırlar ortalanır.
 */
@media (max-width: 639px) {
  .site-footer__grid {
    text-align: left;
    gap: 0;
    padding-block: 26px 4px;
  }
  .site-footer .brand { justify-content: flex-start; }
  .site-footer__desc { margin-top: 10px; margin-inline: 0; max-width: none; }
  .footer-social { justify-content: flex-start; }
  .footer-social a { width: 44px; height: 44px; }
  .site-footer__title { display: none; }

  /* Bölüm sınırları: bağlantı ızgarasından ve iletişimden sonra birer çizgi. */
  .site-footer__col { padding-top: 18px; margin-top: 18px; border-top: 1px solid var(--f-line); }

  /* Kurumsal bağlantılar 2×2 ızgara; sütunlar eşit paylaşır. */
  .footer-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
    column-gap: 1rem; row-gap: 2px;
  }
  .footer-links a,
  .footer-links span { justify-content: flex-start; }
  .footer-links--contact { grid-template-columns: minmax(0, 1fr); }
  .footer-links--contact a { text-align: left; }

  .site-footer__brand { display: block; }
  .footer-links a,
  .footer-links span { min-height: 44px; }

  /* Alt bar: telif üstte, yasal bağlantılar altında — ikisi de ORTALI.
     Üst bölümler sola yaslı, kapanış ortalı: sayfayı toparlayan tek satır. */
  .site-footer__bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2px;
    padding-block: 16px;
  }
  .site-footer__legal { gap: 14px; justify-content: center; flex-wrap: wrap; }
  .site-footer__legal a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Talep durum akışı (talep sorgulama sayfası) */
.track-flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.track-flow__item {
  position: relative;
  padding: 0 0 1.4rem 2.5rem;
  display: grid;
  gap: .2rem;
}
.track-flow__item::before {
  content: "";
  position: absolute; left: 11px; top: 1.55rem; bottom: -.2rem;
  width: 2px; background: var(--line);
}
.track-flow__item:last-child { padding-bottom: 0; }
.track-flow__item:last-child::before { display: none; }
.track-flow__dot {
  position: absolute; left: 0; top: .15rem;
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--paper);
  border: 2px solid var(--line-strong);
  color: #fff;
}
.track-flow__dot svg { width: 13px; height: 13px; stroke-width: 3; }
.track-flow__label { font-size: .95rem; font-weight: 550; color: var(--muted); }
.track-flow__desc { font-size: .86rem; color: var(--body); }

/* Talep durumu da bir akıştır; tamamlanan adımlar süreç tonuyla işaretlenir. */
.track-flow__item.is-done .track-flow__dot { background: var(--step-500); border-color: var(--step-500); }
.track-flow__item.is-done .track-flow__label { color: var(--ink-2); }
.track-flow__item.is-done::before { background: var(--accent-500); opacity: .35; }

.track-flow__item.is-current .track-flow__dot {
  background: var(--brand-600); border-color: var(--brand-600);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-400) 25%, transparent);
}
.track-flow__item.is-current .track-flow__label { color: var(--brand-700); font-weight: 640; }

/* Talep geçmişi */
.track-history { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.track-history li {
  display: grid; gap: .15rem .9rem;
  padding: .65rem .9rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: .9rem;
}
@media (min-width: 640px) { .track-history li { grid-template-columns: 130px minmax(0, 1fr); align-items: baseline; } }
.track-history__time { color: var(--muted); font-size: .8rem; }
.track-history__text { color: var(--ink-2); }

/* ---- 13. Yardımcı sınıflar ve hareket ------------------------------------ */
.text-center { text-align: center; }
.text-muted { color: var(--muted); }
.mono { font-family: var(--font-mono); font-size: .92em; letter-spacing: -.01em; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; } .mt-5 { margin-top: 3rem; }
.mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; } .mb-4 { margin-bottom: 2rem; }
.w-full { width: 100%; }

/**
 * Görünüme girince yumuşak yükselme.
 * Gizleme YALNIZCA JavaScript çalışıyorken uygulanır (<html class="js">);
 * böylece betik yüklenmezse veya hata verirse içerik yine de görünür kalır.
 */
.js .reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .45s var(--ease-hero), transform .45s var(--ease-hero);
}
/* will-change yalnızca hareket sürerken açık kalır: öğe yerine oturduğunda
   tarayıcı katmanı serbest bırakır. */
.js .reveal:not(.is-visible) { will-change: opacity, transform; }
.js .reveal.is-visible { opacity: 1; transform: none; will-change: auto; }
/* İçerik öğeleri başlıktan sonra 80ms arayla gelir. */
.reveal--d1 { transition-delay: .08s; }
.reveal--d2 { transition-delay: .16s; }
.reveal--d3 { transition-delay: .24s; }
.reveal--d4 { transition-delay: .32s; }
/* Küçük ekranda 12px'lik kayma sarsıntılı duruyor; 8px'e iner. */
@media (max-width: 639px) {
  .js .reveal { transform: translateY(8px); }
}

/* Hero açılış animasyonu — sayfa yüklenir yüklenmez, kademeli */
@keyframes np-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
/**
 * Hero giriş koreografisi: başlık → slogan → paragraf → düğmeler.
 * Her adım bir öncekinden 120ms sonra başlar, 500ms sürer.
 */
.js .hero .reveal { animation: np-rise .5s var(--ease-hero) both; opacity: 1; transform: none; transition: none; }
.hero .reveal--d1 { animation-delay: .1s; }
.hero .reveal--d2 { animation-delay: .2s; }
.hero .reveal--d3 { animation-delay: .3s; }
.hero .reveal--d4 { animation-delay: .4s; }
/* Alt uç, gövde koreografisi bittikten sonra gelir: önce canlı satır,
   ardından künye hattı (düğmelerden 400ms sonra). */
.hero .reveal--d5 { animation-delay: .6s; }
.hero .reveal--d6 { animation-delay: .8s; }

/* Hero rozeti çok yavaş nefes alır — kurumsal ölçüde, dikkat dağıtmaz */
@keyframes np-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
.hero__badge { animation: np-float 7s ease-in-out 1.2s infinite; }

/* Navigasyon altı ince gösterge */
.nav__link { position: relative; }
.nav__link::after {
  content: "";
  position: absolute; left: 50%; right: 50%; bottom: 4px; height: 2px;
  border-radius: 2px; background: var(--brand-500);
  transition: left .25s var(--ease), right .25s var(--ease), opacity .25s var(--ease);
  opacity: 0;
}
.nav__link:hover::after { left: 22%; right: 22%; opacity: .55; }
.nav__link.is-active::after { left: 22%; right: 22%; opacity: 1; }
@media (max-width: 1079px) { .nav__link::after { display: none; } }

/* Kart üstünde ince marka çizgisi (hover'da açılır) */
.card--hover::before {
  content: "";
  position: absolute; left: 1.5rem; right: 1.5rem; top: -1px; height: 2px;
  border-radius: 0 0 2px 2px;
  background: linear-gradient(90deg, var(--accent-500), var(--brand-400));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease);
}
.card--hover:hover::before { transform: scaleX(1); }

/* Sayaç animasyonu sırasında rakamların zıplamaması için sabit genişlik */
.stat__value { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .hero .reveal, .hero__badge { animation: none !important; }
}

/* ---- Mobil ritim ve dokunma ölçüleri ------------------------------------- */
@media (max-width: 639px) {
  /* Bölüm dikey boşluğu telefonda sabit 56px. */
  .section { padding-block: 56px; }
  /* Foto şeridi bunun istisnasıdır: alt boşluğu bir sonraki bölümün üst
     dolgusu zaten veriyor (aşağıdaki kurala bakınız). Bu satır olmadan
     dosyanın sonundaki genel kural, yukarıdaki .lab-strip-section tanımını
     telefonda eziyor ve fotoğrafların altında 56px fazladan boşluk kalıyordu. */
  .lab-strip-section { padding-block: 1.75rem .25rem; }
  .lab-strip-section + .section { padding-top: 1.5rem; }

  /* iOS Safari 16px'in altındaki form yazılarında sayfayı yakınlaştırır. */
  .input, .textarea, .select { font-size: 16px; }
}

/**
 * Hareket azaltma tercihi.
 * Sayfa tamamen statik ve EKSİKSİZ görünür: reveal ile gizlenen içerik açılır,
 * çizilen çizgiler tam boyda durur, döngüsel animasyonlar hiç başlamaz.
 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .js .hero__media img,
  .js .cta-band::before,
  .js .hero__live-dot,
  .js .hero__mark::after { animation: none !important; }
  .js .support-tile.reveal::before,
  .js [data-journey] .journey__item:not(:last-child)::after { transform: none !important; }
  /* Slogan zaten hareketsizdir; yalnızca açılış belirmesi kapanır
     (üstteki genel kural hallediyor). */
}

/* --- "Talep numaramı unuttum" ---------------------------------------------
 * Asıl iş yukarıdaki sorgulama formudur; bu yalnızca numarasını kaybedenin
 * açacağı çıkış yoludur. Bu yüzden kapalı durur, sorgulama formundan ince bir
 * çizgiyle ayrılır ve ikincil ağırlıkta görünür.
 */
.track-forgot {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.track-forgot__head {
  display: flex; align-items: center; gap: .5rem;
  cursor: pointer;
  font-size: .95rem; font-weight: 600;
  color: var(--brand-700, var(--brand-800));
  list-style: none;
}
.track-forgot__head::-webkit-details-marker { display: none; }
.track-forgot__ic { width: 18px; height: 18px; flex: none; color: var(--accent-500); }
/* Açılıp kapandığı belli olsun: başlığın sonunda dönen bir çentik. */
.track-forgot__head::after {
  content: "";
  width: 7px; height: 7px; flex: none;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform .2s ease;
}
.track-forgot[open] .track-forgot__head::after { transform: rotate(-135deg) translate(-2px, -2px); }

/**
 * Kapalıyken gövde AÇIKÇA gizlenir.
 *
 * Tarayıcının kendi `<details>` davranışına bırakıldığında bölüm kapalı
 * görünmesine rağmen (open=false) e-posta alanı ölçülebilir yükseklikte
 * kalıyordu — yani kutu kapalı ama içeriği ekranda. Gizlemeyi tarayıcı
 * varsayılanına bırakmak yerine burada yazmak, davranışı her tarayıcıda
 * aynı ve tahmin edilebilir kılar.
 */
.track-forgot:not([open]) .track-forgot__body { display: none; }
.track-forgot__body { padding-top: .9rem; }
.track-forgot__lead {
  margin: 0 0 .75rem;
  font-size: .9rem; line-height: 1.6; color: var(--muted, #5b6b73);
  max-width: 52ch;
}
.track-forgot__row { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.track-forgot__row .input { flex: 1 1 16rem; min-width: 0; }
.track-forgot__row .btn { flex: none; }
@media (max-width: 520px) {
  /* Telefonda düğme alt satıra iner ve tam genişlik olur; yan yana
     sıkıştırıldığında ikisi de dokunulamayacak kadar daralıyordu. */
  .track-forgot__row .input,
  .track-forgot__row .btn { flex: 1 1 100%; justify-content: center; }
}

@media print {
  .site-header, .site-footer, .cta-band, .nav-toggle, .btn { display: none !important; }
  body { color: #000; }
  .card, .form-panel { border: 1px solid #ccc; box-shadow: none; }
}

/* ===========================================================================
 * PROJE KARTI — kapağın sağ kolonundaki güncel proje.
 *
 * Sitenin KENDİ kart dilinde: açık zemin, ince kenarlık, üstte marka
 * renklerinde ince şerit (Yayınlar'daki yazar kartıyla aynı aile). Üç eski
 * sürüm — cam panel, ekrana taşan fotoğraf, koyu lacivert pano — bu dilin
 * dışındaydı ve pembe suluboya arka planla hiç barışmadı.
 *
 * Fotoğraf kartın PENCERESİDİR: üstünde rozet/karartma yok, kart yüksekliğinin
 * yarısından azını kaplar. Önem vurgusu rozet + tipografi + tek pembe düğmeyle.
 * =========================================================================== */
/**
 * KART YARI SAYDAM — arka plandaki hücre dokusu içinden görünür.
 *
 * Kart tümüyle opaktı: kapağın sağ yarısında perde zaten neredeyse yok
 * (.18 → .02) ama kartın düz beyaz zemini fotoğrafı bütünüyle kapatıyordu.
 * Ziyaretçi arkada bir doku olduğunu göremiyor, kart sayfaya sonradan
 * yapıştırılmış bir kutu gibi duruyordu.
 *
 * Saydamlık tek başına yetmez: doku doğrudan yazının altına girerse kontrast
 * tesadüfe kalır. Bu yüzden zemin `backdrop-filter` ile bulanıklaştırılır —
 * arkadaki renk ve hareket kalır, ayrıntı gider, yazı okunur.
 *
 * `@supports` şart: backdrop-filter desteklemeyen tarayıcıda saydam zemin
 * okunmaz bir karta dönüşürdü. Orada kart opak kalır (aşağıdaki taban kural).
 */
.stage {
  --stage-pad: clamp(1.1rem, 2vw, 1.4rem);
  position: relative;
  display: grid;
  padding: var(--stage-pad);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  /* Taban (saydamlık desteklenmiyorsa): beyaza akan pembe ton. */
  background: linear-gradient(165deg, var(--accent-50) 0%, #fff 55%);
  box-shadow:
    0 1px 2px rgba(31, 42, 92, .05),
    0 30px 60px -42px rgba(31, 42, 92, .5);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .stage {
    background: linear-gradient(165deg,
      rgba(253, 234, 244, .74) 0%,
      rgba(255, 255, 255, .66) 55%);
    -webkit-backdrop-filter: blur(18px) saturate(1.25);
            backdrop-filter: blur(18px) saturate(1.25);
    /* Cam kenarı: saydam yüzeyde koyu çizgi yerine açık bir parlama. */
    border-color: rgba(255, 255, 255, .7);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .6),
      0 1px 2px rgba(31, 42, 92, .05),
      0 30px 60px -42px rgba(31, 42, 92, .55);
  }
}
/* Üst şerit: markanın iki rengi. Kartı sayfaya bağlayan tek süs. */
.stage::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; z-index: 1;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-500), var(--brand-600));
}

.stage__slide {
  grid-area: 1 / 1;
  display: flex; flex-direction: column;
  min-width: 0;
}

/* Rozet — kartın ilk satırı. Projenin en değerli bilgisi fotoğraftan önce
   okunur ve hangi fotoğraf gelirse gelsin görünür kalır. */
/* Rozet satırı rozetsiz slaytta da yer tutar: yükseklik rozetin kendi
   yüksekliğine sabitlenir, böylece slaytlar arasında fotoğraf zıplamaz. */
.stage__head { display: flex; align-items: center; min-height: 1.65rem; margin: 0 0 .8rem; }
.stage__badge {
  display: inline-flex; align-items: center;
  padding: .4rem .7rem;
  border-radius: 999px;
  background: var(--accent-600);
  box-shadow: 0 8px 20px -10px rgba(156, 0, 85, .7);
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}

/* Fotoğraf — pencere: yuvarlak köşe, üstünde hiçbir şey yok. */
.stage__photo {
  position: relative;
  flex: none;
  border-radius: 13px;
  overflow: hidden;
}
.stage__media {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 13rem;
  max-height: min(18rem, 32vh);
}
.stage__media img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .6s var(--ease);
}
.stage__slide:hover .stage__media img { transform: scale(1.03); }
.stage__media--plain {
  position: relative;
  display: grid; place-items: center;
  background: var(--surface-2);
  color: var(--accent-400);
}
.stage__icon { width: 40px; height: 40px; position: relative; }

/* Bilgi — kartın kendi zemininde, mürekkep renklerinde. */
.stage__info {
  flex: 1 1 auto;
  display: flex; flex-direction: column; gap: .3rem;
  padding-top: .95rem;
}
.stage__meta {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .55rem;
  margin: 0;
  font-family: var(--font-mono); font-size: .68rem;
  letter-spacing: .07em; text-transform: uppercase;
}
.stage__cat { color: var(--accent-600); font-weight: 650; }
.stage__metasep { color: var(--line-strong); }
.stage__period {
  display: inline-flex; align-items: center; gap: .4rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.stage__live {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, .5);
  animation: stage-pulse 2.2s ease-out infinite;
}
@keyframes stage-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, .5); }
  70%  { box-shadow: 0 0 0 7px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* Başlık EN FAZLA iki satır: kart slayttan slayta boy değiştirmez. */
.stage__title {
  display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  font-size: clamp(1.2rem, 1.8vw, 1.45rem);
  font-weight: 680; line-height: 1.3;
  letter-spacing: -.018em;
  color: var(--ink);
}
/* Özet iki satır, ölçülü: kart anlatmaz, davet eder. */
.stage__sum {
  display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  margin: .1rem 0 0;
  font-size: .89rem; line-height: 1.55;
  color: var(--body);
}

/* Özellik satırı (.stage__feats / .stage__featsep) 02.09.2026'da kaldırıldı:
   bastığı üç yöntem, hemen üstündeki özetin ilk cümlesiyle birebir aynıydı.
   Markup'ı home.php'den çıktı, kuralları da burada durmuyor. */

/* Eylem satırı kartın ALTINA yaslanır; sağdaki gezinme grubuna yer bırakır. */
.stage__actions {
  display: flex; align-items: center;
  margin-top: auto;
  padding-top: .9rem;
  padding-right: 7.5rem;
}
/**
 * EYLEM: DOLU DÜĞME DEĞİL, OK'LU BAĞLANTI (02.09.2026).
 *
 * Kapakta iki dolu düğme vardı: solda lacivert "Hizmetleri İncele", kartta
 * pembe "Çalışmayı İncele". İkisi de başrol olmaya çalışınca ilk ekranda tek
 * bir "buraya tıkla" sinyali kalmıyordu; göz doygun pembe düğmeye gidiyor,
 * sitenin asıl iş hedefi olan hizmet düğmesi eziliyordu ("proje kapağı ele
 * geçirdi" geri bildirimi).
 *
 * Dolu düğme SOLDA kalır. Kart gücünü zaten fotoğraftan, rozetten ve tamamı
 * tıklanabilir gövdesinden alıyor — vitrin bir şey kaybetmez. Eylem satırı
 * sitenin kendi ok'lu bağlantı dilinde yazıldı (bkz. .pubs-card__go,
 * .lead-card__go); punto oradakilerden bir tık büyük, çünkü bu kapağın kartı.
 *
 * `position: static` bilerek duruyor: aşağıdaki ::after'ın kartın tamamına
 * yayılması için konumlanmış en yakın atanın .stage__slide olması gerekir.
 */
.stage__cta {
  position: static;
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .95rem; font-weight: 650;
  color: var(--accent-600);
  text-decoration: none;
}
.stage__cta:hover { color: var(--accent-700); text-decoration: underline; }
/* Bağlantının ::after'ı kartın tamamını kaplar: karta nerede tıklanırsa
   tıklansın proje sayfasına gidilir. Gezinme z-index ile üstte kalır. */
.stage__cta::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.stage__cta svg { width: 15px; height: 15px; transition: transform .2s var(--ease); }
.stage__slide:hover .stage__cta svg { transform: translateX(3px); }

/* Gezinme — kartın sağ altında: sayaç + iki ok, eylemle aynı çizgide. */
.stage__nav {
  position: absolute; right: var(--stage-pad); bottom: var(--stage-pad);
  z-index: 3;
  display: flex; align-items: center; gap: .45rem;
}
.stage__counter {
  padding-right: .15rem;
  font-family: var(--font-mono); font-size: .74rem; font-weight: 650;
  letter-spacing: .05em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.stage__arrow {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: #fff;
  color: var(--ink-2);
  cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.stage__arrow:hover {
  background: var(--accent-600);
  border-color: var(--accent-600);
  color: #fff;
}
.stage__arrow:focus-visible { outline: 2px solid var(--accent-500); outline-offset: 2px; }
.stage__arrow svg { width: 16px; height: 16px; }

/* Çapraz geçiş: iki slaydın opaklık toplamı her an 1'dir (kart boşalmaz). */
.stage--rotates .stage__slide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .4s var(--ease), visibility 0s linear .4s;
}
.stage--rotates .stage__slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .4s var(--ease), visibility 0s;
}

@media (max-width: 1279px) and (min-width: 1024px) {
  .stage__media { min-height: 11.5rem; }
  .stage__title { font-size: 1.15rem; }
  .stage__actions { padding-right: 6.5rem; }
}
/* Kısa dizüstü ekranı (1366×640 gibi): kart 7px taşıyordu. Fotoğraf tabanı
   iner, kapak yine tek ekranda kalır. */
@media (max-height: 700px) and (min-width: 1024px) {
  .stage__media { min-height: 10.5rem; }
  .stage__info { padding-top: .7rem; }
  .stage__head { margin-bottom: .6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .stage__media img,
  .stage__cta svg,
  .stage__arrow,
  .stage--rotates .stage__slide { transition: none; }
  .stage__slide:hover .stage__media img { transform: none; }
  .stage__live { animation: none; }
}

/* ===========================================================================
 * BİLİMSEL KÜNYE — ekip profil sayfasındaki kariyer, ödül, yayın ve üyelik
 * bölümleri; Hakkımızda'daki güven şeridi; proje sayfasındaki yürütücü kartı.
 *
 * Yeni bir tasarım dili KURULMADI: renkler, tipografi ve kart kabı sayfanın
 * kendi bileşenlerinden gelir (.tm-block, .abt-kicker, .tm-chip). Buradaki
 * kurallar yalnızca bu bölümlere özgü YERLEŞİMİ tarif eder.
 * =========================================================================== */

/* --- Rakamlarla: künyenin bir bakışta özeti ------------------------------- */
.tm-stats {
  display: flex; flex-wrap: wrap;
  gap: 1.4rem 2rem;
  margin: 1.15rem 0 0; padding: 0;
  list-style: none;
}
.tm-stat { display: flex; flex-direction: column; gap: .1rem; }
.tm-stat__num {
  font-size: 1.5rem; font-weight: 680; line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--accent-600);
  font-variant-numeric: tabular-nums;
}
.tm-stat__label {
  font-size: .78rem; line-height: 1.35;
  color: var(--muted);
  max-width: 9rem;
}

/* --- Kariyer zaman çizelgesi --------------------------------------------- */
/**
 * Dikey çizgi maddelerin SOLUNDAN geçer ve her maddede bir nokta ile kesilir.
 * Çizgi ::before ile listenin kendisine çizilir: her maddeye ayrı ayrı
 * çizdirmek, son maddenin altında havada kalan bir kuyruk bırakıyordu.
 */
.tm-timeline {
  position: relative;
  margin: 0; padding: 0 0 0 1.35rem;
  list-style: none;
}
.tm-timeline::before {
  content: "";
  position: absolute; left: 3px; top: .45rem; bottom: .45rem;
  width: 1px;
  background: var(--line-strong);
}
.tm-timeline__item {
  position: relative;
  display: grid;
  gap: .15rem .9rem;
  padding-bottom: 1.15rem;
}
.tm-timeline__item:last-child { padding-bottom: 0; }
.tm-timeline__item::before {
  content: "";
  position: absolute; left: -1.35rem; top: .42rem;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent-500);
  box-shadow: 0 0 0 3px var(--surface, #f6f8fa);
}
.tm-timeline__year {
  font-family: var(--font-mono); font-size: .72rem;
  letter-spacing: .04em;
  color: var(--muted);
  white-space: nowrap;
}
.tm-timeline__title {
  margin: 0;
  font-size: 1rem; font-weight: 640; line-height: 1.35;
  color: var(--ink);
}
.tm-timeline__detail {
  margin: .15rem 0 0;
  font-size: .9rem; line-height: 1.6;
  color: var(--body);
}
/* Masaüstünde yıl kendi kolonunda durur: gözün soldan aşağı takip edeceği
   tek bir tarih sütunu oluşur. */
@media (min-width: 720px) {
  .tm-timeline__item {
    grid-template-columns: 7.5rem minmax(0, 1fr);
    align-items: start;
  }
  .tm-timeline__year { padding-top: .12rem; }
}

/* --- Ödüller -------------------------------------------------------------- */
.tm-awards { margin: 0; padding: 0; list-style: none; display: grid; gap: .85rem; }
.tm-award {
  display: grid; gap: .1rem .9rem;
  padding-bottom: .85rem;
  border-bottom: 1px solid var(--line);
}
.tm-award:last-child { padding-bottom: 0; border-bottom: 0; }
.tm-award__year {
  font-family: var(--font-mono); font-size: .72rem;
  letter-spacing: .04em;
  color: var(--accent-600);
  white-space: nowrap;
}
.tm-award__title {
  margin: 0;
  font-size: .97rem; font-weight: 620; line-height: 1.4;
  color: var(--ink);
}
.tm-award__detail {
  margin: .1rem 0 0;
  font-size: .86rem; line-height: 1.55;
  color: var(--muted);
}
@media (min-width: 720px) {
  .tm-award { grid-template-columns: 7.5rem minmax(0, 1fr); align-items: start; }
  .tm-award__year { padding-top: .16rem; }
}

/* --- Seçilmiş yayınlar ---------------------------------------------------- */
.tm-pubs { margin: 0; padding: 0; list-style: none; display: grid; gap: .9rem; }
.tm-pub {
  padding-left: .85rem;
  border-left: 2px solid var(--line-strong);
}
.tm-pub__title {
  margin: 0;
  font-size: .95rem; font-weight: 600; line-height: 1.45;
  color: var(--ink);
}
.tm-pub__title a { color: inherit; text-decoration: none; }
.tm-pub__title a:hover { color: var(--accent-600); text-decoration: underline; }
.tm-pub__meta {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .6rem;
  margin: .2rem 0 0;
  font-size: .82rem; line-height: 1.5;
  color: var(--muted);
}
.tm-pub__year {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ===========================================================================
 * GÜVEN ŞERİDİ — Hakkımızda, ekip bölümünün hemen üstünde.
 * =========================================================================== */
.trust-strip {
  border-block: 1px solid var(--line);
  background: var(--surface, #f6f8fa);
}
.trust-strip__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 1.25rem;
  padding-block: clamp(1.6rem, 3.5vw, 2.4rem);
}
@media (min-width: 900px) {
  .trust-strip__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.trust-item {
  display: flex; flex-direction: column; gap: .3rem;
  padding-left: .9rem;
  border-left: 2px solid var(--accent-500);
}
.trust-item__num {
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  font-weight: 680; line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--ink);
}
.trust-item__label {
  font-size: .84rem; line-height: 1.45;
  color: var(--muted);
}
/* Baglantili kutu: ok isareti tiklanabilirligi soyler. */
.trust-item--link a {
  display: flex; flex-direction: column; gap: .3rem;
  text-decoration: none; color: inherit;
}
.trust-item--link .trust-item__num::after {
  content: "→";
  margin-left: .4rem;
  font-size: .7em; font-weight: 500;
  color: var(--accent-500);
  transition: transform .2s var(--ease);
  display: inline-block;
}
.trust-item--link a:hover .trust-item__num { color: var(--accent-700); }
.trust-item--link a:hover .trust-item__num::after { transform: translateX(3px); }

/* ===========================================================================
 * PROJE SAYFASI — bilimsel yürütücü kartı + destek programı bloğu.
 * =========================================================================== */
.lead-card {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1.1rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.lead-card:hover {
  border-color: var(--accent-300, #f3b7d2);
  box-shadow: 0 16px 32px -22px rgba(31, 42, 92, .4);
  text-decoration: none;
}
/* Kartin ici <a> oldugu icin butun parcalar <span>. Satir satir dizilmeleri
   icin blok yapilmalari SART: aksi halde rozet, ad, kurum ve vurgu tek satirda
   birbirine giriyor. */
.lead-card__photo,
.lead-card__body,
.lead-card__role,
.lead-card__name,
.lead-card__org,
.lead-card__note { display: block; }

.lead-card__photo {
  flex: none;
  width: 76px; height: 76px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface-2);
}
.lead-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lead-card__body { min-width: 0; }
.lead-card__role {
  margin: 0;
  font-family: var(--font-mono); font-size: .66rem;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--accent-600);
}
.lead-card__name {
  margin: .25rem 0 0;
  font-size: 1rem; font-weight: 660; line-height: 1.3;
  color: var(--ink);
}
.lead-card__org {
  margin: .1rem 0 0;
  font-size: .82rem; color: var(--muted);
}
.lead-card__note {
  margin: .5rem 0 0;
  font-size: .88rem; line-height: 1.6;
  color: var(--body);
}
.lead-card__go {
  display: inline-flex; align-items: center; gap: .35rem;
  margin-top: .55rem;
  font-size: .84rem; font-weight: 600;
  color: var(--accent-600);
}

/* Destek programı bloğu — ana sayfadaki rozetin doğrulaması. */
.funding-note {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: .95rem 1.05rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent-500);
  border-radius: 12px;
  background: var(--surface, #f6f8fa);
}
.funding-note__icon { flex: none; color: var(--accent-600); }
.funding-note__icon svg { width: 20px; height: 20px; }
.funding-note__title {
  margin: 0;
  font-size: .92rem; font-weight: 650;
  color: var(--ink);
}
.funding-note__text {
  margin: .25rem 0 0;
  font-size: .87rem; line-height: 1.6;
  color: var(--body);
}

/* ===========================================================================
 * PORTFOLYO DETAYI — süreç akışı, hücre serileri, kazanımlar (göç 020).
 *
 * Üçü de içerik VARSA çizilir; boşsa hiç basılmaz. Kart dili sayfanın geri
 * kalanıyla aynı: açık zemin, 1px çizgi, gölge yok.
 * =========================================================================== */

/* --- Süreç akışı: numaralı adımlar, aralarında ok --- */
.flow {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1.6rem;
}
.flow__step {
  position: relative;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent-500);
  border-radius: var(--radius-sm);
  background: var(--paper);
}
/* Ok: adımlar arasında durur, sonuncudan sonra çizilmez. */
.flow__step::after {
  content: "";
  position: absolute; left: 50%; bottom: -1.15rem;
  width: 10px; height: 10px;
  border-right: 2px solid var(--accent-300);
  border-bottom: 2px solid var(--accent-300);
  transform: translateX(-50%) rotate(45deg);
}
.flow__step:last-child::after { content: none; }
/* Üst satır: ikon solda, adım numarası sağda — ikisi aynı hizada. */
.flow__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; margin: 0;
}
.flow__icon {
  width: 26px; height: 26px;
  color: var(--accent-500);
  stroke-width: 1.5;
}
.flow__no {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: .68rem; letter-spacing: .12em;
  color: var(--muted);
}
.flow__title {
  margin: .3rem 0 0;
  font-size: .95rem; font-weight: 650; line-height: 1.35;
  color: var(--ink);
}
.flow__text {
  margin: .3rem 0 0;
  font-size: .84rem; line-height: 1.55;
  color: var(--body);
}
/* Geniş ekranda yatay akar; ok sağa döner. */
@media (min-width: 860px) {
  .flow { grid-auto-flow: column; grid-auto-columns: 1fr; gap: 1.75rem; }
  .flow__step::after {
    left: auto; right: -1.2rem; bottom: auto; top: 50%;
    transform: translateY(-50%) rotate(-45deg);
  }
}

/**
 * HİZA — kartların içindeki üç satır (numara / başlık / açıklama) bütün
 * kartlarda AYNI çizgide başlar.
 *
 * Bunsuz, başlığı tek satır olan kartın açıklaması ötekilerden yukarıda
 * kalıyor ve şerit zıplıyor gibi görünüyordu. Çözüm subgrid: her kart
 * kendi kutusunu çizmeye devam eder ama satırlarını ana ızgaradan alır,
 * satır yüksekliği en uzun içeriğe göre belirlenir.
 *
 * Satır arası boşluk 0'dır; kart içi boşluğu öğelerin kendi margin'leri
 * verir (aksi halde ızgaranın 1.75rem'i kartın içine de girerdi).
 * Subgrid desteklenmeyen tarayıcıda kartlar eski haliyle çalışır.
 */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 860px) {
    .flow { grid-template-rows: auto auto 1fr; row-gap: 0; }
    .flow__step {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: span 3;
      row-gap: 0;
    }
  }
}

/**
 * Akışın SONUCU — adım kartlarından bilerek farklı: numarasız, oksuz,
 * tam genişlikte ve pembe tonlu. Süreç yukarıda biter, kazanım burada
 * söylenir; ikisi aynı görünürse sonuç da bir basamak sanılıyor.
 */
.flow-result {
  display: flex; align-items: flex-start; gap: .85rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--accent-100);
  border-left: 3px solid var(--accent-500);
  border-radius: var(--radius-sm);
  background: var(--accent-50);
}
.flow-result__icon {
  flex: none; width: 26px; height: 26px;
  color: var(--accent-600);
  stroke-width: 1.5;
}
.flow-result__title {
  margin: 0;
  font-size: .98rem; font-weight: 680; line-height: 1.35;
  color: var(--ink);
}
.flow-result__text {
  margin: .25rem 0 0;
  font-size: .88rem; line-height: 1.55;
  color: var(--body);
}

/* --- Hücre serileri: ad + kullanım amacı --- */
.celllines {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .9rem;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.celllines__item {
  padding: .95rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
}
/**
 * Renkli nokta yalnızca kartları ayırır — sınıflandırma anlamı taşımaz.
 *
 * Ad iki satıra taşabildiği için (ör. "Spermatogonyal Kök Hücreler") alan
 * iki satırlık yer tutar: açıklamalar bütün kartlarda aynı çizgide başlar.
 * Nokta üste yaslanır ve ilk satırın ortasına gelecek kadar aşağı alınır;
 * ortalanmış bırakılsa iki satırlık adda satır arasına düşüyordu.
 */
/* Simge dördünde de aynıdır (hepsi hücre serisi); kartları RENK ayırır. */
.celllines__icon {
  width: 26px; height: 26px;
  margin-bottom: .55rem;
  color: var(--brand-500);
  stroke-width: 1.5;
}
.celllines__name {
  display: block;
  margin: 0;
  min-height: 2.6em;
  font-size: .93rem; font-weight: 650; line-height: 1.3;
  color: var(--ink);
}
.celllines__item--1 .celllines__icon { color: #7c5cbf; }
.celllines__item--2 .celllines__icon { color: #2e9e78; }
.celllines__item--3 .celllines__icon { color: var(--accent-400); }
.celllines__text {
  margin: .35rem 0 0;
  font-size: .84rem; line-height: 1.55;
  color: var(--body);
}

/**
 * Kazanımlar: işaretli liste, EN ÇOK İKİ SÜTUN.
 *
 * Önce auto-fit ile dizilirken geniş ekranda dört sütuna çıkıyordu: altı
 * madde 4+2 diziliyor, alt satır yarım kalıyor ve maddeler ortadan
 * kırpılıyordu. Gözün soldan sağa mı yukarıdan aşağı mı okuyacağı da belli
 * olmuyordu. İki sütunda altı madde 3+3 oturur ve satırlar bütün kalır.
 */
.gains {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .7rem 2.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .gains { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.gains__item {
  display: flex; align-items: flex-start; gap: .6rem;
  font-size: .92rem; line-height: 1.55;
  color: var(--body);
}
.gains__icon {
  flex: none; width: 17px; height: 17px; margin-top: .18rem;
  color: var(--accent-500);
}

/* ===========================================================================
 * HİZMET DETAYI — "bunu neden yapabiliyoruz" kanıt satırı.
 * =========================================================================== */
.svc-evidence {
  display: flex; align-items: flex-start; gap: .75rem;
  margin-top: .9rem;
  padding: .9rem 1rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface, #f6f8fa);
  font-size: .88rem; line-height: 1.65;
  color: var(--body);
}
.svc-evidence__icon { flex: none; color: var(--accent-600); }
.svc-evidence__icon svg { width: 18px; height: 18px; }

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

/* Profildeki seckiden tam listeye gecis. */
.tm-pubs-all {
  display: inline-block;
  margin-top: 1rem;
  font-size: .88rem; font-weight: 600;
  color: var(--accent-600);
  text-decoration: none;
}
.tm-pubs-all:hover { text-decoration: underline; }

/* ===========================================================================
 * YAYINLAR SAYFASI — /yayinlar  ·  "Bilimsel Dosya"
 *
 * Sayfa BEŞ BANTTAN oluşan bir hikâye anlatır:
 *   1) Açılış (kim) · 2) Sayılar (ne kadar) · 3) Dergiler (nerede)
 *   4) Liste (ne)   · 5) Kapanış (çalışalım)
 *
 * Ritmi BANTLAR verir, kutular değil. Önceki sürümler kutu yığınıydı ve her
 * seferinde "sıradan" bulundu. Bu sayfada TEK kutulu öğe vardır — yazar kartı
 * — ve tek gölge ondadır; göz oraya gider.
 *
 * Renk, tipografi ve köşe değerlerinin tamamı mevcut token'lardan gelir.
 * Yeni renk, yeni font yok.
 * =========================================================================== */

/* ---------------------------------------------------------------------------
 | BANT 1 — AÇILIŞ
 * ------------------------------------------------------------------------ */
.pubs-open {
  padding-block: clamp(1.4rem, 3vw, 2.2rem) clamp(2.2rem, 5vw, 3.6rem);
  background: linear-gradient(180deg, var(--surface-2) 0%, #fff 78%);
  border-bottom: 1px solid var(--line);
}
.pubs-open__grid {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: center;
  margin-top: clamp(1rem, 2.5vw, 1.75rem);
}
@media (min-width: 1024px) {
  .pubs-open__grid { grid-template-columns: 7fr 5fr; }
}
.pubs-open__lead { min-width: 0; }
.pubs-open__title {
  margin: .55rem 0 0;
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  font-weight: 690; line-height: 1.08;
  letter-spacing: -.03em;
  text-wrap: balance;
  color: var(--ink);
}
.pubs-open__text {
  max-width: 34rem;
  margin: 1.1rem 0 0;
  font-size: clamp(.95rem, 1.5vw, 1.05rem); line-height: 1.7;
  color: var(--body);
}

/* Künye satırı (yazar · ORCID) — pill değil, düz metin. */
.pubs-by {
  display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .7rem;
  margin: 1.35rem 0 0;
  font-size: .92rem;
  color: var(--body);
}
.pubs-by__sep { color: var(--line-strong); }
.pubs-by__name {
  font-weight: 650;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-200);
  padding-bottom: 1px;
}
.pubs-by__name:hover { color: var(--accent-700); border-bottom-color: var(--accent-500); text-decoration: none; }
.pubs-by__orcid {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--font-mono); font-size: .8rem;
  color: var(--muted);
  text-decoration: none;
}
.pubs-by__orcid:hover { color: var(--accent-700); text-decoration: none; }
/* ORCID'in kendi yeşili markanın dışında; işaret marka pembesiyle çizilir. */
.pubs-by__mark {
  display: grid; place-items: center;
  width: 17px; height: 17px;
  border-radius: 50%;
  background: var(--accent-600);
  font-family: var(--font-sans); font-size: .58rem; font-weight: 700; font-style: italic;
  color: #fff;
}

/**
 * YAZAR KARTI — sayfanın insanı ve TEK kutusu.
 *
 * Sayfanın önceki sürümlerinde hiç insan yoktu; hocanın fotoğrafı elimizdeydi
 * ve kullanılmıyordu. Kurumsal güven insanla kurulur. Kart ekip kaydından
 * beslenir: fotoğraf panelden değişince burası da değişir.
 */
.pubs-card {
  position: relative;
  padding: clamp(1.25rem, 2.6vw, 1.7rem);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(165deg, var(--accent-50) 0%, #fff 62%);
  box-shadow: 0 24px 48px -36px rgba(31, 42, 92, .4);
}
/* Bilimsel künye estetiği: sol üstte ince pembe L köşe. */
.pubs-card::before {
  content: "";
  position: absolute; top: 14px; left: 14px;
  width: 18px; height: 18px;
  border-top: 1.5px solid var(--accent-400);
  border-left: 1.5px solid var(--accent-400);
  border-top-left-radius: 5px;
}
.pubs-card__top { display: flex; align-items: center; gap: 1rem; }
.pubs-card__photo {
  flex: none;
  width: 96px; height: 96px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface-2);
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--line);
}
.pubs-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pubs-card__id { min-width: 0; }
.pubs-card__name {
  margin: 0;
  font-size: 1.05rem; font-weight: 660; line-height: 1.3;
  letter-spacing: -.012em;
  color: var(--ink);
}
.pubs-card__org {
  margin: .25rem 0 0;
  font-size: .82rem; line-height: 1.45;
  color: var(--muted);
}
.pubs-card__facts {
  margin: 1.1rem 0 0; padding: 1rem 0 0;
  border-top: 1px solid var(--accent-100);
  list-style: none;
  display: grid; gap: .4rem;
}
.pubs-card__facts li {
  position: relative;
  padding-left: .95rem;
  font-family: var(--font-mono); font-size: .72rem; line-height: 1.5;
  letter-spacing: .01em;
  color: var(--ink-2);
}
.pubs-card__facts li::before {
  content: "";
  position: absolute; left: 0; top: .48em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent-500);
}
/* ORCID kartın içinde: kimlik numarası kimliğin yanında durur. */
.pubs-card__orcid {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-top: .85rem;
  font-family: var(--font-mono); font-size: .74rem;
  color: var(--muted);
  text-decoration: none;
}
.pubs-card__orcid:hover { color: var(--accent-700); text-decoration: none; }

.pubs-card__go {
  display: inline-flex; align-items: center; gap: .35rem;
  margin-top: 1.1rem;
  font-size: .85rem; font-weight: 640;
  color: var(--accent-600);
  text-decoration: none;
}
.pubs-card__go:hover { text-decoration: underline; }

@media (max-width: 1023px) {
  .pubs-card__photo { width: 72px; height: 72px; }
}

/* ---------------------------------------------------------------------------
 | BANT 2 — SAYILAR. Sayfanın tek koyu şeridi.
 |
 | Koyu renk bir dönem AÇILIŞI kaplıyordu ve site bütünlüğünü bozuyordu.
 | Sayfanın ortasında dar bir vurgu şeridi olarak aynı renk uyum bozmaz,
 | tam tersine sayfaya kurumsal ağırlık verir.
 * ------------------------------------------------------------------------ */
.pubs-figs {
  padding-block: clamp(2rem, 4vw, 3rem);
  background: linear-gradient(160deg, var(--brand-800) 0%, var(--brand-900) 100%);
  color: #fff;
}
.pubs-figs__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.6rem 1.25rem;
  margin: 0;
}
/**
 * Geniş ekranda ALTI EŞİT SÜTUN — esnek dizilim değil.
 *
 * Esnek dizilimde altıncı rakam ("1 patent") tek başına alt satıra düşüyor ve
 * bandı 201px'ten 308px'e şişiriyordu; üstelik ilk figürün etiketi iki satır
 * olduğu için diğerleriyle hizası da tutmuyordu. Izgara ikisini birden çözer:
 * tek satır garanti, sütunlar eşit.
 */
@media (min-width: 1100px) {
  .pubs-figs__row {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0;
    align-items: start;
  }
}
@media (min-width: 700px) and (max-width: 1099px) {
  .pubs-figs__row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem 0; }
}
.pubs-fig { position: relative; }
@media (max-width: 699px) {
  /* Telefonda ilk figür tam satır, kalanlar ikişerli. */
  .pubs-fig--lead { grid-column: 1 / -1; }
  .pubs-fig + .pubs-fig { padding-top: 0; }
}
@media (min-width: 700px) {
  /* Figürler arası ince dikey ayraç. */
  .pubs-fig + .pubs-fig { padding-left: clamp(1.1rem, 2.2vw, 1.9rem); }
  .pubs-fig + .pubs-fig::before {
    content: "";
    position: absolute; left: 0; top: .35rem; bottom: .35rem;
    width: 1px;
    background: rgba(255, 255, 255, .16);
  }
}
.pubs-fig__num {
  margin: 0;
  font-size: 1.7rem; font-weight: 700; line-height: 1;
  letter-spacing: -.03em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.pubs-fig--lead .pubs-fig__num { font-size: clamp(2.2rem, 3.4vw, 2.9rem); }
/* Hiyerarşi renkle değil çizgiyle: ilk figürün altında kısa pembe vurgu. */
.pubs-fig--lead .pubs-fig__num::after {
  content: "";
  display: block;
  width: 28px; height: 3px;
  margin-top: .55rem;
  border-radius: 2px;
  background: var(--accent-500);
}
.pubs-fig__label {
  max-width: 12rem;
  margin: .5rem 0 0;
  font-family: var(--font-mono); font-size: .66rem;
  letter-spacing: .1em; text-transform: uppercase;
  line-height: 1.5;
  color: rgba(255, 255, 255, .74);
}
.pubs-fig--lead .pubs-fig__label { font-size: .7rem; color: rgba(255, 255, 255, .86); }

/* ===========================================================================
 * BANT 3 — ARAŞTIRMA ALANLARI.
 *
 * Dergiler ÖNCE 14 hücreli bir ızgaraydı (444px yüksekliğinde). Aynı 14 ad
 * aşağıdaki listede de geçtiği için sayfa bilgiyi iki kez gösteriyor, okuyan
 * kişi de "yukarıda dergi diyor, aşağıda makale diyor" diye takılıyordu.
 *
 * Izgara tek satıra indi. Dergiler hâlâ görünür ve tıklanır (listedeki
 * yayınına götürür) ama artık listeyle yarışmıyor: burası künye, aşağısı
 * içerik.
 * =========================================================================== */
.pubs-facts {
  padding-block: clamp(1.4rem, 3vw, 2rem);
  border-bottom: 1px solid var(--line);
  background: #fff;
}
.pubs-facts__list { margin: 0; display: grid; gap: .85rem; }
.pubs-fact { display: grid; gap: .35rem .9rem; }
@media (min-width: 800px) {
  .pubs-fact { grid-template-columns: 9.5rem minmax(0, 1fr); align-items: baseline; }
}
.pubs-fact__label {
  margin: 0;
  font-family: var(--font-mono); font-size: .66rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
}
.pubs-fact__body {
  margin: 0;
  font-size: .9rem; line-height: 1.8;
  color: var(--body);
}
.pubs-fact__sep { margin: 0 .3rem; color: var(--line-strong); }




/* ---------------------------------------------------------------------------
 | BANT 4 — LİSTE. Akademik belge: kutu yok, çizgi var.
 * ------------------------------------------------------------------------ */
.pubs-body {
  padding-block: clamp(2.2rem, 4.5vw, 3.4rem);
  background: var(--surface, #f6f8fa);
  border-top: 1px solid var(--line);
}

/* Öne çıkan kayıt — listenin en yenisi. */
.pubs-lead {
  position: relative;
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
  max-width: 58rem;
  margin: 0 0 clamp(1.75rem, 3.5vw, 2.5rem);
  padding: 0 0 clamp(1.5rem, 3vw, 2rem) clamp(1.1rem, 2.2vw, 1.5rem);
  border-bottom: 1px solid var(--line-strong);
}
.pubs-lead::before {
  content: "";
  position: absolute; left: 0; top: .4rem; bottom: clamp(1.5rem, 3vw, 2rem);
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--accent-500), var(--accent-200));
}
/* Etiketteki yıl: liste 2025'ten başlıyor, kapsamdaki 2026 bu spottaki
   kayıt. Yıl etikete girince "2026 nerede?" sorusu doğmuyor. */
.pubs-lead__eyebrow-year {
  margin-left: .5rem;
  padding-left: .5rem;
  border-left: 1px solid var(--accent-200);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.pubs-lead__eyebrow {
  margin: 0 0 .7rem;
  font-family: var(--font-mono); font-size: .66rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent-600);
}
/* Dergi adı artık başlığın ÜSTÜNDE değil, künye satırının içinde. */
.pubs-lead__journal { font-weight: 650; color: var(--ink-2); }
.pubs-lead__title {
  margin: 0;
  font-size: clamp(1.15rem, 2.4vw, 1.45rem); font-weight: 660; line-height: 1.4;
  letter-spacing: -.018em;
  text-wrap: pretty;
  color: var(--ink);
}
.pubs-lead__title a { color: inherit; text-decoration: none; }
.pubs-lead__title a::after { content: ""; position: absolute; inset: 0; }
.pubs-lead--link:hover .pubs-lead__title a { color: var(--accent-700); }
.pubs-lead__title a:focus-visible { outline: none; }
.pubs-lead:has(a:focus-visible) { outline: 2px solid var(--accent-500); outline-offset: 4px; }
.pubs-lead__meta {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .5rem;
  margin: .55rem 0 0;
  font-family: var(--font-mono); font-size: .74rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.pubs-lead__go {
  display: inline-flex; align-items: center; gap: .35rem;
  margin-top: .9rem;
  font-size: .85rem; font-weight: 640;
  color: var(--accent-600);
}
.pubs-lead__go-mark { display: inline-block; transition: transform .18s var(--ease); }
.pubs-lead--link:hover .pubs-lead__go-mark { transform: translate(2px, -2px); }

.pubs-doc {
  margin: 0; padding: 0;
  list-style: none;
  border-top: 2px solid var(--ink);
  max-width: 58rem;
}
.pubs-row {
  position: relative;
  /* Çıpadan gelindiğinde yapışkan başlığın (77px) altına düşmesin. */
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
  display: grid;
  gap: .15rem .5rem;
  padding: clamp(.95rem, 2vw, 1.25rem) .75rem;
  margin-inline: -.75rem;
  border-bottom: 1px solid var(--line);
  transition: background .18s var(--ease);
}
@media (min-width: 760px) {
  /* Yıl | içerik | bağlantı. Yıl kenar boşluğunda asılıdır. */
  .pubs-row {
    grid-template-columns: 4.5rem minmax(0, 1fr) auto;
    align-items: baseline;
    gap: .2rem 1.5rem;
  }
}
/* Bant zemini griyken satırın BEYAZA dönmesi, gölge çizmeden "kalkma" hissi
   verir — kutu eklemeden tıklanabilirliği söylemenin yolu. */
.pubs-row--link:hover { background: #fff; }
.pubs-row--link:hover .pubs-row__doi { color: var(--accent-700); }
.pubs-row--link:hover .pubs-row__doi-mark { transform: translate(2px, -2px); }

.pubs-row__year {
  font-family: var(--font-mono);
  font-size: .88rem; font-weight: 650;
  letter-spacing: .01em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
@media (min-width: 760px) {
  /* Yıl, o yılın kayıtları boyunca ekranda kalır. */
  .pubs-row__year { position: sticky; top: calc(var(--header-h) + 1rem); }
}
@media (max-width: 759px) {
  .pubs-row__year:empty { display: none; }
}
.pubs-row__body { min-width: 0; }
/**
 * Dergi künyesi BAŞLIĞIN ALTINDA ve sakin.
 *
 * Önce başlığın üstündeydi; pembe, büyük harf ve monospace olduğu için satırın
 * en gürültülü öğesiydi. Listeyi tarayan göz makalenin konusunu değil dergi
 * adlarını yakalıyor, üstelik aynı yazı yukarıdaki dergi şeridinde de geçtiği
 * için "bu satır dergi mi makale mi?" karışıyordu. Aranan şey başlıktır.
 */
.pubs-row__source {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .45rem;
  margin-top: .3rem;
  font-size: .8rem;
  color: var(--muted);
}
.pubs-row__journal { font-weight: 600; color: var(--ink-2); }
.pubs-row__vol { font-variant-numeric: tabular-nums; }
.pubs-row__title {
  display: block;
  font-size: 1rem; font-weight: 600; line-height: 1.55;
  letter-spacing: -.008em;
  text-wrap: pretty;
  color: var(--ink);
}
.pubs-row__title a { color: inherit; text-decoration: none; }
.pubs-row__title a::after { content: ""; position: absolute; inset: 0; }
.pubs-row--link:hover .pubs-row__title a { color: var(--accent-700); }
.pubs-row__title a:focus-visible { outline: none; }
.pubs-row:has(a:focus-visible) { outline: 2px solid var(--accent-500); outline-offset: -2px; }
.pubs-row__doi {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .78rem; font-weight: 620;
  color: var(--muted);
  white-space: nowrap;
  transition: color .18s var(--ease);
}
.pubs-row__doi-mark { display: inline-block; transition: transform .18s var(--ease); }
@media (min-width: 760px) { .pubs-row__doi { justify-self: end; } }
@media (max-width: 759px) {
  /**
   * Telefonda "Makaleyi aç" METNİ gizlenir.
   *
   * Masaüstünde sağ sütunda sakin duruyor; telefonda her kaydın altında kendi
   * satırını tutuyor ve liste boyunca on altı kez alt alta tekrarlanıyordu.
   * Satırın tamamı zaten tıklanabilir — ok işareti başlığın ucunda kalıyor,
   * yani gösterge kaybolmuyor, gürültü gidiyor.
   */
  .pubs-row__doi { display: none; }
  .pubs-row--link .pubs-row__title::after {
    content: " ↗";
    color: var(--accent-600);
    font-size: .85em;
    white-space: nowrap;
  }
}

/* Çıpaya gelen satır kısa süre vurgulanır: ziyaretçi nereye geldiğini görür.
   Kalıcı renk bırakmaz — yalnızca :target olduğu sürece. */
.pubs-row:target,
.pubs-lead:target {
  animation: pubs-target 2.2s var(--ease) both;
}
@keyframes pubs-target {
  0%, 55% { background: var(--accent-50); }
  100%    { background: transparent; }
}

/* Liste başlığı — sayı bandıyla listeyi bağlar: biri toplam, öbürü seçki. */
.pubs-listhead {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem .9rem;
  max-width: 58rem;
  margin: 0 0 clamp(1.25rem, 2.5vw, 1.75rem);
  font-size: clamp(1.05rem, 2vw, 1.3rem); font-weight: 660;
  letter-spacing: -.018em;
  color: var(--ink);
}
.pubs-listhead__note {
  font-size: .8rem; font-weight: 400;
  letter-spacing: 0;
  color: var(--muted);
}

.pubs-empty { color: var(--muted); }
.pubs-total {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem;
  max-width: 58rem;
  margin: 1.25rem 0 0;
  font-family: var(--font-mono); font-size: .72rem;
  letter-spacing: .06em;
  color: var(--muted);
}

/* ---------------------------------------------------------------------------
 | BANT 5 — KAPANIŞ. Sayfayı hizmete bağlar.
 |
 | Önceki sürümlerde sayfanın sonu yoktu: liste bitiyor, ziyaretçi boşlukta
 | kalıyordu. Kurumsal bir sayfa ziyaretçiyi bir eyleme bırakır.
 * ------------------------------------------------------------------------ */
.pubs-close {
  padding-block: clamp(2.5rem, 5vw, 4rem);
  background: #fff;
  border-top: 1px solid var(--line);
}
.pubs-close__inner { max-width: 44rem; margin-inline: auto; text-align: center; }
.pubs-close__title {
  margin: 0;
  font-size: clamp(1.3rem, 2.6vw, 1.65rem); font-weight: 670;
  letter-spacing: -.02em;
  text-wrap: balance;
  color: var(--ink);
}
.pubs-close__text {
  margin: .9rem 0 0;
  font-size: .95rem; line-height: 1.7;
  color: var(--body);
}
.pubs-close__actions {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem;
  margin-top: 1.6rem;
}
@media (max-width: 479px) {
  .pubs-close__actions .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .pubs-row, .pubs-row__doi, .pubs-row__doi-mark,
  .pubs-lead__go-mark { transition: none; }
  .pubs-row--link:hover .pubs-row__doi-mark,
  .pubs-lead--link:hover .pubs-lead__go-mark { transform: none; }
}



/* ==========================================================================
   DOKUNMA HEDEFLERİ
   --------------------------------------------------------------------------
   Ölçümde 20–26px yüksekliğinde etkileşimli öğeler bulundu (ORCID rozeti,
   "yayına git", e-posta bağlantısı, açılır başlık, logo). WCAG 2.5.8 (AA)
   en az 24×24 CSS piksel ister; 2.5.5 (AAA) 44×44. 20px'lik bir bağlantı
   parmakla ıskalanır ve yan yana duranlarda yanlış olana basılır.

   Yöntem: GÖRÜNÜM DEĞİŞMEZ. Yazı boyutu, rengi ve konumu aynı kalır;
   yalnızca dolgu eklenip aynı miktarda negatif dış boşluk verilerek
   tıklanabilir alan büyütülür. Böylece sayfa düzeni de kaymaz.
   ========================================================================== */
.pubs-card__orcid,
.pubs-card__go,
.tm-pubs-all,
.page-head__mail {
  padding-block: 8px;
  margin-block: -8px;
}

/* <summary> açılır başlığı: tıklama alanı satırın kendisi kadardı. */
.track-forgot__head {
  padding-block: 9px;
  margin-block: -9px;
}

/* Logo: 33–38px yükseklikteydi. Görsel ölçüsü korunur, hedef 44px'e çıkar. */
.brand {
  padding-block: 4px;
  margin-block: -4px;
}

/* Düğmeler telefonda en az 44px: 36–38px'ti, parmakla sınırdaydı. */
@media (max-width: 767px) {
  .btn,
  button.btn {
    min-height: 44px;
  }
}