/* =========================================================================
   Anasayfa — "En Yeni İş İlanları" bölümü (kompakt liste)
   -------------------------------------------------------------------------
   Ölçüler admin/assets/css/admin-dashboard.css'teki `.dash-pro` sisteminden
   alındı (radius, gölge, tipografi). O dosya `.dash-pro`'ya scope'lu ve admin
   layout'una bağlı olduğu için import EDİLMEDİ.

   RENK: bordo artık burada literal DEĞİL — master.css'teki `--accent*`
   token'larından gelir (public sitenin kasıtlı ikili paleti: --brand kırmızı
   = ana ses, --accent bordo = ilan/liste içeriği). Bordoyu değiştirmek için
   master.css'i düzenle; bu dosyaya dokunma.

   Tamamı `.jobs-pro` altına scope'ludur → yalnızca bu class'ı taşıyan bölüm
   etkilenir. Geri almak için index.php'deki `jobs-pro` class'ını veya bu
   <link>'i kaldırmak yeterli.
   ========================================================================= */

.jobs-pro {
  --jp-card:      #ffffff;
  --jp-border:    #e8eaed;
  --jp-ink:       #16181d;
  --jp-muted:     #6b7280;
  --jp-bordo:     var(--accent);
  --jp-bordo-sf:  var(--accent-tint);
  --jp-radius:    16px;
  --jp-radius-sm: 12px;

  font-family: 'Plus Jakarta Sans', 'Open Sans', -apple-system, system-ui, sans-serif;
  background: #f4f5f7;
  padding: 64px 0;
}

/* -------------------------------------------------------------------------
   Bölüm başlığı
   ------------------------------------------------------------------------- */
.jobs-pro .jp-head { margin-bottom: 28px; text-align: center; }

/* -------------------------------------------------------------------------
   Bölüm başlığı — BİLİNÇLİ olarak --fs-h2 / --fs-lead ölçeğinden ayrıldı.
   master.css'teki "bölüme yerel font-size yazma" kuralı bu bölüm için geçerli
   değil: bu blok sayfada daha baskın olsun isteniyor. Stats bölümü token
   ölçeğinde kalmaya devam ediyor, yani ikisi artık kasıtlı olarak farklı boyda.
   ------------------------------------------------------------------------- */
.jobs-pro .jp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .9375rem;  /* 15px (önce 13px) */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--jp-bordo);
  background: var(--jp-bordo-sf);
  border-radius: 999px;
  padding: 6px 14px;
  margin-bottom: 16px;
}

/* Ölçü master.css'teki --fs-* ölçeğinden gelir — diğer bölüm başlıklarıyla
   (stats, SSS) aynı hizada olmalı. Buraya yerel bir font-size YAZMA. */
/* clamp: 375px'te 40px, ~1164px+'ta 64px'te sabitlenir.
   Referans .title-three h2 (SSS bölümü): 1200px+ 48px, 992+ 45px, 768+ 42px,
   altı 36px. Bu başlık sayfanın en baskın bölüm başlığı olsun isteniyor, yani
   her kırılımda ondan küçük KALMAMALI. Eğim 5vw iken 768–991 bandında 40px'te
   kalıp SSS'nin 42px'inin altına düşüyordu; 5.5vw o bandı kapatıyor.
   Alt sınır mobilde taşmayı (uzun başlık çok satıra bölünmesin), üst sınır
   geniş ekranda şişmeyi engelliyor. */
