/* ==========================================================================
   NeoPreklinik — Hizmet detay sayfası (/hizmetler/[slug])
   --------------------------------------------------------------------------
   Sadeleştirme ilkesi: sayfada hizmet talebine giden YALNIZCA BİR kalıcı yol
   vardır (üst menüdeki düğme dışında). O yol, sayfanın sonundaki .svcd-cta
   bandıdır — ziyaretçi hizmeti okuduktan SONRA karar verir.

   Bu yol bir dönem sağdaki yapışkan raydı. Hizmet metinleri zenginleşince
   (gruplu kapsam listesi, odak bloğu, altı sütunlu künye tablosu) gövde
   2000px'i aştı ve 450px'lik ray, sayfanın geri kalanı boyunca sağ üçte biri
   boş bırakan bir şeride dönüştü. Rayın taşıdığı bilgiler dağıtıldı:
   kategori zaten başlık etiketindeydi, süre kapak künyesine indi, çağrı
   sona taşındı. Düzen artık TEK KOLON.

   Okuma hattı tektir: kullanıcı yukarıdan aşağı kesintisiz okur. Görsel
   içerik akışının ortasında değil, açılışın sağ yarısındadır; böylece hem
   kapak boşluğu dolar hem akıştan bir yığın eksilir.

   Renk disiplini Hizmetler sayfasıyla aynıdır: pembe hiçbir zaman zemin ya da
   büyük blok değildir; yalnızca 8px'lik etiket karesi, onay işaretleri, tek
   eylem düğmesi ve alıntı bloğunun kenar çizgisinde görünür.
   ========================================================================== */

.svcd {
  --s-paper:   #ffffff;
  --s-warm:    #f6f8fa;
  --s-line:    #e4e8ec;
  --s-ink:     #16181d;
  --s-ink-2:   #5a5e66;
  /* Okunan metin mürekkebi: --s-ink-2 uzun paragrafta soluk kalıyordu. */
  --s-body:    #33373f;
  /* 11px'lik künye etiketleri #8b9096'da AA'yı geçmiyordu. */
  --s-muted:   #6b7078;
  --s-pink:    #e5097f;
  --s-pink-dk: #c8076e;   /* yalnızca hover */
  --s-pink-bg: #fdf0f6;

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

  display: block;
  background: var(--s-paper);
  color: var(--s-ink-2);
}

/* Sayfanın ölçüsü: içerik + ray toplamı 1160px'i geçmez. */
.svcd .container { max-width: calc(1160px + var(--gutter) * 2); }

/* --- Ortak: mikro üst etiket (11px + 8px pembe kare) ---------------------- */
.svcd-kicker {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .35rem .75rem;
  margin: 0 0 1rem;
  font-family: var(--s-mono);
  font-size: 11px; font-weight: 600; line-height: 1.4;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--s-ink-2);
}
.svcd-kicker::before {
  content: ""; flex: none;
  width: 8px; height: 8px;
  background: var(--s-pink);
}

/* ==========================================================================
   1) Açılış — kimlik + künye şeridi

   TASARIM KARARI (kapağın üçüncü hâli).

   Önce sağ yarıda hizmetin fotoğrafı vardı: paragraf 660px'de bitip görsel
   980px'de başlıyordu, kapağın ortasında 320px'lik bir delik kalıyordu.
   Görsel kaldırıldı, yerine "bu kategoride" listesi kondu — o da tutmadı.
   Ölçüldü: 1440px'de kimlik 228px yüksekliğinde, sağdaki liste 75px; altında
   150px hava. Çünkü o kolonu besleyecek veri yok — bir hizmetin en fazla 2
   kardeşi var, süreç ve çıktı alanları on iki hizmetin hepsinde boş.

   Üçüncü hâl kolonu tamamen bırakır. Kimlik tek kolon, tam genişlikte akar;
   altına ince bir çizgiyle ayrılmış KÜNYE ŞERİDİ gelir. Yatay boşluk artık
   kompozisyonun parçası — doldurulmayı bekleyen bir delik değil.
   ========================================================================== */
.svcd-hero {
  border-bottom: 1px solid var(--s-line);
  padding-block: clamp(1.25rem, 2.5vw, 1.75rem) clamp(1.5rem, 3vw, 2rem);
}

/**
 * KAPAK IZGARASI — solda kimlik, sağda künye.
 *
 * Dar ekranda tek sütun (künye kimliğin altına iner). 1024px'ten itibaren iki
 * kolon: kimlik esner, künye 320px sabit kalır.
 *
 * Künye NEDEN SABİT: esnek olsaydı başlığı kısa hizmetlerde (Doku Analizi)
 * genişleyip 2-3 satırlık künye metnini tek satıra yayıyor, panel bir şeride
 * dönüyordu. Sabit genişlik on iki hizmette de aynı panel oranını verir.
 */
.svcd-hero__inner { display: grid; gap: clamp(1.5rem, 3vw, 2rem); }

