/* =========================================================================
   İlan detay sayfası (/ilan/:id) — ilan_detay.php
   -------------------------------------------------------------------------
   Anasayfadaki `.jobs-pro` ile AYNI görsel dil: aynı radius, gölge, kenarlık
   ve bordo aksan. Ama bileşenleri ortak DEĞİL — jobs-pro bir kart grid'i,
   burası uzun metin + sidebar. Ortaklık token seviyesinde tutuldu
   (master.css `--accent*`), böylece bordoyu tek yerden değiştirebiliyoruz.

   RENK: bordo burada literal DEĞİL — master.css'teki `--accent*`
   token'larından gelir. Kural: bölüm ilan verisi gösteriyorsa --accent,
   göstermiyorsa --brand. Bu sayfanın tamamı ilan verisi → --accent.

   Tamamı `.idp` altına scope'ludur (ilan_detay.php'de .main-page-wrapper
   üzerinde). Geri almak için o class'ı veya head.php'deki <link>'i kaldır.

   NOT: bu dosya bootstrap.min.css + style.min.css + home_lst.css'ten SONRA
   yükleniyor (bkz. head.php sırası). Tema `.btn-five`, `.block-title`,
   `.job-meta-data` gibi sınıfları zaten boyuyor; buradaki kurallar onları
   bilinçli olarak eziyor. Bu yüzden bazı yerlerde !important gerekti —
   yenisini eklemeden önce sıranın hâlâ böyle olduğunu doğrula.
   ========================================================================= */

/* -------------------------------------------------------------------------
   TİPOGRAFİ ÖLÇEĞİ — bilinçli olarak bir kademe büyük.
   Bootstrap/tema varsayılanları (.75–.875rem etiketler) bu sitede küçük
   kalıyor: her yaştan vatandaş kullanıyor, 16px gövde erişilebilirlik
   tabanı. Anasayfada da aynı yönde büyütüldü (bkz. home-jobs-pro.css:
   jp-job-title 1rem→1.2rem, jp-date .8125→1rem, master.css --fs-small
   .95→1rem). KÜÇÜLTME — ölçek burada kasıtlı.
   ------------------------------------------------------------------------- */
.idp {
  --idp-card:      #ffffff;
  --idp-border:    #e8eaed;
  --idp-ink:       #16181d;
  --idp-muted:     #6b7280;
  --idp-bordo:     var(--accent);
  --idp-bordo-sf:  var(--accent-tint);
  --idp-surface:   #f4f5f7;
  --idp-radius:    16px;
  --idp-radius-sm: 12px;

  font-family: 'Plus Jakarta Sans', 'Open Sans', -apple-system, system-ui, sans-serif;
}

/* -------------------------------------------------------------------------
   Sayfa başlığı (banner)
   home_lst.css'teki .page-header/.page-top-title kurallarını eziyor.
   Başlık ölçüsü --fs-h2 token'ından gelir — jobs-pro'nun aksine burada
   İSTİSNA YOK: detay başlığı bölüm başlığı ölçeğinde kalmalı, yoksa uzun
   ilan adları (yaygın: 60+ karakter) mobilde 4-5 satıra bölünüyor.
   ------------------------------------------------------------------------- */
/* home_lst.css:17873 `.page-header`a SABİT height:380px + kapak görseli,
   `.page-header-grandient`a da position:absolute + height:100% veriyor.
   O tasarım tam-genişlik kapak fotoğrafı içindi. Burada içerik yüksekliği
   kadar bir başlık istiyoruz → height:auto + gradient'i akışa geri al.
   height'ı ezmezsen görseli kaldırmak 380px'lik boş gri kutu bırakır. */
.idp .page-header {
  height: auto;
  background-image: none;
  /* Düz gri yerine üstten çok hafif bordo yıkama → banner'a kimlik verir,
     ama metin kontrastını bozmayacak kadar sönük. */
  background:
    linear-gradient(180deg, var(--idp-bordo-sf) 0%, rgba(255,255,255,0) 60%),
    var(--idp-surface);
  /* İnce bordo imza şeridi: sayfanın en üstünde marka aksanı. */
  border-top: 3px solid var(--idp-bordo);
  border-bottom: 1px solid var(--idp-border);
}

.idp .page-header-grandient {
  position: static;
  display: block;
  height: auto;
  background: transparent;
  padding: 44px 0 40px;
}

