/* ==========================================================================
   NeoPreklinik — Hizmetler sayfası
   --------------------------------------------------------------------------
   Bu sayfa kendi editoryal tasarım diline sahiptir: kart yok, ikon yok,
   gradyan yok. Hiyerarşi yalnızca numara, ince çizgi ve tipografiyle kurulur.
   Sayfaya özgü tokenler .svc-hero'dan itibaren tanımlanır; site genelindeki
   değişkenler ezilmez, yalnızca bu sayfanın bileşenleri kullanır.

   Renk disiplini: pembe hiçbir zaman zemin ya da büyük blok değildir. Yalnızca
   aktif durum, hover vurgusu, 8px'lik etiket karesi ve tek eylem düğmesinde
   görünür; ekrandaki toplam payı %5'i geçmez.
   ========================================================================== */

.svc-hero,
.svc-catbar,
.svc-records,
.svc-cta {
  --s-paper:   #ffffff;
  --s-warm:    #f6f8fa;   /* soğuk gri-beyaz: ikincil zemin */
  --s-line:    #e4e8ec;
  --s-ink:     #16181d;
  --s-ink-2:   #5a5e66;
  /**
   * Gövde mürekkebi. --s-ink-2 (#5a5e66) mikro etiketlerde doğru ama uzun
   * paragraflarda soluk kalıyordu: 15px'te beyaz üzerinde 6.4:1 kontrast,
   * göz "silik" okuyor. Okunan metin bir tık koyulaşır (9.2:1) — hâlâ tam
   * siyah değil, sayfanın sakin dili korunur.
   */
  --s-body:    #33373f;
  /* Mikro etiketler (11px monospace) için: #8b9096 yerine AA'yı geçen ton. */
  --s-label:   #6b7078;
  --s-pink:    #e5097f;
  --s-pink-bg: #fdf0f6;   /* yalnızca küçük yüzeylerde */

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

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

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

/* --- a) Açılış ------------------------------------------------------------ */
.svc-hero {
  background: var(--s-paper);
  border-bottom: 1px solid var(--s-line);
  /* Açılış alçaktır: kapak künye şeridiyle biter ve hemen ardından yapışkan
     bant gelir; aradaki boşluk şeridi bantla ilişkili tutacak kadar dardır. */
  padding-block: clamp(1.25rem, 2vw, 1.75rem) clamp(.5rem, 1vw, .8rem);
  color: var(--s-ink-2);
}
.svc-hero .breadcrumb { margin-bottom: 1.5rem; }

/**
 * Künye satırı — etiket solda, sayım sağda, ikisi de ince çizginin üstünde.
 * Sayfanın ne olduğunu tek bakışta söyleyen kapak satırıdır.
 */
.svc-hero__rule {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: .35rem 1.5rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--s-line);
  margin-bottom: clamp(1.35rem, 2.5vw, 2rem);
}
.svc-hero__rule .svc-kicker { margin: 0; }
.svc-hero__count {
  margin: 0;
  font-family: var(--s-mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: #8b9096;
}

/**
 * Başlık ile özet: başlık büyük ve solda, paragraf küçük ve sağda.
 * İkisi alttan aynı çizgide biter (align-items: end) — asimetrik ama hizalı.
 */
.svc-hero__grid { display: grid; gap: clamp(1.25rem, 3vw, 2rem); }
@media (min-width: 1024px) {
  /* Özetin ilk satırı başlığın tepe çizgisiyle aynı hizada başlar. */
  .svc-hero__grid {
    grid-template-columns: 2fr 1fr;
    gap: clamp(2.5rem, 5vw, 4rem);
    align-items: start;
  }
  .svc-hero__grid .svc-hero__text { margin-top: 0; }
}

.svc-hero__title {
  font-family: var(--s-head);
  /* 700 ağırlıkta 64px'lik siyah bir blok gibi duruyordu: ağırlık 600'e,
     punto 46px'e indi, mürekkep kurumsal laciverte geçti. */
  font-weight: 600;
  /* Geniş yerleşim: masaüstünde iki satırı geçmez. */
  font-size: clamp(2rem, 1.3rem + 2vw, 2.875rem);
  line-height: 1.12;
  letter-spacing: -.02em;
  color: #1f2a5c;
  margin: 0;
}
/**
 * Başlıkta tek kelime vurgusu.
 * Renk yerine elle çizilmiş hissi veren eğik bir alt çizgi kullanılır; ikisi
 * birden yapılmaz. Çizgi metnin altına oturur, okumayı bölmez.
 */
.svc-mark {
  position: relative;
  white-space: nowrap;
}
/* Çizgi mutlak konumludur: satır yüksekliğini etkilemez, kelimenin 6px altına
   oturur ve başlıkta fazladan boşluk açmaz. */
.svc-mark::after {
  content: "";
  position: absolute; left: -.04em; right: -.04em; bottom: -6px;
  height: 3px;
  background: var(--s-pink);
  border-radius: 2px;
  transform: rotate(-.6deg);
  opacity: .9;
}

/**
 * Açılış hareketi.
 *
 * Sayfa yüklenince kapak öğeleri sırayla belirir (kısa fade + 10px yükselme),
 * ardından "araştırma" kelimesinin altındaki imza çizgisi soldan sağa çizilir.
 * Tek seferliktir, döngü yoktur; toplam süre yarım saniyenin altındadır.
 */
.js .svc-hero__rule,
.js .svc-hero__title,
.js .svc-hero__text,
.js .svc-hero__facts { animation: svc-rise .4s cubic-bezier(.22,.61,.36,1) both; }
.js .svc-hero__title { animation-delay: .06s; }
.js .svc-hero__text  { animation-delay: .12s; }
.js .svc-hero__facts { animation-delay: .18s; }

@keyframes svc-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* İmza çizgisi başlıktan hemen sonra kendini çizer. */
.js .svc-mark::after {
  transform-origin: left center;
  animation: svc-underline .45s cubic-bezier(.22,.61,.36,1) .3s both;
}
@keyframes svc-underline {
  from { transform: rotate(-.6deg) scaleX(0); }
  to   { transform: rotate(-.6deg) scaleX(1); }
}

.svc-hero__text {
  margin: clamp(1.25rem, 2.5vw, 1.75rem) 0 0;
  max-width: 56ch;
  font-size: 17px; line-height: 1.65;
  color: var(--s-body);
}

/**
 * Kapağı kapatan künye şeridi.
 *
 * Kategori listesi burada tekrarlanmaz — o iş hemen altındaki yapışkan banda
 * aittir. Bu şerit çalışmanın nerede, kimlerle ve nasıl yürüdüğünü söyleyen
 * üç mikro bilgidir; monospace ve küçük puntoyla, bantın çipli diline
 * karışmayacak biçimde durur.
 */
.svc-hero__facts {
  list-style: none;
  display: flex; flex-wrap: wrap;
  gap: .5rem 0;
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  padding: .85rem 0 0;
  border-top: 1px solid var(--s-line);
  font-family: var(--s-mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: #8b9096;
}
.svc-hero__facts li + li {
  margin-left: clamp(1rem, 2.5vw, 2rem);
  padding-left: clamp(1rem, 2.5vw, 2rem);
  border-left: 1px solid var(--s-line);
}
/* Dar ekranda ayraç çizgileri satır başında asılı kalmasın. */
@media (max-width: 639px) {
  /* Satırlar zaten yan yana sığmıyor (her biri ~260px); araya ayraç koymak
     satır başlarında asılı nokta bırakıyordu. Alt alta, aralık dar kalır. */
  .svc-hero__facts { flex-direction: column; gap: .3rem; }
  .svc-hero__facts li + li { margin-left: 0; padding-left: 0; border-left: 0; }
}

/**
 * Telefonda kapak sıkıştırılır.
 *
 * Ölçüldü: 390px genişlikte kapak, liste başlamadan önce 718px yer kaplıyordu;
 * yani "9 hizmet" yazan sayfada ilk ekranda TEK BİR hizmet görünmüyordu.
 * Punto ve boşluklar burada daraltılır (metin kısaltılmaz), kazanılan yerle
 * ilk hizmet kaydı kaydırmadan görünür hâle gelir.
 */
@media (max-width: 639px) {
  .svc-hero { padding-block: .9rem .55rem; }
  .svc-hero .breadcrumb { margin-bottom: .8rem; }
  .svc-hero__rule { padding-bottom: .5rem; margin-bottom: .95rem; }
  .svc-hero__title { font-size: 1.8rem; }
  .svc-hero__text { margin-top: .85rem; font-size: 16px; line-height: 1.55; }
  .svc-hero__facts { margin-top: 1rem; padding-top: .65rem; gap: .3rem; }
}

/* --- b) Kategori bandı ---------------------------------------------------- */
.svc-catbar {
  position: sticky;
  top: var(--header-h);
  z-index: 40;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--s-line);
}
.svc-catbar__inner {
  display: flex; align-items: center; gap: .35rem;
  padding-block: .6rem;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.svc-catbar__inner::-webkit-scrollbar { display: none; }

/**
 * Çipin kutusu burada AÇIKÇA tanımlanır.
 *
 * Daha önce zemin ve çerçeve yazılmamıştı; görünen hap biçimi tarayıcının
 * <button> için uyguladığı varsayılan stildendi. Bu, motordan motora değişir
 * (iOS Safari düğmeleri Chrome'dan farklı çizer), yani çipler her cihazda aynı
 * görünmüyordu. Zemin, çerçeve ve seçili durum artık tasarımın kendi
 * değerleriyle sabitlenmiştir.
 */
.svc-chip {
  flex: none;
  display: inline-flex; align-items: baseline; gap: .35rem;
  min-height: 36px;
  padding: .4rem .85rem;
  background: var(--s-warm);
  border: 1px solid var(--s-line);
  border-radius: 999px;
  font-size: 14px; font-weight: 500;
  color: var(--s-ink-2);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.svc-chip:hover { background: #eef1f5; color: var(--s-ink); text-decoration: none; }
.svc-chip:active { transform: translateY(1px); }
.svc-chip.is-active {
  background: var(--s-pink-bg);
  border-color: currentColor;   /* seçili çip çerçevesiyle de ayrışır */
  color: #b8076a;               /* pembe metin: 14px'te AA için koyulaştırılmış */
  font-weight: 600;
}

/**
 * Dar ekranda bant değil ızgara.
 *
 * Tek satır hâlinde çipler 390px'lik ekranda 958px yer kaplıyordu: altı
 * kategorinin %59'u ekran dışında kalıyor, kelimeler iki kenarda ortadan
 * kesiliyor ve kaydırılabildiğine dair hiçbir işaret bulunmuyordu.
 *
 * Yerine sabit sütunlu bir ızgara gelir: 560px altında iki, üstünde üç sütun.
 * Altı çip böylece 3×2 ya da 2×3 biçiminde, hepsi eşit genişlikte ve hizalı
 * durur — hiçbir kategori gizli kalmaz, yerleşim de dağınık görünmez.
 *
 * Izgara yapışkan olamaz (üç satır ekranın dörtte birini yerdi); bu yüzden
 * bant yalnızca tek satıra sığdığı masaüstünde başlığa yapışır.
 */
@media (max-width: 1020px) {
  .svc-catbar { position: static; }
  .svc-catbar__inner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .45rem;
    overflow: visible;
    padding-block: .6rem;
    /* Taban kural çipleri dikey ortalar; ızgarada bu, iki satırlık bir çipin
       yanındaki kısa çipi hizadan düşürüyordu. Satırdaki her çip aynı
       yüksekliği alsın. */
    align-items: stretch;
  }
  .svc-chip {
    width: 100%;
    justify-content: space-between;
    align-items: center;
    white-space: normal;
    text-align: left;
    padding-inline: .8rem;
  }
}
@media (max-width: 560px) {
  .svc-catbar__inner { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 639px) {
  .svc-chip { min-height: 44px; }
}

/* --- c) Hizmet kayıtları -------------------------------------------------- */
.svc-records {
  background: var(--s-paper);
  padding-block: clamp(2rem, 4vw, 3.5rem) clamp(3.5rem, 7vw, 6rem);
  color: var(--s-ink-2);
}

/* Liste künyesi — kaç hizmet, hangi kategori. */
.svc-count {
  margin: 0 0 1.25rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--s-line);
  font-family: var(--s-mono);
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: #8b9096;
}

/* Telefonda liste, kapaktan sonra hemen başlasın: künye ile ilk kayıt
   arasındaki nefes payı masaüstündekinin yarısı kadar yeter. */
@media (max-width: 639px) {
  .svc-records { padding-block: 1.1rem clamp(2.5rem, 7vw, 4rem); }
  .svc-count { margin-bottom: .7rem; padding-bottom: .5rem; }
}

.svc-rec {
  position: relative;
  display: grid;
  gap: 1.25rem;
  padding-block: 20px;
  border-top: 1px solid var(--s-line);
  /* Yapışkan başlık + kategori bandının altına denk gelsin. */
  scroll-margin-top: calc(var(--header-h) + 60px);
  transition: opacity .25s ease;
}

/**
 * Üzerine gelinen kayıt "canlanır": sol kenarında 2px'lik pembe bir çizgi
 * yukarıdan aşağı açılır, başlık pembeye döner, görsel doygunluğuna gelir.
 *
 * Zemin rengiyle oynanmaz: kayıtlar zaten beyaz ↔ kırık beyaz dönüşümlü akıyor
 * (aşağıdaki nth-child kuralı) ve o şerit tam genişlik box-shadow ile çiziliyor;
 * hover'da zemini değiştirmek çift renkli bir bant bırakırdı.
 */
.svc-rec::before {
  content: "";
  /* Çizgi kaydın DIŞINDA durur: left:0 verildiğinde numaranın ilk pikselinin
     üstüne biniyor ve içi boş "08" rakamı kırpılmış gibi görünüyordu. */
  position: absolute; left: -14px; top: -1px; bottom: 0;
  width: 2px;
  background: var(--s-pink);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .25s var(--ease, ease);
}
/* Telefonda kabın iç boşluğu bu çizgiyi taşıracak kadar dar: orada gösterilmez,
   hareket zaten dokunmatik ekranda hover ile tetiklenmiyor. */
@media (max-width: 639px) { .svc-rec::before { display: none; } }
.svc-rec:hover::before,
.svc-rec:focus-within::before,
.svc-rec.is-open::before { transform: scaleY(1); }

/* Kayıtlar görünüme girerken sırayla belirir (60ms arayla). */
.js .svc-rec.reveal { transition-delay: calc(var(--i, 0) * 60ms); }
/* Filtre dışı kalan kayıt önce solar, sonra yerini bırakır. */
.svc-rec.is-filtered { display: none; }

/**
 * Kaydın kapalı alanını kaplayan aç/kapat düğmesi.
 * Görünmezdir; kaydın kendisi tıklanabilir olsun diye vardır. Yalnızca kapalı
 * bölümü kaplar — açılan ayrıntının üstüne binmez, böylece metni okurken
 * yanlışlıkla kapanmaz ve içindeki bağlantı serbest kalır.
 */
.svc-rec__toggle {
  position: absolute; inset: 0 0 auto 0;
  height: var(--rec-compact-h, 100%);
  z-index: 2;
  padding: 0; margin: 0;
  border: 0; background: transparent;
  cursor: pointer;
}
.svc-rec__toggle:focus-visible {
  outline: 3px solid var(--brand-400);
  outline-offset: -3px;
  border-radius: 4px;
}

/* Aç/kapat göstergesi: sağ üstte küçük bir ok. */
.svc-rec__chev {
  position: absolute; top: 26px; right: 2px;
  width: 9px; height: 9px;
  border-right: 2px solid #b9bcc2;
  border-bottom: 2px solid #b9bcc2;
  transform: rotate(45deg);
  transition: transform .3s var(--ease), border-color .2s ease;
}
.svc-rec:hover .svc-rec__chev { border-color: var(--s-pink); }
.svc-rec.is-open .svc-rec__chev { transform: rotate(-135deg); border-color: var(--s-pink); }
.svc-rec:last-child { border-bottom: 1px solid var(--s-line); }
/* Kayıtlar beyaz ↔ sıcak kırık beyaz olarak dönüşümlü akar: sayfa tek düz
   beyaz tabaka gibi durmaz, katmanlanır. */
.svc-rec:nth-child(even) {
  background: var(--s-warm);
  box-shadow: 0 0 0 100vmax var(--s-warm);
  clip-path: inset(0 -100vmax);
}

/* Görsel kolonu "auto"dur: kayıt açılınca kutu 96px'ten 200px'e büyüyebilsin
   diye kolon sabit genişlikte tutulmaz. */
@media (min-width: 640px) {
  .svc-rec {
    grid-template-columns: 64px auto minmax(0, 1fr);
    gap: clamp(1.25rem, 2.5vw, 2rem);
    align-items: start;
  }
}
@media (min-width: 1024px) {
  .svc-rec { grid-template-columns: 80px auto minmax(0, 1fr); }
}

/* Numara kolonu — sayfanın imza detayı: içi boş rakamlar. */
.svc-rec__no { display: grid; gap: .4rem; align-content: start; }
.svc-rec__digits {
  font-family: var(--s-head);
  font-size: clamp(1.75rem, 1.3rem + 1.2vw, 2.25rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  color: transparent;
  -webkit-text-stroke: 1.5px #c9ccd1;
  transition: color .25s ease, -webkit-text-stroke-color .25s ease;
}
.svc-rec:hover .svc-rec__digits,
.svc-rec.is-open .svc-rec__digits {
  color: var(--s-pink);
  -webkit-text-stroke-color: var(--s-pink);
}
.svc-rec__cat {
  font-family: var(--s-mono);
  font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--s-label);
  line-height: 1.4;
}

/**
 * Görsel kolonu.
 * Kapalı kayıtta 96px'lik küçük bir kare; kayıt açıldığında 200px'e büyür.
 * Hiçbir kırılımda banner olmaz, her zaman kare kutuda durur.
 */
.svc-rec__media {
  position: relative;
  width: 96px; max-width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--s-line);
  border-radius: 4px;
  background: var(--s-warm);
  transition: width .3s var(--ease);
}
.svc-rec.is-open .svc-rec__media { width: 200px; }
.svc-rec__media picture { position: absolute; inset: 0; display: block; }
.svc-rec__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Ortak ton: bilimsel görsellerde renk bilgisi korunur, yalnızca hafifçe
     sakinleştirilir; üzerine gelindiğinde kendi doygunluğuna döner. */
  filter: saturate(.85) contrast(1.02);
  transition: filter .3s ease, transform .45s cubic-bezier(.22, .61, .36, 1);
}
/* Üzerine gelindiğinde görsel doygunluğuna döner ve çok hafifçe yaklaşır;
   kare kutu sabit kaldığı için satır yüksekliği oynamaz. */
.svc-rec:hover .svc-rec__media img {
  filter: saturate(1) contrast(1);
  transform: scale(1.04);
}

.svc-rec__placeholder {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--s-head);
  font-size: 1.5rem; font-weight: 600;
  letter-spacing: -.02em;
  color: #b9bcc2;
  background: var(--s-warm);
}
.svc-rec__media--type .svc-rec__placeholder { color: var(--s-ink); }