@media (min-width: 1024px) {
  .svcd-hero__inner {
    grid-template-columns: minmax(0, 1fr) 320px;
    column-gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: start;
  }
}

/* Kimlik bloğu: kırıntı → kategori → başlık → tanım.
   Punto sıralaması eskiden 16 → 11 → 52 → 17 idi; kırıntı gövde metniyle aynı
   ağırlıkta olduğu için başlıkla yarışıyor, dizi dağınık görünüyordu.
   Yeni sıra 13 → 11 → 52 → 19: yardımcı olan küçülür, tanım büyür. */
.svcd-hero__id { min-width: 0; }

.svcd-hero .breadcrumb { margin-bottom: 1rem; }
.svcd-hero .breadcrumb ol { font-size: 13px; }

.svcd-hero__title {
  margin: 0;
  font-family: var(--s-head);
  font-weight: 700;
  /* 30px → 52px; masaüstünde iki satırı geçmez. */
  font-size: clamp(1.875rem, 1.4rem + 2.2vw, 3.25rem);
  line-height: 1.06;
  letter-spacing: -.02em;
  color: var(--s-ink);
  text-wrap: balance;
  /* 20ch'ti. Kapak iki kolona bölününce sol kolon zaten ~770px'e indi; ölçüyü
     ayrıca 20ch ile kısmak en uzun başlığı ("Yayın Kalitesinde Görsel ve Rapor
     Tasarımı", 42 karakter) ÜÇ satıra çıkarıyordu. 24ch'te o başlık iki
     satırda kalıyor, kısa başlıklar zaten tek satır. */
  max-width: 24ch;
}

.svcd-hero__lead {
  margin: clamp(.9rem, 2vw, 1.15rem) 0 0;
  /* 68ch → 52ch → 58ch. 68ch tek kolonlu kapakta 729px'lik ince uzun bir şerit
     oluyordu; 52ch onu düzeltti ama kapak iki kolona geçince bu kez sol kolonun
     sağında 160px boş bıraktı. 58ch kolonu doldurur ve satır uzunluğu hâlâ
     okunur bantta kalır. */
  max-width: 58ch;
  font-size: 19px; line-height: 1.6;
  color: var(--s-body);
}

/* --------------------------------------------------------------------------
   HİZMET KÜNYESİ — kapağın sağ kolonundaki panel

   Kapağın sağı bir dönem tamamen boştu (gerekçesi şablonda). Panel o boşluğu
   SÜS ile değil, sayfada zaten olan iki gerçek bilgi ve talep yoluyla dolduruyor.

   Panel ÇERÇEVELİ ama gölgesiz: sayfanın geri kalanı çizgi ve boşlukla kurulmuş
   bir editoryal düzen; buraya gölgeli bir kart koymak tek başına "arayüz
   bileşeni" gibi durur ve sayfanın diline yabancı kalırdı.
   -------------------------------------------------------------------------- */
.svcd-facts {
  border: 1px solid var(--s-line);
  border-radius: 14px;
  padding: 20px 22px;
  background: var(--s-warm);
}

/* Dar ekranda panel kimliğin altına iner; orada üstten çizgi kapağı
   bölmesin diye kenarlık kalır, yalnızca üst boşluk kısılır. */
/* Satır arası boşluğu `gap` DEĞİL, satırın kendi dolgusu verir: gap ile
   birlikte kullanılsaydı ayraç çizgisinin iki yanı eşit olmaz, çizgi 16px
   gap'in ortasında değil üstünde kalırdı. */
.svcd-facts__list { margin: 0; display: grid; gap: 0; }

.svcd-facts__row + .svcd-facts__row {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--s-line);
}

/**
 * TABLET (720-1023px): satırlar YAN YANA.
 *
 * Bu aralıkta panel henüz sağ kolona geçmemiş, kimliğin altında tam genişlikte
 * duruyor. Satırlar alt alta kalınca 830px'lik bir kutuda "Süre planlaması"
 * cümlesi tek satıra yayılıyor, panel künye değil boş bir şerit gibi
 * görünüyordu. İki sütunda toplu durur.
 *
 * Ayraç da yön değiştirir: yan yana dizilmiş iki satırın arasına ÜST çizgi
 * değil SOL çizgi girer.
 *
 * SÜTUN SAYISI SABİT, `auto-fit` DEĞİL. Önce `auto-fit + minmax(300px, 1fr)`
 * yazılmıştı; 700px'te panelin içi 608px kalıyor, iki sütun sığmıyor ve ızgara
 * sessizce TEK sütuna düşüyordu. Satırlar alt alta diziliyor ama ayraç hâlâ
 * SOLDA olduğu için "Kapsam" içeri kaymış, kenarında dikey çizgiyle duran
 * bozuk bir blok gibi görünüyordu. Alt sınır 720px: her sütun en az 300px
 * kalır, aşağısında normal alt alta düzene (üst çizgi) döner.
 */
