/* ==========================================================================
   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); }

/* ---- 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);
}

.register { list-style: none; margin: 0; padding: 0; }
.register__row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  padding-block: clamp(1.75rem, 3.5vw, 2.5rem);
  border-top: 1px solid var(--line);
  transition: border-color .22s var(--ease);
}
.register__row:first-child { border-top: 0; padding-top: 0; }
.register__row:last-child { border-bottom: 1px solid var(--line); }
.register__row:hover { border-color: var(--line-strong); }

/* 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); }

/**
 * Kayıt satırına gelindiğinde sol kenarda kısa bir işaret belirir —
 * arşivde bir fişin çekilmesi gibi. Kart büyütme, gölge veya renk değişimi
 * yok; yalnızca hangi kaydın seçili olduğunu söyleyen 2 piksellik bir çizgi.
 */
.register__row::before {
  content: "";
  position: absolute; left: -1rem; top: clamp(1.75rem, 3.5vw, 2.5rem);
  width: 2px; height: 0;
  background: var(--accent-500);
  transition: height .28s var(--ease);
}
.register__row:hover::before { height: 2.25rem; }
@media (max-width: 700px) { .register__row::before { display: none; } }
@media (min-width: 820px) {
  .register__row { grid-template-columns: 15rem minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.5rem); }
}

.register__meta { display: grid; gap: .2rem; align-content: start; }
.register__period {
  font-family: var(--font-mono); font-size: .8rem; font-weight: 600;
  color: var(--accent-600); letter-spacing: .04em; margin-bottom: .3rem;
}
.register__institution { font-size: .92rem; font-weight: 600; color: var(--ink-2); line-height: 1.4; }
.register__department { font-size: .86rem; color: var(--muted); line-height: 1.45; }

.register__category {
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin-bottom: .5rem;
}
.register__title { font-size: clamp(1.12rem, 1.9vw, 1.32rem); margin-bottom: .55rem; 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; } }

.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 ------------------------------------------------------- */
.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; flex: none; }
.brand__mark { width: 42px; height: 37px; color: var(--accent-500); flex: none; }

/* Logodaki dikey ayırıcı çizgi */
.brand__divider {
  width: 2px; height: 34px; border-radius: 2px;
  background: var(--brand-800);
  flex: none;
}

.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__name {
  font-size: 1.06rem; font-weight: 700; letter-spacing: .005em;
  color: var(--brand-800); white-space: nowrap;
}

@media (max-width: 400px) {
  .brand__mark { width: 36px; height: 32px; }
  .brand__name { font-size: .95rem; }
}

.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; }

@media (max-width: 1020px) {
  .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: 1021px) {
  .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.
 */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 92svh;
  padding-block: clamp(3.5rem, 8vw, 5.5rem) 0;
  background: #f7f2f5;
  color: var(--ink);
  text-align: center;
}

/**
 * Beyaz radyal yumuşatma (scrim).
 * Fotoğrafın üzerine kutu, bant ya da koyu katman konmaz; yalnızca metin
 * bölgesinde ışığı toplayan, kenarı hiçbir genişlikte belli olmayan bir
 * beyaz radyal geçiş vardır. Merkez 45%'te tutulur ki alt künye hattının
 * bulunduğu alt yarı da yumuşasın.
 */
.hero::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 55% 60% at 50% 45%,
              rgba(255,255,255,.85) 0%,
              rgba(255,255,255,.4) 55%,
              rgba(255,255,255,0) 80%);
}

/**
 * Görsel katmanı.
 * Kaynak görsel çok açık tonda olduğu için doğrudan koyu bir katmanla
 * kapatmak yerine "luminosity" karışımıyla marka rengine boyanır (duotone).
 * Böylece hücre dokusu net biçimde görünür, metin de okunaklı 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 45%;
}

/**
 * Ken Burns — fotoğrafın kendisi değişmez, yalnızca çok yavaş nefes alır.
 * 20 saniyede %6 büyür ve geri döner; yalnızca transform kullanır, düzen
 * hesaplaması tetiklenmez. Mobilde kapalıdır (pil ve performans).
 */
@keyframes np-kenburns {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}
@media (min-width: 640px) {
  .js .hero__media img {
    transform-origin: center;
    animation: np-kenburns 20s ease-in-out infinite alternate;
  }
}

/* Alt kenarda bir sonraki bölüme yumuşak geçiş — renk katmanı değil. */
.hero__media::after {
  content: "";
  position: absolute; inset: auto 0 0 0; height: 22%;
  background: linear-gradient(to top, var(--paper) 0%, rgba(255, 255, 255, 0) 100%);
}

