/* ==========================================================================
   NeoPreklinik — Portfolyo açılışı
   --------------------------------------------------------------------------
   Hizmetler sayfasıyla aynı editoryal dil: kart yığını yok, hiyerarşi çizgi
   ve tipografiyle kurulur. Tokenler sayfaya özeldir; site genelindeki
   değişkenler ezilmez.
   ========================================================================== */

.pf-hero,
.pf-filter {
  --p-paper:   #ffffff;
  --p-warm:    #f6f8fa;
  --p-line:    #e4e8ec;
  --p-ink:     #16181d;
  --p-ink-2:   #5a5e66;
  --p-pink:    #e5097f;
  --p-pink-bg: #fdf0f6;

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

/* --- 1) Künye satırı ------------------------------------------------------ */
.pf-hero {
  background: var(--p-paper);
  padding-block: clamp(1.25rem, 2vw, 1.75rem) clamp(.5rem, 1vw, .8rem);
  color: var(--p-ink-2);
}
.pf-hero .breadcrumb { margin-bottom: 1.5rem; }

.pf-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(--p-line);
  margin-bottom: clamp(1.35rem, 2.5vw, 2rem);
}
.pf-kicker {
  display: flex; align-items: center; gap: .6rem;
  margin: 0;
  font-family: var(--p-mono);
  font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--p-ink-2);
}
.pf-kicker::before {
  content: ""; flex: none;
  width: 8px; height: 8px;
  background: var(--p-pink);
}
.pf-hero__meta {
  margin: 0;
  font-family: var(--p-mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: #8b9096;
}

/* --- 2) Başlık bloğu ------------------------------------------------------ */
.pf-hero__grid { display: grid; gap: clamp(1.75rem, 4vw, 2.5rem); }
@media (min-width: 1024px) {
  .pf-hero__grid {
    grid-template-columns: 1.15fr .85fr;
    gap: 72px;
    align-items: stretch;
  }
}

.pf-hero__title {
  font-family: var(--p-head);
  font-weight: 700;
  font-size: clamp(2.375rem, 1.6rem + 2.2vw, 3.5rem);   /* 38 → 56px */
  line-height: 1.06;
  letter-spacing: -.02em;
  color: var(--p-ink);
  margin: 0;
}
/**
 * Telefonda kapak sıkıştırılır (Hizmetler'deki .svc-hero ile aynı gerekçe):
 * 38px'lik başlık üç satıra yayılıyor, kapak listenin başlamasını gereksiz
 * yere aşağı itiyordu. Metin kısaltılmaz, yalnızca punto ve boşluk daralır.
 */
@media (max-width: 639px) {
  .pf-hero { padding-block: .9rem .55rem; }
  .pf-hero .breadcrumb { margin-bottom: .8rem; }
  .pf-hero__rule { padding-bottom: .5rem; margin-bottom: .95rem; }
  .pf-hero__title { font-size: 2rem; }
  .pf-hero__grid { gap: 1.1rem; }
}

/* Sitenin imzası: tek kelimenin altında eğik pembe çizgi (Hizmetler ile aynı). */
.pf-mark { position: relative; white-space: nowrap; }
.pf-mark::after {
  content: "";
  position: absolute; left: -.04em; right: -.04em; bottom: -6px;
  height: 3px;
  background: var(--p-pink);
  border-radius: 2px;
  transform: rotate(-.6deg);
  opacity: .9;
}
.pf-hero__text {
  margin: clamp(1.1rem, 2.2vw, 1.5rem) 0 0;
  max-width: 540px;
  font-size: 16px; line-height: 1.65;
  color: var(--p-ink-2);
}

/* --- Güncel kayıt spotu --------------------------------------------------- */
.pf-spot {
  position: relative;
  display: flex; flex-direction: column;
  padding: 28px;
  background: var(--p-warm);
  border: 1px solid var(--p-line);
  border-radius: 6px;
}
/* Üst kenardaki pembe çizgi panelin imzasıdır; hover'da kalınlaşır. */
.pf-spot::before {
  content: "";
  position: absolute; inset: -1px -1px auto -1px;
  height: 3px;
  background: var(--p-pink);
  border-radius: 6px 6px 0 0;
  transition: height .2s ease;
}
.pf-spot:hover::before { height: 5px; }

.pf-spot__status {
  display: flex; align-items: center; gap: .5rem;
  margin: 0 0 1rem;
  font-family: var(--p-mono);
  font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
}
.pf-spot__state { color: var(--p-pink); }
.pf-spot__period { margin-left: auto; color: #8b9096; font-variant-numeric: tabular-nums; }
.pf-spot__dot {
  flex: none;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--p-pink);
  animation: pf-pulse 2s ease-in-out infinite;
}
/* Sürmekte olan çalışmanın işareti: iki saniyede bir yumuşakça büyüyüp söner. */
@keyframes pf-pulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.5); opacity: .45; }
}