@media (min-width: 720px) and (max-width: 1023px) {
  .svcd-facts__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 28px;
  }
  .svcd-facts__row + .svcd-facts__row {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
    padding-left: 28px;
    border-left: 1px solid var(--s-line);
  }
}

.svcd-facts dt {
  margin: 0 0 6px;
  font-family: var(--s-mono);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--s-muted);
}

.svcd-facts dd {
  margin: 0;
  font-size: 14px; line-height: 1.55;
  color: var(--s-body);
}

/* "8 başlık" — kapsam bölümüne çapa. Bağlantı olduğu belli olsun diye
   altı çizili, ama sessiz: kapağın başrolü hâlâ başlık. */
.svcd-facts__jump {
  color: var(--s-ink-2);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--s-line);
  transition: color .18s ease, text-decoration-color .18s ease;
}
.svcd-facts__jump:hover {
  color: var(--s-pink);
  text-decoration-color: currentColor;
}

/**
 * Talep bağlantısı — DOLU DÜĞME DEĞİL.
 *
 * Sayfadaki tek dolu talep düğmesi sayfa sonundaki bantta kalır; buradaki
 * sessiz ok'lu bağlantı, 2700px'lik sayfada kararını çoktan vermiş ziyaretçiye
 * kısa yol verir. İkisi de dolu düğme olsaydı sayfa aynı eylemi üç kez
 * bağırırdı (üst menüdeki "Hizmet Talebi" ile birlikte).
 */
.svcd-facts__go {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--s-line);
  width: 100%;
  font-family: var(--s-head);
  font-size: 14px; font-weight: 650;
  color: var(--s-pink);
  text-decoration: none;
}
.svcd-facts__go:hover { color: var(--s-pink-dk); text-decoration: underline; text-underline-offset: 3px; }
.svcd-facts__go svg { width: 15px; height: 15px; flex: none; transition: transform .2s ease; }
.svcd-facts__go:hover svg { transform: translateX(3px); }


/* ==========================================================================
   2) Ana bölüm — içerik + tek ray
   ========================================================================== */
.svcd-body { padding-block: 48px clamp(3rem, 6vw, 4.5rem); }

/**
 * TEK KOLON.
 *
 * Sayfa bir dönem "okuma kolonu + sağda yapışkan ray" ikilisiydi. Ray kısa
 * (~450px) ama içerik uzun: kapsam listesi, odak bloğu ve künye tablosu
 * eklenince gövde 2000px'i aştı ve ray, sayfanın geri kalanı boyunca sağ
 * üçte biri BOŞ bırakan bir şeride dönüştü.
 *
 * Rayın taşıdığı üç bilgi dağıtıldı:
 *   kategori         → zaten başlığın üstündeki etikette vardı (tekrardı)
 *   süre planlaması  → kapak künyesine, başlığın altına
 *   talep çağrısı    → sayfanın sonuna, tam genişlikte bant olarak
 *
 * ETİKET RAYI DÜZENİ — sayfanın omurgası.
 *
 * Önceki iki deneme de yetmedi. Tek bir 720px'lik okuma kolonu vardı:
 * ortalayınca kapakla farklı sol kenar oluştu, sola dayayınca sağda 440px
 * sürekli boş kaldı ve tablo aniden tam genişliğe atlayınca sayfa iki ayrı
 * parça gibi okundu.
 *
 * Asıl sorun hizalama değil, DÜZEN SİSTEMİ eksikliğiydi. Artık her bölüm
 * aynı iki kolona oturur:
 *
 *     [ETİKET 168px] [ İÇERİK — kalan genişlik ]
 *      HİZMET HAKKINDA   iki paragraf
 *      KAPSAM            dört yetkinlik grubu, yan yana
 *      SÜREÇ             adımlar
 *      ÇALIŞTIĞIMIZ...   künye tablosu
 *
 * Böylece sayfada tek bir etiket kenarı ve tek bir içerik kenarı olur —
 * "tablo gibi düzenli" görünmesinin sebebi bu. İçerik kolonu 950px'e
 * çıktığı için yetkinlikler dört sütuna, çıktılar üç sütuna yayılır ve
 * genişlik gerçekten kullanılır.
 *
 * Metin bu kolonda da ölçüsünü korur (`.svcd-prose` 68ch): kolon genişledi
 * diye satır uzunluğunu okunmaz yapmanın anlamı yok. Genişleyen şey liste,
 * tablo ve ızgaralar — yani genişlikten FAYDALANAN içerik.
 */
.svcd {
  --etiket-kolon: 168px;
  --etiket-ara: 40px;
}

.svcd-body__grid { display: block; }
.svcd-content { max-width: none; }