.hero__inner { position: relative; z-index: 2; width: 100%; margin-block: auto; }
.hero__content { position: relative; max-width: 46rem; margin-inline: auto; }

/**
 * 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 {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .35rem .75rem;
  margin: 0 0 20px;
  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: 20px; 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. */
.hero__title {
  margin: 0 0 20px;
  color: var(--brand-800);
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 1.35rem + 1.9vw, 3rem);
  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: 29ch;
  margin-inline: auto;
  /* Fotoğrafın en yoğun yerinde bile okunur kalsın diye çok hafif beyaz
     halo; gölge değil, ışık. */
  text-shadow: 0 1px 20px rgba(255,255,255,.8);
}

/* İmza detay: "yayına" kelimesinin altındaki eğik pembe çizgi açılışta
   soldan sağa çizilir. */
.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; }

/**
 * Slogan — süreç akışı.
 *
 * Dört kelime, aralarında açık gri oklarla tek satırda durur: "Araştır →
 * Öğren → Keşfet → Sonuçlandır". Yön okların kendisindedir, hiçbir döngü ya
 * da vurgu gezinmesi yoktur — kurumsal bir künye satırı gibi okunur.
 *
 * Son kelime varış noktasıdır ve tek pembe öğedir; oklar dekoratif olduğu
 * için ekran okuyucudan gizlenir (aria-hidden).
 */
.hero__tagline {
  display: inline-flex;
  /* Satır içi kutu taban çizgisine hizalanınca üstünde satır boşluğu kalıyor
     ve başlıkla arası 4px açılıyordu; üstten hizalanır. */
  vertical-align: top;
  align-items: baseline;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 12px;
  margin: 0 0 36px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.2;
  white-space: nowrap;
}
.hero__word { color: #16181D; }
/* Varış: sürecin sonunda ne olduğunu tek renk söyler. */
.hero__word--end { color: var(--accent-500); }
.hero__flow {
  color: #b0b7c3;
  font-weight: 500;
  /* Ok, harflerin optik ortasına oturur; taban çizgisinde asılı kalmaz. */
  transform: translateY(-1px);
}

/* Açılış: kelimeler ve oklar soldan sağa 80ms arayla belirir. */
.js .hero__word,
.js .hero__flow {
  animation: np-rise .5s var(--ease-hero) both;
  animation-delay: calc(.12s + var(--i, 0) * .08s);
}

/**
 * Açılışın alt ucu.
 * Bant ya da kutu yoktur: iki ince çizgi arasında üç mikro kanıt ve onun
 * üstünde tek satırlık canlı durum. Alt yarıyı "ölü alan" olmaktan çıkarır
 * ve aşağıda devam olduğunu kendiliğinden söyler — ayrı bir ok gerekmez.
 */
.hero__foot {
  position: relative; z-index: 2;
  width: 100%;
  padding-bottom: 48px;
  display: grid; gap: 14px;
  justify-items: center;
}

/* Canlı durum satırı — sayfadaki tek nabız. */
.hero__live { margin: 0; font-size: 13px; line-height: 1.5; }
.hero__live a {
  display: inline-flex; align-items: center; gap: .4rem;
  color: #3D4149; text-decoration: none;
}
.hero__live-title { color: #16181D; font-weight: 600; }
.hero__live a:hover { color: var(--accent-600); }
.hero__live a:hover .hero__live-title { color: var(--accent-600); }
.hero__live-dot {
  display: inline-block; vertical-align: middle;
  width: 7px; height: 7px; margin-right: .5rem;
  border-radius: 50%;
  background: var(--accent-500);
}
@keyframes np-dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .45; transform: scale(.82); }
}
.js .hero__live-dot { animation: np-dot-pulse 2.4s var(--ease) infinite; }