/* --- Kapalı hâl ----------------------------------------------------------- */
.svc-rec__title {
  font-family: var(--s-head);
  font-size: clamp(1.15rem, 1rem + .45vw, 1.35rem);
  font-weight: 650;
  letter-spacing: -.02em;
  line-height: 1.25;
  color: #1f2a5c;
  margin: 0 0 .45rem;
  transition: color .2s ease;
}
.svc-rec:hover .svc-rec__title { color: var(--s-pink); }
/* Kapalı kayıtta özet tek satırdır; kayıt yüksekliği sabit kalır. */
.svc-rec__summary {
  margin: 0 0 .5rem;
  max-width: 68ch;
  font-size: 16px; line-height: 1.65;
  color: var(--s-body);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Kayıt açılınca özet, altındaki tanıtım paragrafından bir tık öne çıkar:
   ikisi aynı puntoda olduğunda hangisinin giriş cümlesi olduğu okunmuyordu. */
.svc-rec.is-open .svc-rec__summary {
  -webkit-line-clamp: unset;
  font-size: 17px;
  color: var(--s-ink);
  margin-bottom: .75rem;
}

/* Sıkışık künye: kapalı hâlde Yöntem ve Çıktı tek satırda, taşarsa kesilir. */
.svc-rec__facts-line {
  display: flex; gap: 1rem;
  margin: 0;
  font-family: var(--s-mono);
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--s-label);
  white-space: nowrap; overflow: hidden;
}
.svc-rec__facts-line span { overflow: hidden; text-overflow: ellipsis; }
.svc-rec__facts-line span + span {
  padding-left: 1rem;
  border-left: 1px solid var(--s-line);
}
.svc-rec.is-open .svc-rec__facts-line { display: none; }