@media (min-width: 1024px) {
  .svcd-block {
    display: grid;
    grid-template-columns: var(--etiket-kolon) minmax(0, 1fr);
    column-gap: var(--etiket-ara);
    align-items: start;
  }
  /* Etiket sol raya; içerik ne olursa olsun sağ kolona. */
  .svcd-block > .svcd-kicker {
    grid-column: 1;
    margin: 0;
    /* İlk satırla optik hizalama: 11px etiket, 16px metnin tepesine oturur. */
    padding-top: 5px;
    /**
     * Rayda etiket SARABİLİR ("NUMUNE VE BELGE GEREKSİNİMLERİ" üç satır).
     * Flex düzeninde metin tek parça olduğu için kareyle yan yana sığmıyor,
     * kare ilk satırda YALNIZ kalıyordu. Izgarada kare kendi sütununda
     * durur, metin kalan genişlikte sarar ve kare ilk satıra hizalanır.
     */
    display: grid;
    grid-template-columns: 8px minmax(0, 1fr);
    align-items: start;
    gap: 0 .7rem;
  }
  .svcd-block > .svcd-kicker::before { margin-top: .25em; }
  .svcd-block > *:not(.svcd-kicker) { grid-column: 2; }

  /* Odak bloğunun kendi başlığı var, etiketi yok: içerik kolonuna hizalanır. */
  .svcd-focus { margin-inline-start: calc(var(--etiket-kolon) + var(--etiket-ara)); }
}
/* Bölümler arası nefes. Odak bloğu `.svcd-block` DEĞİL (kendi kabı var), bu
   yüzden ondan sonra gelen bölüm boşluksuz kalıyor ve "SÜREÇ" etiketi odak
   kutusunun dibine yapışıyordu — komşu seçicisi her iki yönü de kapsar. */
.svcd-block + .svcd-block,
.svcd-focus + .svcd-block { margin-top: 56px; }

/**
 * TAM GENİŞLİK BLOKLARI — okuma ölçüsünün dışına çıkanlar.
 *
 * Teknik künye tablosu 720px'lik okuma hattına sığmaz: altı sütunlu bir
 * tabloyu o genişliğe sokmak sütunları eziyor, satırları üç katına
 * çıkarıyordu. Talep bandı ve gezinme satırı da sayfanın tam genişliğinde
 * durur — ikisi de metin değil, yapı.
 */
/* Tam genislik: talep bandi ve gezinme satiri. Bunlarin etiketi yok, bir
   bolum degil sayfanin YAPISI'dirlar; etiket rayina oturmaz, iki kolonu
   birden kaplarlar. */
.svcd-block--full {
  max-width: none;
  margin-top: 56px;
}
@media (min-width: 1024px) {
  .svcd-block--full { margin-top: 72px; }
  /* Ray duzenine giren bir --full blok varsa (kunye tablosu) etiketi
     rayda kalir, tablosu icerik kolonunu doldurur. */
  .svcd-block.svcd-block--full {
    display: grid;
    grid-template-columns: var(--etiket-kolon) minmax(0, 1fr);
    column-gap: var(--etiket-ara);
    align-items: start;
  }
}

/* --- a) Hizmet hakkında --------------------------------------------------- */
.svcd-prose { max-width: 68ch; }
.svcd-prose p {
  margin: 0 0 1rem;
  font-size: 16px; line-height: 1.75;
  color: var(--s-body);
}
.svcd-prose p:last-child { margin-bottom: 0; }

/* --- b) Süreç ------------------------------------------------------------- */
/* Her adım tek satırdır; numara çemberi 32px, adımlar bağlantı çizgisiyle
   birbirine bağlanır. */
.svcd-steps {
  list-style: none;
  margin: 0; padding: 0;
  counter-reset: svcd-step;
}
.svcd-steps li {
  position: relative;
  min-height: 32px;
  padding-left: 48px;
  display: flex; align-items: center;
  counter-increment: svcd-step;
  font-size: 15px; line-height: 1.45;
  color: var(--s-ink);
}
.svcd-steps li + li { margin-top: 14px; }
/* Adımın üzerine gelindiğinde çember pembeleşir — hangi adımı okuduğunuz belli olur. */
.svcd-steps li:hover::before {
  border-color: var(--s-pink);
  color: var(--s-pink);
}

.svcd-steps li::before {
  content: counter(svcd-step);
  position: absolute; left: 0; top: 0;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 1px solid var(--s-line);
  border-radius: 50%;
  background: var(--s-paper);
  font-family: var(--s-mono);
  font-size: 12px; font-weight: 600;
  color: var(--s-ink);
  font-variant-numeric: tabular-nums;
}
/* Bağlantı çizgisi: çemberin altından bir sonraki çemberin tepesine iner. */
.svcd-steps li::after {
  content: "";
  position: absolute; left: 16px; top: 32px;
  width: 1px; height: 14px;
  background: var(--s-line);
}
.svcd-steps li:last-child::after { display: none; }

/* Reveal'da çizgiler yukarıdan aşağı sırayla çizilir (ana sayfadaki süreç
   animasyonuyla aynı desen: yalnızca çizgi hareket eder, metin yerinde durur). */
.js .svcd-steps li::after {
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform .3s ease;
}
.js .reveal.is-visible .svcd-steps li::after {
  transform: scaleY(1);
  transition-delay: calc(var(--i, 0) * 90ms + 150ms);
}