/* Künye hattı — metnin iki yanında 80px'lik ince çizgiler. */
.hero__proof {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .35rem .6rem;
  margin: 0;
  font-size: 13px; line-height: 1.5;
  color: #3D4149;
}
.hero__proof::before,
.hero__proof::after {
  content: "";
  width: 80px; height: 1px; flex: none;
  background: #E4E8EC;
}
.hero__proof-sep { color: #9aa0a6; }

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

/**
 * Mobil hero.
 * Yükseklik 85svh: ekranı tam kaplamaz, kullanıcı devamı olduğunu sezer
 * (svh, iOS Safari'de adres çubuğu açıkken de doğru yüksekliği verir).
 * İki düğme alt alta, 300px'i geçmez; fotoğrafın üzerindeki beyaz yumuşatma
 * biraz artırılır, çünkü küçük ekranda metin fotoğrafın yoğun kısmına denk
 * gelebiliyor.
 */
@media (max-width: 639px) {
  .hero {
    min-height: 88svh;
    padding-block: clamp(3rem, 12vw, 4rem) 0;
  }
  /* Dar ekranda metin alanı oransal olarak daha büyük: yumuşatma da büyür. */
  .hero::after {
    background: radial-gradient(ellipse 75% 55% at 50% 45%,
                rgba(255,255,255,.88) 0%,
                rgba(255,255,255,.45) 55%,
                rgba(255,255,255,0) 82%);
  }
  .hero__stamp { font-size: 16px; letter-spacing: .3em; margin-bottom: 10px; }
  .hero__title { font-size: clamp(30px, 8.5vw, 42px); margin-bottom: 16px; }
  /* Slogan telefonda TEK satırda kalır: punto, boşluk ve harf aralığı
     küçülür, kelimeler alt satıra sarmaz. */
  .hero__tagline { font-size: 14px; gap: 8px; letter-spacing: 0; margin-bottom: 28px; }
  .hero__actions {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  .hero__actions .btn {
    width: 100%; max-width: 300px;
    min-height: 48px;
    justify-content: center;
  }

  .hero__foot { padding-bottom: 32px; gap: 10px; }
  /* Proje adı tek satıra sığmıyor: durum satırı kısalır, bağlantı kalır. */
  .hero__live-title { display: none; }
  .hero__live a { min-height: 44px; }
  /* Yan çizgiler kalkar; üç kanıt iki satıra sarabilir. */
  .hero__proof { font-size: 12px; gap: 6px .5rem; }
  .hero__proof::before, .hero__proof::after { display: none; }
}

/* Görsel panel */
.hero__visual { position: relative; }
.hero__figure {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  background: var(--surface);
  aspect-ratio: 4 / 3;
}
.hero__figure img {
  width: 100%; height: 100%; object-fit: cover;
  /* Kaynak görsel çok açık tonda; marka paletiyle uyum için hafifçe koyulaştırılır. */
  filter: saturate(.85) contrast(1.08) brightness(.97);
}
/* Marka rengiyle ölçülü bir duotone katmanı — görsel kurumsal kimliğe bağlanır. */
.hero__figure::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(155deg, rgba(18, 86, 108, .34) 0%, rgba(28, 155, 107, .16) 55%, rgba(255,255,255,0) 100%),
    radial-gradient(120% 90% at 30% 15%, rgba(122, 197, 216, .22), transparent 70%);
  mix-blend-mode: multiply;
  pointer-events: none;
}
/* Alt kenarda rozeti okunur kılan yumuşak koyulaşma */
.hero__figure::before {
  content: "";
  position: absolute; inset: auto 0 0 0; height: 45%;
  background: linear-gradient(to top, rgba(11, 51, 59, .28), transparent);
  z-index: 1; pointer-events: none;
}
.hero__badge {
  position: absolute; left: clamp(.85rem, 3vw, 1.4rem); bottom: clamp(.85rem, 3vw, 1.4rem);
  right: clamp(.85rem, 3vw, 1.4rem);
  display: flex; align-items: center; gap: .9rem;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .85rem 1rem;
  box-shadow: var(--shadow-sm);
  z-index: 2;
}
.hero__badge-icon {
  width: 38px; height: 38px; flex: none; border-radius: 11px;
  display: grid; place-items: center;
  background: var(--brand-50); color: var(--brand-600); border: 1px solid var(--brand-100);
}
.hero__badge-icon svg { width: 19px; height: 19px; }
.hero__badge-title { display: block; font-size: .875rem; font-weight: 640; color: var(--ink); line-height: 1.3; }
.hero__badge-text { display: block; font-size: .785rem; color: var(--muted); line-height: 1.35; margin-top: 2px; }

/* 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.
 */
@media (max-width: 859px) {
  .journey { gap: 1.75rem; }
  .journey__item {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: .9rem; row-gap: 2px;
    align-items: center;
    text-align: left;
  }
  .journey__icon { width: 44px; height: 44px; grid-row: 1 / span 2; }
  .journey__icon svg { width: 19px; height: 19px; }
  .journey__label { align-self: end; }
  .journey__sub { align-self: start; margin-top: 0; }
  .journey__item:not(:last-child)::after { left: 22px; top: 44px; bottom: -1.75rem; }
}

/**
 * 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)); } }

/**
 * 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; }
.portfolio-teaser__cat {
  display: block;
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); margin-bottom: .4rem;
  transition: color .25s var(--ease);
}
.portfolio-teaser:hover .portfolio-teaser__cat { color: var(--accent-600); }

/**
 * Dar ekran ve tablet: üç büyük kart alt alta sayfayı gereksiz uzatıyordu.
 * Kartlar yatay kaydırmalı bir şeride girer; her kart hizalanarak durur
 * (scroll-snap) ve sonraki kartın kenarı görünür kalır — kaydırılabildiği
 * bu şekilde anlaşılır. Altındaki noktalar konumu gösterir.
 */
.portfolio-dots { display: none; }
@media (max-width: 1023px) {
  .portfolio-strip { position: relative; }
  .portfolio-teaser-grid {
    grid-auto-flow: column;
    grid-auto-columns: 72%;
    grid-template-columns: none;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* Şerit kabın kenarlarına kadar uzanır; ilk kart yine hizada başlar. */
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    padding-bottom: .25rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior-x: contain;
  }
  .portfolio-teaser-grid::-webkit-scrollbar { display: none; }
  .portfolio-teaser { scroll-snap-align: start; }

  .portfolio-dots {
    display: flex; justify-content: center; gap: 8px;
    margin-top: 1.1rem;
  }
  .portfolio-dots__dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--line-strong);
    transition: background-color .25s var(--ease), transform .25s var(--ease);
  }
  .portfolio-dots__dot.is-active { background: var(--accent-500); transform: scale(1.25); }
}
@media (max-width: 639px) {
  .portfolio-teaser-grid { grid-auto-columns: 85%; }
}
.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.
 */