/* Kategori etiketi artık yalın metin değil, bordo bir "pill" — banner'daki
   rozetlerle (engelli/stajer) aynı dilde, başlığa görsel bir giriş yapıyor. */
/* Kategori artık meta chip'leriyle AYNI dilde: pill formu ortak. Ayrım rolde:
   kategori = bordo-tint DOLGU (lider/aksan, ikon dairleriyle aynı ton),
   meta = beyaz OUTLINE. Eski sert bordo-outline mismatch yaratıyordu. */
.idp .page-top-title-area small {
  display: inline-block;
  font-size: .875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--idp-bordo);
  background: var(--idp-bordo-sf);
  border: 1px solid transparent;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 12px;
}

/* Tema .page-top-title'a color:#fff + 4.5rem veriyor (kapak görseli üstü
   içindi). Beyaz zeminde okunmaz → ezildi. */
.idp .page-top-title {
  font-size: var(--fs-h2);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.15;
  color: var(--idp-ink);
  margin: 0;
}

/* Başlık altı künye: firma / konum / çalışma türü / son başvuru.
   Tek satırda akar, dar ekranda sarar. */
.idp .idp-hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin-top: 18px;
}

/* Her meta öğesi artık bir "chip": beyaz kart zeminli, ince kenarlı pill.
   Banner'ın hafif bordo washi üzerinde gözle net ayrışır, öğeler birbirine
   karışmaz. Sol padding küçük çünkü ikonun yuvarlak zemini boşluğu doldurur. */
.idp .idp-hero-meta__item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--idp-ink);
  background: var(--idp-card);
  border: 1px solid var(--idp-border);
  padding: 6px 15px 6px 6px;
  border-radius: 999px;
}

/* İkon: bordo tint dolgulu yuvarlak zemin içinde ortalanır. */
.idp .idp-hero-meta__item i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--idp-bordo-sf);
  color: var(--idp-bordo);
  font-size: .9375rem;
}

/* -------------------------------------------------------------------------
   Hero düzeni — logo + başlık bloğu SOLDA, "Başvur" CTA'sı SAĞDA.
   Eskiden tek kolondu; "logo & CTA" güncellemesiyle iki kolona çıktı.
   min-width:0 kritik: uzun ilan adları (yaygın: 60+ karakter) CTA'yı
   taşırmadan kendi kolonunda sarsın. Dar ekranda flex-wrap ile CTA alta iner.
   ------------------------------------------------------------------------- */
.idp .idp-hero {
  display: flex;
  align-items: center;
  gap: 20px 32px;
  flex-wrap: wrap;
}

.idp .idp-hero__main {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 1 1 320px;
  min-width: 0;
}

/* page-top-title-area artık esnek kolon → taşmayı içeride tut. */
.idp .idp-hero__main .page-top-title-area {
  min-width: 0;
}

/* Firma logosu avatarı — beyaz zeminli, ince kenarlı kare.
   flex-shrink:0 → daralınca ezilmez; object-fit:contain → logo bozulmaz. */
.idp .idp-hero__logo {
  flex: 0 0 auto;
  width: 76px;
  height: 76px;
  padding: 8px;
  background: var(--idp-card);
  border: 1px solid var(--idp-border);
  border-radius: 18px;
  box-shadow: 0 2px 6px rgba(16, 24, 40, .06);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.idp .idp-hero__logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* CTA sütunu — daralmaz, sağ kenarda kalır (main flex:1 onu iter). */
.idp .idp-hero__cta {
  flex: 0 0 auto;
}

/* Hero varyantı: sidebar'daki tam-genişlik bloğun aksine otomatik genişlikte
   kompakt buton. .idp-apply temelini (width:100%, min-height:56, margin-top:20)
   ezer. Durum rozetleri (--pending vb.) de bu varyantla kompakt görünür. */
.idp .idp-apply--hero {
  width: auto;
  min-height: 48px;
  margin-top: 0;
  padding: 12px 26px;
  font-size: 1.0625rem;
  white-space: nowrap;
}

/* Banner rozetleri (engelli / stajer). Eskiden 42 inline style'ın ikisiydi.
   Tek satırda yan yana dursunlar diye wrapper flex. */
.idp .idp-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.idp .idp-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  padding: 9px 15px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}