/* --- c) Çıktılar ---------------------------------------------------------- */
/* Masaüstünde iki kolon: dikey liste yarıya iner, tarama hızlanır. */
.svcd-outputs {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: 12px clamp(1.5rem, 3vw, 2.5rem);
}
/* Kolon 260px'in altına düşecekse madde metinleri sarmaya başlar; o durumda
   iki kolon taramayı hızlandırmaz, tek kolona döner. */
@media (min-width: 1024px) {
  /**
   * Kapsam listesiyle AYNI sütun genişliği (380px taban).
   *
   * 260px'te içerik kolonuna üç sütun sığıyordu ve beş çıktı 3+2 diziliyor,
   * sağ altta bir delik bırakıyordu; üstelik maddeler dar sütunda ikişer
   * satıra sarıyordu. İki bölüm aynı sütun ölçüsünü paylaşınca sayfada
   * tek bir ızgara varmış gibi okunur.
   */
  .svcd-outputs { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
}
.svcd-outputs li {
  position: relative;
  padding-left: 26px;
  font-size: 15px; line-height: 1.55;
  color: var(--s-ink);
}
/* Maddeler soldan, 55ms arayla gelir: liste "yazılıyormuş" gibi dolar. */
.js .svcd-outputs li {
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .3s ease, transform .3s ease;
}
.js .reveal.is-visible .svcd-outputs li {
  opacity: 1; transform: none;
  transition-delay: calc(var(--i, 0) * 55ms + 80ms);
}
.svcd-outputs li::before {
  content: "";
  position: absolute; left: 0; top: .2em;
  width: 16px; height: 16px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23e5097f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 8.4l3.4 3.4L13 5.2'/></svg>") center / 16px 16px no-repeat;
}

/* --- d) Numune ve belge gereksinimleri ------------------------------------ */
/* Kart değil, alıntı bloğu: sol kenarında 3px pembe çizgi. */
.svcd-note {
  margin: 0;
  max-width: 76ch;
  padding: 16px 20px;
  background: var(--s-warm);
  border-left: 3px solid var(--s-pink);
  border-radius: 0 6px 6px 0;
  font-size: 15px; line-height: 1.65;
  color: var(--s-body);
}

/* ==========================================================================
   e) KAPSAM — başlıklarla gruplanmış yetkinlik listesi
   --------------------------------------------------------------------------
   Araştırmacının ilk sorusu "benim yapmak istediğimi yapabiliyor musunuz?".
   Cevap bir liste değil, GRUPLU bir liste: "Temel Kültür Türleri",
   "Boyutsal Yapıya Göre", "Özel Uygulama Alanları", "Destek Hizmetleri".
   Yirmi maddeyi tek sütuna dizmek taranamaz bir duvar üretiyordu.

   Gruplar kart DEĞİL: kart, dört kutuyu sayfanın ana ağırlığı hâline
   getirirdi. Her grubun üstünde ince bir çizgi var, o kadar — ayrım
   tipografiyle kuruluyor, kutuyla değil.
   ========================================================================== */
.svcd-caps {
  display: grid;
  gap: 30px clamp(1.75rem, 3.5vw, 3rem);
}
@media (min-width: 720px) {
  /**
   * Sütun genişliği MADDE UZUNLUĞUNA göre seçildi, sütun sayısına göre değil.
   *
   * 215px denendi: dört grup yan yana sığıyordu ama "Ex vivo doku kültürü
   * (canlıdan alınan doku örneklerinin kısa süreli kültürü)" gibi maddeler
   * dört satıra sarıyor, liste okunmaz bir bloka dönüşüyordu. 215px'le
   * auto-fit üç sütuna düşüyor ve dört grup 3+1 gibi dengesiz duruyordu.
   *
   * 380px tabanla 952px'lik içerik kolonunda tam İKİ sütun oluşur (~456px):
   * dört grup temiz bir 2×2 ızgaraya oturur, maddelerin çoğu tek satırda
   * kalır ve genişlik yine tümüyle kullanılır.
   */
  .svcd-caps { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
}

.svcd-cap {
  padding-top: 16px;
  border-top: 1px solid var(--s-line);
}

/**
 * TEK VE BAŞLIKSIZ GRUP — düz liste hâli.
 *
 * Kapsam metni gruplu da gelebilir ("Temel Kültür Türleri" + maddeleri),
 * düz de (belgedeki gibi tek bir madde listesi). Düz geldiğinde tek bir
 * başlıksız grup oluşur ve iki şey bozulurdu:
 *
 *   1. Üstteki ince çizgi grupları AYIRMAK için var; ayıracak ikinci grup
 *      yokken başlıksız bir çizgi olarak asılı kalıyordu.
 *   2. Maddeler tek sütunda alt alta diziliyor, 950px'lik içerik kolonunun
 *      sağı boş kalıyordu.
 *
 * Çizgi kalkar, maddeler iki sütuna akar. `columns` kullanılır (ızgara
 * değil): okuma sırası önce AŞAĞI, sonra yana — liste böyle okunur.
 */
.svcd-cap:only-child {
  padding-top: 0;
  border-top: 0;
}
@media (min-width: 720px) {
  .svcd-cap:only-child .svcd-cap__list {
    display: block;
    columns: 2;
    column-gap: clamp(1.75rem, 3.5vw, 3rem);
  }
  .svcd-cap:only-child .svcd-cap__list li {
    break-inside: avoid;
    margin-bottom: 9px;
  }
  .svcd-cap:only-child .svcd-cap__list li:last-child { margin-bottom: 0; }
}
/* Gruplar sırayla belirir — liste "doluyormuş" gibi görünür. */
.js .svcd-cap {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .35s ease, transform .35s ease;
}
.js .reveal.is-visible .svcd-cap {
  opacity: 1; transform: none;
  transition-delay: calc(var(--i, 0) * 90ms + 60ms);
}

.svcd-cap__title {
  margin: 0 0 12px;
  font-family: var(--s-head);
  font-size: 15px; font-weight: 650; line-height: 1.35;
  letter-spacing: -.005em;
  color: var(--s-ink);
}

.svcd-cap__list {
  list-style: none;
  margin: 0; padding: 0;
  display: grid; gap: 9px;
}
.svcd-cap__list li {
  position: relative;
  padding-left: 24px;
  font-size: 14.5px; line-height: 1.55;
  color: var(--s-body);
}
/* Çıktılar listesindeki onay işaretinin aynısı: sayfa içinde tek bir
   "yapabiliyoruz" işareti olsun. */
.svcd-cap__list li::before {
  content: "";
  position: absolute; left: 0; top: .18em;
  width: 15px; height: 15px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23e5097f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 8.4l3.4 3.4L13 5.2'/></svg>") center / 15px 15px no-repeat;
}

/* ==========================================================================
   f) ODAK BLOĞU — hizmetin içinde ayrıca anlatılmayı hak eden başlık
   --------------------------------------------------------------------------
   Kapsam listesi "ne yapabiliyoruz"u sayar; bu blok içlerinden birini açar
   (örn. Hücre Kültürü sayfasında "Sitotoksisite Testleri").

   Zemin --s-pink-bg (#fdf0f6): sayfanın pembe disiplinini bozmaz, çünkü bu
   bir renk değil bir fısıltı. Sol kenardaki 3px çizgi, numune notundaki
   dille aynı — okuyucu "bu blok ayrı" işaretini zaten tanıyor.
   ========================================================================== */
.svcd-focus {
  margin-top: 56px;
  padding: clamp(20px, 3vw, 28px) clamp(20px, 3vw, 30px);
  background: var(--s-pink-bg);
  border-left: 3px solid var(--s-pink);
  border-radius: 0 12px 12px 0;
}
.svcd-focus__title {
  margin: 0 0 10px;
  font-family: var(--s-head);
  font-size: clamp(18px, 1.4vw, 21px); font-weight: 650; line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--s-ink);
}
.svcd-focus__body p {
  margin: 0 0 12px;
  font-size: 15px; line-height: 1.7;
  color: var(--s-body);
}
.svcd-focus__body { max-width: 72ch; }
.svcd-focus__body p:last-child { margin-bottom: 0; }

/* ==========================================================================
   g) TEKNİK TABLO — referans künyesi (çalışılan hücre hatları vb.)
   --------------------------------------------------------------------------
   Altı sütunlu yoğun veri. İki kural belirleyici:

   1. Tablo KENDİ kabında yatay kayar. Sayfa gövdesi hiçbir genişlikte yana
      kaymaz — dar ekranda taşan tablo bütün düzeni bozardı.
   2. İlk sütun yapışkandır. Altıncı sütunu okurken hangi hücre hattına
      bakıldığı görünür kalmalı, yoksa satır anlamını yitirir.

   Kap `tabindex="0"`: klavye kullanıcısı da kaydırabilsin (WCAG 2.1.1).
   ========================================================================== */
.svcd-table__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--s-line);
  border-radius: 12px;
  /* Kaydırılabilir alan odaklandığında görünür olsun. */
  outline-offset: 2px;
}
.svcd-table__scroll:focus-visible { outline: 2px solid var(--s-pink); }