.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);
}
.site-footer .brand__name { color: var(--f-ink); }
.site-footer .brand__mark { color: var(--accent-500); }
.site-footer .brand__divider { background: var(--f-line); }

.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.
 */
.footer-intern {
  display: inline-flex; align-items: center; gap: .45rem;
  margin-top: 16px;
  min-height: 44px;
  padding: .6rem 1.25rem;
  border: 1px solid var(--f-pink);
  border-radius: 999px;
  background: var(--f-pink);
  font-size: .9rem; font-weight: 600;
  color: #fff;
  text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease;
}
.footer-intern:hover {
  background: #c8076e; border-color: #c8076e;
  color: #fff; text-decoration: none;
}
.footer-intern span[aria-hidden] { transition: transform .2s ease; }
.footer-intern:hover span[aria-hidden] { transform: translate(2px, -2px); }

/* --- 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;
  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; }
/* Dış bağlantı işareti bağlantının rengini paylaşır, hover'da onunla döner. */
.footer-links__ext { margin-left: .35rem; font-size: 12px; }
/* Uzun e-posta dar ekranda taşmaz, kırılarak sarar. */
.footer-links__mail { overflow-wrap: anywhere; }
.footer-links--contact a { align-items: flex-start; padding-block: 6px; }

/* --- 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; gap: 24px; }
.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); }

/* --- Mobil: tek kolon, 44px dokunma hedefleri -----------------------------
   Telefonda alt bilgi tek sütuna indiğinde her satır 44px'e çıkıyor ve
   footer neredeyse bir ekran boyu uzuyordu. İki düzeltme yapılır:
   kurumsal bağlantılar İKİ sütuna dizilir (beş satır yerine üç) ve dikey
   ritim sıkılaşır. Dokunma hedefleri 44px'te kalır. */
@media (max-width: 639px) {
  .site-footer__grid { gap: 28px; padding-block: 36px 28px; }
  .site-footer__desc { margin-top: 12px; }
  .footer-social a { width: 44px; height: 44px; }
  .site-footer__title { margin-bottom: 8px; }

  /* Sosyal ikonlar ve staj düğmesi tek satırda: telefonda iki ayrı satır
     boşa 60px harcıyordu, ikisi yan yana 360px'e rahat sığar. */
  /* Sosyal ikonlar ve staj düğmesi tek satırda: telefonda iki ayrı satır
     boşa 60px harcıyordu, ikisi yan yana 360px'e rahat sığar. */
  .site-footer__brand {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "logo logo" "desc desc" "social intern";
    align-items: center;
  }
  .site-footer__brand > .brand { grid-area: logo; justify-self: start; }
  .site-footer__desc { grid-area: desc; }
  .footer-social { grid-area: social; gap: 12px; margin-top: 16px; }
  .footer-intern { grid-area: intern; justify-self: start; margin: 16px 0 0 12px; }

  .footer-links a,
  .footer-links span { min-height: 44px; }
  /* Kurumsal bağlantılar iki sütun; iletişim satırları uzun olduğu için tek. */
  .footer-links { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1rem; }
  .footer-links--contact { grid-template-columns: minmax(0, 1fr); }

  /* Alt bar iki satır: telif üstte, yasal bağlantılar altında, ikisi de solda. */
  .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding-block: 16px;
  }
  .site-footer__legal { gap: 20px; }
  .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: 1020px) { .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; }

  /* 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). */
}

@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; }
}