.idp .idp-badge--engelli {
  background: var(--idp-bordo-sf);
  border-color: var(--idp-bordo);
  color: var(--idp-bordo);
}

/* Yeşil BİLİNÇLİ: staj "olumlu/ek fırsat" sinyali, ilan verisi aksanı değil.
   Bordo yapılsaydı engelli rozetinden ayırt edilemezdi. */
.idp .idp-badge--stajer {
  background: #e8f5ec;
  border-color: #198754;
  color: #12633f;
}

/* -------------------------------------------------------------------------
   Gövde
   ------------------------------------------------------------------------- */
.idp .job-details {
  background: var(--idp-surface);
  padding: 40px 0 64px;
}

/* -------------------------------------------------------------------------
   Kart — sayfadaki her blok (İş Tanımı, Firma, Engel Durumu, Başvuru Durumu)
   Tema'nın .border-style / .post-block kuralları buraya karışmasın diye
   ölçüler burada sıfırlanıyor.
   ------------------------------------------------------------------------- */
.idp .idp-card {
  background: var(--idp-card);
  border: 1px solid var(--idp-border);
  border-radius: var(--idp-radius);
  padding: 24px;
  margin: 0 0 20px;
}

.idp .idp-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--idp-border);
}

/* İkon artık yalın değil, yumuşak bordo bir kareye ("chip") oturuyor.
   Bütün kartlarda AYNI görünür → başlıklar tek kimlik kazanır. Ölçü/şekil
   burada; renk --idp-bordo token'ından. */
.idp .idp-card__head i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: var(--idp-bordo-sf);
  color: var(--idp-bordo);
  font-size: 1.3125rem;
  line-height: 1;
}

/* Tema `.block-title:after` (home_lst.css:18035) başlığın altına 40px'lik
   MAVİ gradient çizgi basıyor. Sadece `block-title` sınıflı kartlarda çıkıp
   `idp-card__title` kartlarında çıkmadığı için sayfa tutarsız + marka dışı
   mavi görünüyordu. Kapatıldı: kart kimliği artık ikon chip'i + tek gri
   ayraçtan geliyor, hepsi aynı. */
.idp .idp-card__head .block-title::after {
  display: none;
}

/* .block-title tema tarafından da boyanıyor → ezmek için özgüllük gerekli */
.idp .idp-card__head .block-title,
.idp .idp-card__title {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--idp-ink);
  margin: 0;
  padding-bottom: 0;
}

/* İlan açıklaması sayfanın asıl içeriği. Grid col-xxl-8'e indirildiği için
   kolon genişliği zaten okunur bir ölçüde (~700px) — ayrıca max-width KOYMA:
   68ch sınırı geniş kartta sağ yarıyı boş bırakıp "bozuk" görünüyordu.
   Kolon daraltma, metni yapay sınırla sıkıştırmaktan daha profesyonel. */
.idp .job-description-content {
  font-size: 1.1875rem;
  line-height: 1.8;
  color: #23272e;
}

.idp .idp-card p {
  font-size: 1.125rem;
  line-height: 1.75;
  color: #2b2f36;
}

/* -------------------------------------------------------------------------
   İlan açıklamasının markdown çıktısı (renderJobDescription → format_helper.php)
   Üretilen etiketler: h4/h5/h6.jd-h, ul.jd-list, p, strong, br.
   ------------------------------------------------------------------------- */
.idp .job-description-content > *:first-child { margin-top: 0; }
.idp .job-description-content > *:last-child  { margin-bottom: 0; }

/* Paragraf ve madde AYNI boyutta olmalı (giriş cümlesi maddelerden küçük
   durmasın). Açık 1.125rem yazıldı — `inherit` bırakılırsa yukarıdaki
   `.idp .idp-card p` (1.0625rem) ile eşit özgüllükte yarışıp kaynak sırasına
   kalıyordu; kırılgan. Buradaki değer kabın ölçüsüyle bilerek aynı. */
.idp .job-description-content p {
  font-size: 1.1875rem;
  line-height: 1.8;
  margin: 0 0 16px;
}

.idp .job-description-content .jd-h {
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--idp-ink);
  margin: 28px 0 12px;
  padding-top: 20px;
  border-top: 1px solid var(--idp-border);
}

/* İlk başlık metnin hemen başındaysa üstünde çizgi/boşluk istemiyoruz */
.idp .job-description-content > .jd-h:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.idp .job-description-content .jd-list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}