.svcd-table {
  width: 100%;
  min-width: 760px;          /* altında sütunlar okunmaz hâle geliyor */
  border-collapse: collapse;
  font-size: 13.5px;
  line-height: 1.55;
  background: var(--s-paper);
}

.svcd-table thead th {
  position: sticky; top: 0; z-index: 2;
  padding: 12px 14px;
  background: var(--s-warm);
  border-bottom: 1px solid var(--s-line);
  font-family: var(--s-mono);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  text-align: left;
  color: var(--s-ink-2);
  white-space: nowrap;
}

.svcd-table tbody th,
.svcd-table tbody td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--s-line);
  vertical-align: top;
  text-align: left;
}
.svcd-table tbody tr:last-child th,
.svcd-table tbody tr:last-child td { border-bottom: 0; }

.svcd-table tbody td { color: var(--s-body); }

/* Satır başlığı (hücre hattı adı): yapışkan ve vurgulu.
   Zemin ŞART — yapışkan hücrenin altından öbür sütunlar geçiyor. */
.svcd-table tbody th {
  position: sticky; left: 0; z-index: 1;
  min-width: 118px;
  background: var(--s-paper);
  font-family: var(--s-head);
  font-size: 14px; font-weight: 650;
  color: var(--s-ink);
  white-space: nowrap;
  /* Kayarken sınırı belli olsun. */
  box-shadow: 1px 0 0 var(--s-line);
}