/* --- Genişleyen bölüm ----------------------------------------------------- */
/* Yükseklik animasyonu grid satırıyla yapılır: içerik ölçülmeden yumuşak geçer. */
.svc-rec__detail {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s var(--ease);
}
.svc-rec.is-open .svc-rec__detail { grid-template-rows: 1fr; }
.svc-rec__detail-inner { overflow: hidden; min-height: 0; }
.svc-rec__detail-inner > :first-child { margin-top: .9rem; }

.svc-rec__detail p {
  margin: 0 0 1rem;
  max-width: 62ch;
  font-size: 16px; line-height: 1.75;
  color: var(--s-body);
}
.svc-rec__link {
  display: inline-flex; align-items: center; gap: .4rem;
  position: relative; z-index: 3;      /* aç/kapat düğmesinin üstünde kalır */
  font-size: 14px; font-weight: 600;
  color: var(--s-ink);
  text-decoration: none;
}
.svc-rec__link span { transition: transform .2s ease-out; }
.svc-rec__link:hover { color: var(--s-pink); text-decoration: none; }
.svc-rec__link:hover span { transform: translateX(4px); }

/* Tam künye — yalnızca açık kayıtta görünür. */
.svc-rec__facts {
  margin: 0 0 1rem;
  display: grid; gap: .7rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
}
.svc-rec__facts > div { display: grid; gap: 2px; align-content: start; }
.svc-rec__facts dt {
  font-family: var(--s-mono);
  font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--s-label);
}
.svc-rec__facts dd {
  margin: 0;
  font-size: 15px; font-weight: 500; line-height: 1.55;
  color: var(--s-ink);
}