.pf-spot__cat {
  margin: 0 0 .5rem;
  font-family: var(--p-mono);
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: #8b9096;
}
.pf-spot__title {
  margin: 0 0 .6rem;
  font-family: var(--p-head);
  font-size: 20px; font-weight: 600;
  line-height: 1.3; letter-spacing: -.015em;
  color: var(--p-ink);
}
/* Özet iki satırla sınırlanır; taşan kısım üç noktayla biter. */
.pf-spot__text {
  margin: 0 0 1.25rem;
  font-size: 14px; line-height: 1.6;
  color: var(--p-ink-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pf-spot__link {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: .4rem;
  align-self: flex-start;
  font-size: 14px; font-weight: 600;
  color: var(--p-pink);
  text-decoration: none;
}
.pf-spot__link span { transition: transform .2s ease-out; }
.pf-spot__link:hover { color: var(--p-pink); text-decoration: none; }
.pf-spot:hover .pf-spot__link span { transform: translateX(4px); }

/**
 * Öne çıkan çalışma yalnızca masaüstünde durur.
 *
 * Masaüstünde spot, başlığın SAĞINDA ayrı bir kolondur; aşağıdaki listede aynı
 * çalışmanın tekrar görünmesi doğaldır, çünkü ikisi yan yana iki ayrı okuma
 * alanıdır. 1024px altında kolonlar üst üste binince spot doğrudan listenin
 * üstüne düşer ve aynı çalışma arka arkaya iki kez okunur — kopya gibi görünür.
 * Bilgi kaybı yoktur: çalışma hemen altındaki listede zaten ilk sıradadır.
 */
@media (max-width: 1023px) {
  .pf-spot { display: none; }
}

/* --- 3) Tür filtresi ------------------------------------------------------ */
.pf-filter {
  background: var(--p-paper);
  border-top: 1px solid var(--p-line);
  border-bottom: 1px solid var(--p-line);
}
.pf-filter__inner {
  display: flex; align-items: center; gap: .35rem;
  padding-block: .6rem;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.pf-filter__inner::-webkit-scrollbar { display: none; }

/* Çip kutusu Hizmetler'deki .svc-chip ile birebir aynıdır: iki sayfada aynı
   işi yapan denetim, aynı görünmelidir. Zemin ve çerçeve açıkça yazılır —
   tarayıcının <button> varsayılanına bırakılırsa cihazdan cihaza değişir. */
.pf-chip {
  flex: none;
  display: inline-flex; align-items: baseline; gap: .35rem;
  min-height: 36px;
  padding: .4rem .85rem;
  background: var(--p-warm);
  border: 1px solid var(--p-line);
  border-radius: 999px;
  font: inherit;
  font-size: 14px; font-weight: 500;
  color: var(--p-ink-2);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.pf-chip:hover { background: #eef1f5; color: var(--p-ink); }
.pf-chip:active { transform: translateY(1px); }
.pf-chip.is-active {
  background: var(--p-pink-bg);
  border-color: currentColor;
  color: #b8076a;
  font-weight: 600;
}

/**
 * Dar ekranda bant değil ızgara (Hizmetler'deki .svc-catbar ile aynı gerekçe).
 *
 * Tek satırda dört çip 390px'lik ekranda ~737px yer kaplıyordu: tür adları
 * ("Hücre Kültürü Modellemesi") uzun olduğu için yarıya yakını ekran dışında
 * kalıyor, kenarlarda ortadan kesiliyor ve kaydırılabildiği anlaşılmıyordu.
 *
 * Yerine iki sabit sütun gelir: dört çip 2×2 durur, hepsi eşit genişlikte ve
 * hizalı; hiçbir tür gizli kalmaz. align-items: stretch olmadan, iki satıra
 * taşan bir çipin yanındaki kısa çip dikey ortalanıp hizadan düşüyordu.
 */
@media (max-width: 1020px) {
  .pf-filter__inner {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .45rem;
    overflow: visible;
    padding-block: .6rem;
    align-items: stretch;
  }
  .pf-chip {
    width: 100%;
    justify-content: space-between;
    align-items: center;
    white-space: normal;
    text-align: left;
    padding-inline: .8rem;
  }
}

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

/* --- 4) Filtre bandı ile liste arası -------------------------------------- */
/* Bant listeye bağlıdır; arasındaki boşluk dar tutulur. */
.pf-filter + .section { padding-top: 32px; }

/* Filtrelemede satırlar yumuşak geçişle kaybolur/görünür. */
.js .register__row { transition: opacity .25s ease; }
.register__row.is-filtered { display: none; }

/* --- Açılış hareketi ------------------------------------------------------ */
.js .pf-hero__rule,
.js .pf-hero__lead,
.js .pf-spot { animation: pf-rise .4s cubic-bezier(.22,.61,.36,1) both; }
.js .pf-hero__lead { animation-delay: .06s; }
.js .pf-spot       { animation-delay: .12s; }

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

.js .pf-mark::after {
  transform-origin: left center;
  animation: pf-underline .45s cubic-bezier(.22,.61,.36,1) .28s both;
}
@keyframes pf-underline {
  from { transform: rotate(-.6deg) scaleX(0); }
  to   { transform: rotate(-.6deg) scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .pf-spot__dot { animation: none; }
  .js .pf-hero__rule,
  .js .pf-hero__lead,
  .js .pf-spot,
  .js .pf-mark::after { animation: none; }
  .js .pf-mark::after { transform: rotate(-.6deg); }
  .js .register__row { transition: none; }
}