/* Zebra: altı sütun arasında göz satırı kaybetmesin.
   Yapışkan sütunun zemini de aynı tonu almalı, yoksa kayarken sırıtır. */
.svcd-table tbody tr:nth-child(even) td { background: #fafbfc; }
.svcd-table tbody tr:nth-child(even) th { background: #fafbfc; }

/**
 * "Yana kaydırın" ipucu — YALNIZCA gerçekten kayıyorsa.
 *
 * Önce `@media (min-width: 1100px)` ile gizleniyordu. O tahmin yanlıştı:
 * tablonun doğal genişliği verisine bağlı (bu sayfada 859px), dolayısıyla
 * 1024px'te tablo SIĞIYOR ama ipucu hâlâ "kaydırın" diyordu — kullanıcıya
 * yapamayacağı bir şey söyleniyordu.
 *
 * Doğrusu ölçümdür: site.js kabın scrollWidth'ini clientWidth ile
 * karşılaştırıp gerektiğinde `is-scrollable` ekler. JS yoksa ipucu görünür
 * kalır — yanlış negatif, yanlış pozitiften iyidir.
 */
.svcd-table__hint {
  margin: 10px 0 0;
  font-family: var(--s-mono);
  font-size: 11px; letter-spacing: .04em;
  color: var(--s-muted);
}
.js .svcd-table__hint { display: none; }
.js .svcd-table__scroll.is-scrollable ~ .svcd-table__hint { display: block; }

/**
 * TELEFONDA TABLO DEĞİL, KART YIĞINI.
 *
 * 6 sütunlu bir künyeyi 390px'e sığdırmanın tek yolu yatay kaydırmaktı; ama
 * tek bir hücre hattını okumak için dört kez yana kaydırmak gerekiyordu ve
 * satırlar ekranın iki katı yüksekliğe çıkıyordu. Kaydırma "bozuk" değildi,
 * sadece kullanışsızdı.
 *
 * Bu genişlikte her satır kendi kartına döner: hücre hattının adı kartın
 * başlığı, kalan sütunlar etiket + değer çiftleri olur. Etiketler
 * `data-label` özniteliğinden gelir (panelin .a-table--stack kalıbının
 * aynısı), böylece başlık satırı gizlenince bilgi kaybolmaz.
 */
@media (max-width: 767px) {
  .svcd-table__scroll {
    overflow-x: visible;
    border: 0;
    border-radius: 0;
  }
  .svcd-table {
    min-width: 0;
    display: block;
    background: none;
  }
  .svcd-table thead { display: none; }
  .svcd-table tbody { display: block; }

  .svcd-table tbody tr {
    display: block;
    margin-bottom: 14px;
    border: 1px solid var(--s-line);
    border-radius: 12px;
    overflow: hidden;
    background: var(--s-paper);
  }
  .svcd-table tbody tr:last-child { margin-bottom: 0; }

  /* Kart başlığı: hücre hattının adı. Yapışkanlık burada anlamsız. */
  .svcd-table tbody th {
    position: static;
    display: block;
    box-shadow: none;
    padding: 12px 16px;
    border-bottom: 1px solid var(--s-line);
    background: var(--s-warm);
    font-size: 15px;
    white-space: normal;
  }

  .svcd-table tbody td {
    display: block;
    padding: 10px 16px;
    border-bottom: 1px solid var(--s-line);
  }
  .svcd-table tbody tr td:last-child { border-bottom: 0; }
  .svcd-table tbody td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 3px;
    font-family: var(--s-mono);
    font-size: 10px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--s-muted);
  }
  /* Boş hücre etiketiyle birlikte hiç çizilmez. */
  .svcd-table tbody td:empty { display: none; }

  /* Zebra kart düzeninde işe yaramaz: kartların kendi sınırı var. */
  .svcd-table tbody tr:nth-child(even) td,
  .svcd-table tbody tr:nth-child(even) th { background: initial; }
  .svcd-table tbody tr:nth-child(even) th { background: var(--s-warm); }

  /* Kaydırma yok, ipucu da yok. */
  .svcd-table__hint,
  .js .svcd-table__scroll.is-scrollable ~ .svcd-table__hint { display: none; }
}