.idp .job-description-content .jd-list li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 10px;
  font-size: 1.1875rem;  /* paragrafla aynı — bkz. yukarıdaki p kuralı */
  line-height: 1.7;
}

/* Madde işareti bordo nokta — tema <li> stillerine bağımlı kalmamak için
   ::before ile çiziliyor (list-style yukarıda kapatıldı). */
.idp .job-description-content .jd-list li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: .62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--idp-bordo);
}

.idp .job-description-content strong {
  font-weight: 700;
  color: var(--idp-ink);
}

/* -------------------------------------------------------------------------
   Firma bloğu
   ------------------------------------------------------------------------- */
.idp .company-profile-card {
  background: var(--idp-surface);
  border: 1px solid var(--idp-border);
  border-radius: var(--idp-radius-sm);
}

.idp .company-logo-large {
  width: 120px;
  height: 120px;
  border-radius: var(--idp-radius-sm);
  border: 1px solid var(--idp-border);
  background: var(--idp-card);
}

.idp .company-logo-large img {
  max-width: 100px;
  max-height: 100px;
}

/* Avatar zemini PHP'de md5'ten üretiliyor (firma başına sabit renk) → o tek
   inline style kalmak zorunda; ölçü/şekil burada. */
.idp .company-avatar {
  width: 100px;
  height: 100px;
  border-radius: 10px;
  font-size: 2.5rem;
  font-weight: 700;
}

.idp .company-title {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--idp-ink);
}

.idp .company-short-name {
  font-size: 1rem;
}

.idp .section-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--idp-ink);
}

/* Tema/bootstrap .small ve <small> öğelerini ~12px'e indiriyor; iletişim
   kartındaki etiketler (Telefon, E-posta, Adres) o boyutta okunmuyor. */
.idp .contact-item small,
.idp .employee-count small,
.idp .single-percentage small {
  font-size: .9375rem;
}

.idp .contact-item strong,
.idp .contact-item a {
  font-size: 1.0625rem;
}

.idp .section-title i,
.idp .contact-icon i,
.idp .location-icon i,
.idp .description-icon i {
  color: var(--idp-bordo) !important;  /* tema .text-primary mavisini eziyor */
}

.idp .contact-info-card {
  background: var(--idp-surface) !important;
  border: 1px solid var(--idp-border);
  border-radius: var(--idp-radius-sm);
}

.idp .contact-item a {
  color: var(--idp-bordo) !important;
}

/* -------------------------------------------------------------------------
   Rozetler — tema/bootstrap'in bg-*-subtle tonlarını tek dile indiriyor
   ------------------------------------------------------------------------- */
.idp .sector-badge .badge,
.idp .employee-count .badge {
  background: var(--idp-bordo-sf) !important;
  color: var(--idp-bordo) !important;
  font-size: .9375rem;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 999px;
}

.idp .company-website .btn {
  border-color: var(--idp-bordo);
  color: var(--idp-bordo);
}

.idp .company-website .btn:hover {
  background: var(--idp-bordo);
  color: #fff;
}

/* -------------------------------------------------------------------------
   Engel durumu bloğu
   ------------------------------------------------------------------------- */
.idp .disability-type-item {
  background: var(--idp-surface);
  border: 1px solid var(--idp-border);
  border-radius: 999px;
  padding: 9px 16px;
  margin: 0;
  font-size: 1.0625rem;
}

.idp .disability-types-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.idp .disability-section-title {
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--idp-muted);
}

.idp .single-percentage,
.idp .description-content {
  background: var(--idp-surface) !important;
  border: 1px solid var(--idp-border);
  border-radius: var(--idp-radius-sm);
}

.idp .percentage-icon i {
  color: var(--idp-bordo);
  font-size: 1.25rem;
}

.idp .percentage-value {
  font-size: 1.5rem;
}

.idp .percentage-label {
  font-size: 1rem;
  font-weight: 700;
  color: var(--idp-ink);
}

.idp .progress {
  height: 8px;
  border-radius: 999px;
  background: var(--idp-border);
}

/* -------------------------------------------------------------------------
   Başvuru durumu bloğu — künye satırları
   ------------------------------------------------------------------------- */