.jobs-pro .jp-title {
  font-size: clamp(2.5rem, 5.5vw, 4rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.15;
  color: var(--jp-ink);
  margin: 0 0 14px;
}

/* 24px taban → 27px tavan. Taban önemli: yalnızca vw'ye bırakılırsa metin
   yaygın laptop genişliklerinde (~1300px altı) hiç büyümez. */
.jobs-pro .jp-sub {
  font-size: clamp(1.5rem, 1.8vw, 1.6875rem);
  line-height: 1.6;
  color: var(--jp-muted);
  max-width: 620px;
  margin: 0 auto;
}

/* -------------------------------------------------------------------------
   Liste — mobilde tek sütun, ≥768px iki sütun; yoğun, taranabilir
   ------------------------------------------------------------------------- */
.jobs-pro .jp-list {
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

@media (min-width: 768px) {
  .jobs-pro .jp-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}

.jobs-pro .jp-list > a { text-decoration: none; display: block; height: 100%; }

.jobs-pro .jp-item {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 100%;
  background: var(--jp-card);
  border: 1px solid var(--jp-border);
  border-radius: var(--jp-radius-sm);
  padding: 14px 16px;
  transition: background .15s ease, border-color .15s ease;
}

.jobs-pro .jp-list > a:hover .jp-item,
.jobs-pro .jp-list > a:focus-visible .jp-item {
  background: var(--jp-bordo-sf);
  border-color: #e7c9cf;
}

.jobs-pro .jp-list > a:focus-visible {
  outline: 2px solid var(--jp-bordo);
  outline-offset: 2px;
  border-radius: var(--jp-radius-sm);
}

/* Firma logosu / baş harf rozeti */
.jobs-pro .jp-logo {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 9px;
  background: var(--jp-bordo-sf);
  color: var(--jp-bordo);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .02em;
  overflow: hidden;
}

/* Gerçek logo: kutuyu doldurmaz, sığar — farklı en-boy oranları vitrini bozmasın */
.jobs-pro .jp-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
}

/* Orta blok — min-width:0 olmadan ellipsis flex içinde çalışmaz */
.jobs-pro .jp-mid { flex: 1; min-width: 0; }

/* Ölçüler admin'in yoğun tablo sisteminden geldi, public site için büyütüldü:
   16px gövde metni erişilebilirlik tabanı — her yaştan vatandaş kullanıyor. */
.jobs-pro .jp-job-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--jp-ink);
  line-height: 1.35;
  margin: 0 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jobs-pro .jp-company {
  font-size: 1.2rem;
  color: var(--jp-muted);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jobs-pro .jp-date {
  flex-shrink: 0;
  font-size: 1rem;
  color: var(--jp-muted);
  white-space: nowrap;
}

.jobs-pro .jp-chevron {
  flex-shrink: 0;
  color: var(--jp-bordo);
  font-size: 14px;
  display: flex;
  align-items: center;
  transition: transform .15s ease;
}

.jobs-pro .jp-list > a:hover .jp-chevron { transform: translateX(2px); }

/* -------------------------------------------------------------------------
   Alt CTA
   ------------------------------------------------------------------------- */
/* Grid ile aynı ölçü sisteminde: liste max-width'i ile hizalı, ortalanmış */
.jobs-pro .jp-cta-wrap {
  max-width: 860px;
  margin: 32px auto 0;
  text-align: center;
}

@media (min-width: 768px) {
  .jobs-pro .jp-cta-wrap { max-width: 1080px; }
}

/* Outline: kart diliyle aynı görsel ağırlık — dolu bordo kartların önüne geçiyordu */
.jobs-pro .jp-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--jp-card);
  border: 1px solid var(--jp-bordo);
  color: var(--jp-bordo);
  font-size: .9375rem;
  font-weight: 600;
  border-radius: var(--jp-radius-sm);
  padding: 12px 26px;
  text-decoration: none;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.jobs-pro .jp-cta:hover,
.jobs-pro .jp-cta:focus-visible {
  background: var(--jp-bordo);
  border-color: var(--jp-bordo);
  color: #fff;
}

.jobs-pro .jp-cta:focus-visible {
  outline: 2px solid var(--jp-bordo);
  outline-offset: 2px;
}

.jobs-pro .jp-cta-arrow { font-size: 13px; transition: transform .15s ease; }
.jobs-pro .jp-cta:hover .jp-cta-arrow { transform: translateX(2px); }

/* -------------------------------------------------------------------------
   Mobil — chevron kalkar, başlık iki satıra sarabilir, tarih sağda kalır
   ------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .jobs-pro { padding: 44px 0; }
  .jobs-pro .jp-item { padding: 13px 14px; gap: 12px; }
  .jobs-pro .jp-job-title { white-space: normal; font-size: 1.2rem; }
  .jobs-pro .jp-date { font-size: 1rem; }
  .jobs-pro .jp-chevron { display: none; }
  /* Tam genişlik + 48px'lik rahat dokunma hedefi */
  .jobs-pro .jp-cta { display: flex; width: 100%; padding: 14px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .jobs-pro .jp-item,
  .jobs-pro .jp-chevron,
  .jobs-pro .jp-cta,
  .jobs-pro .jp-cta-arrow { transition: none; }
  .jobs-pro .jp-list > a:hover .jp-chevron,
  .jobs-pro .jp-cta:hover .jp-cta-arrow { transform: none; }
}