/* ==========================================================================
   h) TALEP BANDI — sayfanın sonundaki tek çağrı
   --------------------------------------------------------------------------
   Sağdaki yapışkan rayın yerini alır (bkz. .svcd-body__grid notu). Bant
   pembe DEĞİL: sayfadaki pembe yalnızca düğmede ve onay işaretlerinde durur.
   Zemin --s-warm, üstünde ince bir çizgi — okuma bitti, karar başlıyor.
   ========================================================================== */
.svcd-cta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 20px clamp(1.5rem, 4vw, 3rem);
  padding: clamp(22px, 3vw, 30px) clamp(22px, 3vw, 32px);
  background: var(--s-warm);
  border: 1px solid var(--s-line);
  border-radius: 14px;
}
.svcd-cta__text { flex: 1 1 320px; min-width: 0; }
.svcd-cta__title {
  margin: 0 0 6px;
  font-family: var(--s-head);
  font-size: clamp(18px, 1.5vw, 21px); font-weight: 650; line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--s-ink);
}
.svcd-cta__hint {
  margin: 0;
  font-size: 14.5px; line-height: 1.55;
  color: var(--s-ink-2);
}

.svcd-cta__actions {
  flex: 0 1 auto;
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
}
.svcd-cta__call {
  margin: 0;
  font-size: 13.5px;
  color: var(--s-ink-2);
}
.svcd-cta__call a { color: var(--s-pink); font-weight: 600; }
.svcd-cta__call a:hover { color: var(--s-pink-dk); }

/* Dar ekranda düğme tam genişlik: parmakla vurulacak hedef küçülmesin. */
@media (max-width: 599px) {
  .svcd-cta__actions { align-self: stretch; }
  .svcd-cta__actions .svcd-btn { width: 100%; }
}

/* --- Hizmet gezinme satırı ------------------------------------------------ */
/* Kaldırılan dev CTA bandının yerini alır: kullanıcıyı katalogda gezdirir. */
.svcd-nav {
  display: flex; justify-content: space-between; gap: 1.5rem;
  margin-top: 56px;
  padding-top: 20px;
  border-top: 1px solid var(--s-line);
}
.svcd-nav__link {
  display: grid; gap: 3px;
  max-width: 48%;
  text-decoration: none;
}
.svcd-nav__link--next { margin-left: auto; text-align: right; }
.svcd-nav__dir {
  font-family: var(--s-mono);
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--s-muted);
}
.svcd-nav__title {
  font-size: 15px; font-weight: 600; line-height: 1.35;
  color: var(--s-ink);
  transition: color .18s ease;
}
.svcd-nav__link:hover { text-decoration: none; }
.svcd-nav__link:hover .svcd-nav__title { color: var(--s-pink); }
.svcd-nav__dir { transition: transform .2s ease; display: inline-block; }
.svcd-nav__link--prev:hover .svcd-nav__dir { transform: translateX(-3px); }
.svcd-nav__link--next:hover .svcd-nav__dir { transform: translateX(3px); }

/* Sagdaki yapiskan ray KALDIRILDI: tasidigi uc bilgi sayfaya dagitildi
   (bkz. .svcd-body__grid notu). Yerini sayfa sonundaki .svcd-cta bandi aldi.
   Dugme kurali kaldi — bant onu kullaniyor. */
.svcd-btn {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  width: 100%; min-height: 46px;
  padding: .7rem 1.25rem;
  border-radius: 999px;
  background: var(--s-pink);
  color: #fff;
  font-size: 15px; font-weight: 600;
  text-decoration: none;
  transition: background-color .18s ease;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* --- 640–1023px: ray yapışkan olmaktan çıkar, içeriğin üstünde şerit olur -- */
@media (min-width: 640px) and (max-width: 1023px) {
  .svcd-outputs { grid-template-columns: 1fr; }
}

/* --- <640px --------------------------------------------------------------- */
@media (max-width: 639px) {
  .svcd-hero__lead { font-size: 16px; }
  .svcd-btn { width: 100%; min-height: 48px; }

  /* Süreç adımları iki satıra sarabilir: çember üstte hizalanır. */
  .svcd-steps li { align-items: flex-start; padding-top: 5px; min-height: 34px; }
  .svcd-steps li::before { top: -1px; }
  .svcd-steps li::after { top: 31px; }

  .svcd-nav { flex-direction: column; gap: 0; }
  .svcd-nav__link {
    max-width: none;
    min-height: 44px;
    align-content: center;
    padding-block: .5rem;
  }
  .svcd-nav__link--next { margin-left: 0; text-align: left; }
  .svcd-nav__link + .svcd-nav__link { border-top: 1px solid var(--s-line); }
}

/* ==========================================================================
   Bölüm girişleri — 350ms fade + 10px
   ========================================================================== */
.js .svcd .reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .35s ease, transform .35s ease;
}
.js .svcd .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .svcd .reveal,
  .js .svcd .reveal.is-visible { opacity: 1; transform: none; transition: none; }
  .js .svcd-steps li::after { transform: none; transition: none; }
  .svcd-btn span, .svcd-nav__title { transition: none; }
}