.idp .idp-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.idp .idp-fact {
  background: var(--idp-surface);
  border: 1px solid var(--idp-border);
  border-radius: var(--idp-radius-sm);
  padding: 14px 16px;
}

.idp .idp-fact__label {
  display: block;
  font-size: .9375rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--idp-muted);
  margin-bottom: 6px;
}

.idp .idp-fact__value {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--idp-ink);
}

/* -------------------------------------------------------------------------
   SIDEBAR — baştan aşağı yeniden kuruldu (.idp-side).
   Yapı: (1) son başvuru sayaç bloğu, (2) ikon-daireli künye satırları,
   (3) başvuru CTA'sı. Eski `.job-meta-data` / `.idp-side-title` kuralları
   kaldırıldı — artık o markup yok.
   sticky: uzun ilanlarda CTA ekrandan kaçmasın (yalnız ≥1200px).
   ------------------------------------------------------------------------- */
.idp .job-company-info {
  background: var(--idp-card);
  border: 1px solid var(--idp-border);
  /* Üstte ince bordo şerit: hero imza şeridini yankılar. */
  border-top: 3px solid var(--idp-bordo);
  border-radius: var(--idp-radius);
  padding: 22px;
}

@media (min-width: 1200px) {
  .idp .job-company-info {
    position: sticky;
    top: 24px;
  }
}

/* (1) Son başvuru sayaç bloğu — sayfanın "karakter" öğesi. Tonu kalan
   güne göre değişir: is-open (bordo/sakin) → is-urgent (turuncu/uyarı)
   → is-expired/is-neutral (gri). Renkler bilgi taşır, marka değil. */
.idp .idp-side-deadline {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 3px;
  padding: 18px 16px;
  border-radius: var(--idp-radius-sm);
  border: 1px solid transparent;
  margin-bottom: 20px;
}

.idp .idp-side-deadline__ic {
  font-size: 1.75rem;
  line-height: 1;
  margin-bottom: 3px;
}

.idp .idp-side-deadline__main {
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.2;
}

.idp .idp-side-deadline__sub {
  font-size: .9375rem;
  font-weight: 600;
  opacity: .85;
}

.idp .idp-side-deadline.is-open {
  background: var(--idp-bordo-sf);
  border-color: var(--idp-bordo);
  color: var(--idp-bordo);
}

.idp .idp-side-deadline.is-urgent {
  background: #fff4e5;
  border-color: #f59e0b;
  color: #9a3412;
}

.idp .idp-side-deadline.is-expired,
.idp .idp-side-deadline.is-neutral {
  background: var(--idp-surface);
  border-color: var(--idp-border);
  color: var(--idp-muted);
}

/* (2) Künye satırları — her satır ikon dairesi + etiket/değer. */
.idp .idp-side-facts {
  list-style: none;
  margin: 0;
  padding: 0;
}

.idp .idp-side-fact {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 0;
  margin: 0;
  border-bottom: 1px solid var(--idp-border);
}

.idp .idp-side-fact:last-child { border-bottom: none; }

.idp .idp-side-fact__ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--idp-bordo-sf);
  color: var(--idp-bordo);
  font-size: 1.125rem;
  line-height: 1;
}

.idp .idp-side-fact__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;  /* uzun değerler (eğitim listesi) sarabilsin */
}

.idp .idp-side-fact__body small {
  font-size: .8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--idp-muted);
}

.idp .idp-side-fact__body strong {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--idp-ink);
  line-height: 1.35;
}

/* Sürücü belgesi satırı: badge'ler alt satıra taşabilsin → ikon üste hizalı. */
.idp .idp-side-fact--wide { align-items: flex-start; }
.idp .idp-side-fact--wide .idp-side-fact__ic { margin-top: 2px; }

.idp .idp-side-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

/* Rozetler tek dilde bordo pill. */
.idp .license-class,
.idp .src-badge {
  background: var(--idp-bordo-sf) !important;
  color: var(--idp-bordo) !important;
  font-size: .875rem;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 999px;
}

/* (3) Başvuru CTA'sı — künyeden ince ayraçla ayrılır. */
.idp .idp-side-cta {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--idp-border);
}

.idp .idp-side-cta .idp-apply {
  margin-top: 0;
}

/* -------------------------------------------------------------------------
   Başvuru butonu ve durumları
   Eskiden renkler PHP'de $statusStyle string'i olarak kuruluyor ve inline
   basılıyordu. Artık durum → class; renk burada. Yeni durum eklenecekse
   PHP'de map'e bir satır, buraya bir kural.
   ------------------------------------------------------------------------- */