/* Açılan künye ve paragraf, kayıt açılırken bir tık gecikmeyle belirir:
   yükseklik açılırken metin de "gelir", panel birden yapışmaz. */
.js .svc-rec__detail-inner > * {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .3s ease, transform .3s ease;
}
.js .svc-rec.is-open .svc-rec__detail-inner > * { opacity: 1; transform: none; }
.js .svc-rec.is-open .svc-rec__detail-inner > :nth-child(2) { transition-delay: .06s; }
.js .svc-rec.is-open .svc-rec__detail-inner > :nth-child(3) { transition-delay: .12s; }

/* --- "Daha fazla göster" -------------------------------------------------- */
.svc-more { padding-top: 1.5rem; }
.svc-more__btn {
  border: 0; background: transparent;
  padding: .6rem 0;
  font: inherit; font-size: 14px; font-weight: 600;
  color: var(--s-ink);
  cursor: pointer;
  border-bottom: 2px solid var(--s-pink);
}
.svc-more__btn:hover { color: var(--s-pink); }

/**
 * Mobil: görsel 64px'lik kare olarak başlığın solunda durur; özet ve künye
 * altına tam genişlikte akar.
 */
@media (max-width: 639px) {
  .svc-rec {
    grid-template-columns: 64px minmax(0, 1fr);
    column-gap: .9rem; row-gap: .6rem;
    align-items: start;
  }
  .svc-rec__media { width: 64px; grid-column: 1; grid-row: 1 / span 2; }
  .svc-rec.is-open .svc-rec__media { width: 64px; }
  .svc-rec__no { grid-column: 2; grid-row: 1; gap: .1rem; }
  .svc-rec__digits { font-size: 1.35rem; }
  .svc-rec__body { display: contents; }
  .svc-rec__title { grid-column: 2; grid-row: 2; margin: 0; font-size: 1.05rem; }
  .svc-rec__summary,
  .svc-rec__facts-line,
  .svc-rec__detail { grid-column: 1 / -1; }
  .svc-rec__summary { margin-top: .35rem; }
  /* Dokunma hedefi: kapalı kaydın tamamı basılabilir yükseklikte. */
  .svc-rec__toggle { min-height: 44px; }
}
/* --- d) Kapanış ----------------------------------------------------------- */
.svc-cta {
  background: var(--s-warm);
  border-top: 1px solid var(--s-line);
  padding-block: clamp(3rem, 6vw, 5.5rem);
}
.svc-cta__inner { max-width: 640px; margin-inline: auto; text-align: center; }
.svc-cta h2 {
  font-family: var(--s-head);
  font-size: clamp(1.4rem, 1.1rem + 1.3vw, 2rem);
  font-weight: 600; letter-spacing: -.02em; line-height: 1.25;
  color: #1f2a5c;
  margin: 0 0 .75rem;
}
.svc-cta p { margin: 0 0 1.75rem; font-size: 16px; color: var(--s-ink-2); }
.svc-cta__actions {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .85rem 1.25rem;
}
.svc-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 44px;
  padding: .7rem 1.4rem;
  border-radius: 999px;
  background: var(--s-pink);
  color: #fff;
  font-size: 15px; font-weight: 600;
  text-decoration: none;
  transition: background-color .18s ease;
}
.svc-btn:hover { background: #c8076e; color: #fff; text-decoration: none; }

/* Çerçeveli varyant: sayfada dolgulu pembe düğme bulunmasın diye (Kural 3). */
.svc-btn--ghost {
  background: var(--s-paper);
  border: 1px solid var(--s-line);
  color: var(--s-ink);
}
.svc-btn--ghost:hover,
.svc-btn--ghost:focus-visible {
  background: var(--s-paper);
  border-color: var(--s-pink);
  color: var(--s-pink);
}
.svc-btn span { transition: transform .2s ease-out; }
.svc-btn:hover span { transform: translateX(4px); }
.svc-cta__alt { font-size: 14px; color: var(--s-ink-2); }
.svc-cta__alt a { color: var(--s-ink); text-decoration: underline; text-underline-offset: 3px; }
.svc-cta__alt a:hover { color: var(--s-pink); }

/* --- Bölüm girişleri ------------------------------------------------------ */
/* Kayıtlar görünüme girerken 350ms fade + 10px; site genelindeki .reveal
   düzeneği kullanılır, burada yalnızca süre/mesafe bu sayfaya göre ayarlanır. */
.js .svc-rec.reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .35s ease, transform .35s ease;
}
.js .svc-rec.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .svc-rec__link span,
  .svc-btn span,
  .svc-rec__media img { transition: none; }
  /* Açılış hareketi tamamen kapanır; öğeler son hâlleriyle durur. */
  .js .svc-hero__rule,
  .js .svc-hero__title,
  .js .svc-hero__text,
  .js .svc-hero__facts,
  .js .svc-mark::after { animation: none; }
  .js .svc-mark::after { transform: rotate(-.6deg); }
}