.idp .idp-apply {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 56px;
  margin-top: 20px;
  padding: 15px 20px;
  border-radius: var(--idp-radius-sm);
  border: 1px solid transparent;
  font-size: 1.125rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

/* Birincil "Başvur" — tema .btn-five'ı eziyor */
.idp .idp-apply--primary {
  background: var(--idp-bordo);
  border-color: var(--idp-bordo);
  color: #fff !important;
}

.idp .idp-apply--primary:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
}

/* Pasif: giriş yapılmamış. opacity YOK — .5 opacity kontrastı AA altına
   düşürüyordu (aynı hata master.css .stats-description'da düzeltildi). */
.idp .idp-apply--muted {
  background: var(--idp-surface);
  border-color: var(--idp-border);
  color: #4b5563 !important;
}

.idp .idp-apply--muted:hover {
  background: #e9ebee;
}

/* Durum renkleri semantik: bordo DEĞİL. Kullanıcı "beklemede" ile
   "reddedildi"yi renkten ayırt edebilmeli; marka aksanı burada bilgi taşımaz.
   Tüm çiftler AA (4.5:1) üstünde. */
.idp .idp-apply--pending {
  background: #fff8e6;
  border-color: #ffc107;
  color: #7a5200 !important;
}

.idp .idp-apply--review {
  background: #e6f7ff;
  border-color: #0dcaf0;
  color: #055160 !important;
}

.idp .idp-apply--accepted {
  background: #e6fff0;
  border-color: #198754;
  color: #0a5c36 !important;
}

.idp .idp-apply--rejected {
  background: #fff0f0;
  border-color: #dc3545;
  color: #8b0000 !important;
}

.idp .idp-apply--referred {
  background: #e6f1ff;
  border-color: #0d6efd;
  color: #084298 !important;
}

.idp .idp-apply__note {
  margin-top: 10px;
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--idp-muted);
  text-align: center;
}

/* -------------------------------------------------------------------------
   Mobil
   ------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .idp .page-header-grandient { padding: 32px 0 28px; }
  .idp .job-details { padding: 24px 0 48px; }
  .idp .idp-card,
  .idp .job-company-info { padding: 18px; }
  .idp .details-post-data { margin-right: 0 !important; padding-right: 0 !important; }
  /* Hero tek kolona iner: CTA başlığın altında tam genişlik, sola yaslı. */
  .idp .idp-hero { align-items: flex-start; }
  .idp .idp-hero__cta { flex-basis: 100%; }
  .idp .idp-apply--hero { width: 100%; }
  .idp .idp-hero__logo { width: 60px; height: 60px; }
}

/* home_lst.css:17629 aynı kırılımda `padding-top: 10%!important` ve
   `font-size: 3rem!important` yazıyor (kapak görselli eski tasarım için).
   !important'ı ancak !important eziyor — kaynak kuralları oradan silinene
   kadar bu blok gerekli. */
@media (max-width: 480px) {
  .idp .page-header-grandient { padding: 28px 0 24px !important; }
  .idp .page-top-title { font-size: var(--fs-h2) !important; }
  .idp .idp-hero-meta { gap: 8px; }
  .idp .idp-hero-meta__item { font-size: .9375rem; padding: 5px 13px 5px 5px; }
  .idp .idp-hero-meta__item i { width: 26px; height: 26px; }
}

/* =========================================================================
   Popup'lar — ilan_detay.php'nin <body> içindeki <style> bloğundan taşındı.
   -------------------------------------------------------------------------
   BİLİNÇLİ olarak Bootstrap modal'a ÇEVRİLMEDİ: sayfa bootstrap.bundle'ı
   yüklüyor ve markup hâlâ data-bs-toggle diyor, ama JS tıklamayı yakalayıp
   (preventDefault) bu el yapımı popup'ı açıyor. Çevirmek başvuru gönderme
   yolunu riske atardı — ayrı bir iş olarak ele alınmalı.
   z-index merdiveni korundu: alert(222222) < confirmation(222223) <
   success(222224). Bootstrap modal'ı 1050'de; bunlar kasıtlı olarak üstünde.
   ========================================================================= */

.custom-popup,
.confirmation-popup,
.success-popup {
  display: none;
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, .5);
  z-index: 1050;
  opacity: 0;
  transition: opacity .3s ease;
}

.custom-popup.show       { opacity: 1; z-index: 222222; }
.confirmation-popup.show { opacity: 1; z-index: 222223; }
.success-popup.show      { opacity: 1; z-index: 222224; }

.custom-popup-content,
.confirmation-popup-content,
.success-popup-content {
  position: relative;
  background-color: #fff;
  margin: 5% auto;
  width: 90%;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, .2);
  transform: translateY(-20px);
  transition: transform .3s ease;
}

.custom-popup-content       { max-width: 800px; }
.confirmation-popup-content,
.success-popup-content      { max-width: 500px; }

.custom-popup.show .custom-popup-content,
.confirmation-popup.show .confirmation-popup-content,
.success-popup.show .success-popup-content {
  transform: translateY(0);
}

.custom-popup-header,
.confirmation-popup-header,
.success-popup-header {
  padding: 1.5rem;
  border-bottom: 1px solid #eee;
  position: relative;
}

.confirmation-popup-header,
.success-popup-header { text-align: center; }

.success-popup-header {
  background-color: #d4edda;
  border-radius: 15px 15px 0 0;
}

.custom-popup-title,
.confirmation-popup-title,
.success-popup-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
}

.custom-popup-title       { text-align: center; width: 100%; }
.confirmation-popup-title { color: #333; }
.success-popup-title      { color: #155724; }

.custom-popup-close,
.confirmation-popup-close,
.success-popup-close {
  position: absolute;
  right: 1rem;
  top: 1rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  padding: .5rem;
  line-height: 1;
  color: #666;
  transition: color .2s ease;
}

.custom-popup-close:hover,
.confirmation-popup-close:hover { color: #333; }
.success-popup-close            { color: #155724; }
.success-popup-close:hover      { color: #0f5132; }

.custom-popup-body,
.confirmation-popup-body,
.success-popup-body { padding: 1.5rem; }

.confirmation-popup-body,
.success-popup-body { text-align: center; }

.custom-popup-footer,
.confirmation-popup-footer,
.success-popup-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid #eee;
}

.custom-popup-footer { text-align: right; }

.confirmation-popup-footer {
  text-align: center;
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.success-popup-footer { text-align: center; }

.confirmation-popup-btn,
.success-popup-btn {
  padding: .5rem 1.5rem;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  font-weight: 500;
  transition: all .2s ease;
}

/* "Zaten Başvurdunuz" kutusu + içindeki durum kartı.
   .idp altında DEĞİL: popup <body> kökünde, .main-page-wrapper'ın içinde
   ama bu kurallar geri kalan popup CSS'iyle aynı yerde dursun diye burada. */
.idp-applied-box {
  background-color: #f8f9fa;
  border-radius: 12px;
  padding: 1.25rem;
}

.idp-applied-box > .d-flex i { color: var(--accent); }

.idp-status-card {
  background-color: #fff;
  border: 1px solid #e8eaed;
  border-radius: 8px;
  padding: 1rem;
  margin: 1rem 0;
}

.idp-status-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  margin-right: .75rem;
  border-radius: 50%;
  color: #fff;
}

.idp-status-card__desc {
  font-size: .9375rem;
  color: #6b7280;
  margin: 0 0 .5rem;
}

.idp-status-card .progress {
  height: 6px;
  border-radius: 3px;
}

.custom-popup .btn-primary,
.confirmation-popup-btn.confirm {
  background-color: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.custom-popup .btn-primary:hover {
  background-color: var(--accent-dark);
  border-color: var(--accent-dark);
}

.confirmation-popup-btn.confirm:hover { background-color: var(--accent-dark); }

.confirmation-popup-btn.cancel {
  background-color: #f8f9fa;
  color: #333;
  border: 1px solid #dee2e6;
}

.confirmation-popup-btn.cancel:hover { background-color: #e9ecef; }

.success-popup-icon {
  font-size: 3rem;
  color: #28a745;
  margin-bottom: 1rem;
}

.success-popup-message {
  color: #155724;
  font-size: 1.1rem;
  margin-bottom: 1rem;
}

.success-popup-btn {
  background-color: #28a745;
  color: #fff;
}

.success-popup-btn:hover { background-color: #218838; }