/* =============================================================================
   Servisilan · tema üstü düzeltmeler
   Jobbox style.css'i EZMEZ, yalnızca projeye özgü eklemeler yapar.
   ============================================================================= */

/* Tema İngilizce içerik için tasarlandı; Türkçe başlıklar daha uzun oluyor */
.heading-banner { line-height: 1.18; }

/* -----------------------------------------------------------------------------
   Site logosu · tek ölçü
   Logo yönetim panelinden yükleniyor, yani boyutu belli değil. Bu yüzden
   `max-height` yerine SABİT yükseklik veriliyor: max-height yalnızca büyük
   dosyayı küçültür, küçük dosyayı büyütmez — 140×36'lık logomuz olduğu gibi
   kalıyordu ve başlıkta küçük duruyordu.

   48px, başlık satırının (.main-header) kendi yüksekliğiyle aynı: logo
   büyürken başlık çubuğu hiç uzamıyor.

   `width: auto` + `object-fit: contain` en-boy oranını korur; `max-width`
   ise çok geniş bir logo yüklendiğinde menüyü ezmesini engeller (o durumda
   yükseklik kendiliğinden düşer).
   -------------------------------------------------------------------------- */
.si-logo {
  height: 48px;
  width: auto;
  max-width: 260px;
  object-fit: contain;
  object-position: left center;
}
@media (max-width: 575.98px) {
  .si-logo { height: 38px; max-width: 190px; }
}

/* -----------------------------------------------------------------------------
   Bildirimler (toast)
   Ekrana sabit: kullanıcı sayfanın neresinde olursa olsun kaydetme sonucunu
   görüyor. Masaüstünde sağ altta, dar ekranda alt kenara tam genişlikte
   yapışıyor — telefonda köşede duran dar bir kutu okunmuyordu.

   `pointer-events` oyunu: kapsayıcı tıklamayı geçiriyor (altındaki sayfaya
   engel olmasın), tek tek kutular geçirmiyor (kapatma düğmesi çalışsın).
   -------------------------------------------------------------------------- */
.si-toasts {
  position: fixed; z-index: 1080;
  /* Temanın "yukarı çık" düğmesi (#scrollUp) sağ altta 48px, right/bottom:30.
     Bildirim onun ÜSTÜNDE duruyor (30 + 48 + 14 = 92) — aksi hâlde kutu
     düğmeyi örtüyordu (ölçüldü). */
  right: 20px; bottom: 92px;
  display: flex; flex-direction: column; gap: 10px;
  width: min(380px, calc(100vw - 40px));
  pointer-events: none;
}
.si-toast {
  pointer-events: auto;
  display: flex; align-items: flex-start; gap: 10px;
  padding: 13px 14px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #e0e6f7;
  box-shadow: 0 10px 30px rgba(5, 38, 78, .14);
  font-size: 14px; line-height: 1.45; color: #05264e;
  animation: si-toast-in .18s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .si-toast { animation: none; }
}
@keyframes si-toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.si-toast__icon {
  flex: none; width: 21px; height: 21px; margin-top: 1px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700; color: #fff;
}
.si-toast__text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.si-toast__close {
  flex: none; background: none; border: 0; padding: 0;
  width: 22px; height: 22px; line-height: 1;
  font-size: 19px; color: #8a97ab; cursor: pointer;
}
.si-toast__close:hover { color: #05264e; }

/* Türe göre yalnızca sol şerit ve ikon rengi değişiyor; gövde beyaz kalıyor
   ki uzun metin her durumda okunaklı olsun. */
.si-toast--ok    { border-left: 4px solid #1a7f4b; }
.si-toast--error { border-left: 4px solid #a3232c; }
.si-toast--info  { border-left: 4px solid #3c65f5; }
.si-toast--ok    .si-toast__icon { background: #1a7f4b; }
.si-toast--error .si-toast__icon { background: #a3232c; }
.si-toast--info  .si-toast__icon { background: #3c65f5; }

@media (max-width: 575.98px) {
  .si-toasts { right: 12px; left: 12px; bottom: 88px; width: auto; }
}

/* -----------------------------------------------------------------------------
   Güzergâh gösterimi (RouteView)
   İki uç yan yana, aralarında nokta + ok. Ortadaki ok ESNEK (`flex: 1`):
   uç adları uzadıkça ok kısalıyor, kutu taşmıyor.

   Dar ekranda ok YATAYDAN DİKEYE dönüyor — 360px'te yan yana iki sütun
   "İstanbul (Avrupa)" gibi uzun satırlarda harf harf sarıyordu.
   -------------------------------------------------------------------------- */
/* Kutu ve ızgara YALNIZCA tam biçimde; kompakt biçim satır içi kalmalı.
   Ortak `.si-route` yalnızca ad alanı görevi görüyor. */
.si-route--full {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid #e0e6f7;
  border-radius: 10px;
}
.si-route__end {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 3px;
  /* Örnekteki gibi her uç kendi sütununda ORTALI. */
  text-align: center;
}
.si-route__label { font-size: 13px; color: #8a97ab; }
.si-route__title {
  font-size: 19px; font-weight: 700; line-height: 1.25; color: #05264e;
  overflow-wrap: anywhere;
}
.si-route__district { font-size: 14px; color: #4f5e78; }
.si-route__city     { font-size: 13px; color: #e07b39; }

/* Ok: nokta + çizgi + uç. Çizgi soldan sağa renk geçişli, tıpkı örnekteki
   gibi turuncudan lacivere. */
.si-route__arrow {
  flex: 1 1 60px; min-width: 46px; max-width: 160px;
  display: flex; align-items: center;
}
.si-route__dot {
  width: 10px; height: 10px; flex: none;
  border-radius: 50%; background: #f0912d;
}
.si-route__line {
  flex: 1; height: 2px;
  background: linear-gradient(90deg, #f0912d 0%, #2b3a67 100%);
}
.si-route__head {
  width: 0; height: 0; flex: none;
  border-left: 7px solid #2b3a67;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

/* Kart / liste satırı için tek satırlık biçim: aynı görsel dil, küçültülmüş.
   Kutu ve dolgu YOK — satır içinde başka metinlerle yan yana duruyor. */
.si-route--compact {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; line-height: 1.4; color: #05264e;
  flex-wrap: wrap;
}
.si-route--compact b { font-weight: 600; overflow-wrap: anywhere; }
/* Etiket ve ad tek parça: sarma olduğunda "(Nereden)" adından ayrı düşmesin */
.si-route__pair { display: inline-flex; align-items: baseline; gap: 5px; min-width: 0; }
.si-route--compact .si-route__label { font-size: 11.5px; }
.si-route--compact .si-route__arrow { flex: none; width: 38px; }
.si-route--compact .si-route__dot { width: 7px; height: 7px; }
.si-route--compact .si-route__head {
  border-left-width: 6px; border-top-width: 4px; border-bottom-width: 4px;
}

@media (max-width: 575.98px) {
  .si-route--full { flex-direction: column; align-items: stretch; gap: 10px; padding: 16px; }
  .si-route--full .si-route__end { text-align: left; }
  /* Dikey düzende ok da dikey: iki uç alt alta */
  .si-route--full .si-route__arrow {
    max-width: none; height: 26px;
    flex-direction: column; align-items: flex-start; margin-left: 4px;
  }
  .si-route--full .si-route__line {
    width: 2px; height: auto; flex: 1;
    background: linear-gradient(180deg, #f0912d 0%, #2b3a67 100%);
  }
  .si-route--full .si-route__head {
    border-left: 5px solid transparent; border-right: 5px solid transparent;
    border-top: 7px solid #2b3a67; border-bottom: 0; margin-left: -1px;
  }
}

/* Hata sınırındaki iki düğme (bkz. (site)/error.tsx) */
.si-error-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* Alt bilgideki mağaza rozetleri. Bağlantı girilmemişse rozet <a> içinde
   DEĞİL, düz <img> olarak basılıyor; flex hizası ikisinde de aynı kalsın diye
   boşluk `gap` ile veriliyor (temanın `.mr-5`i yalnızca <a> için işlerdi). */
.si-store-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.si-store-badges img { display: block; height: 32px; width: auto; }

/* -----------------------------------------------------------------------------
   Banner alanları (ana sayfa · alt bilgi üstü)
   Görselin oranı yöneticinin yüklediği dosyaya bağlı, bu yüzden SABİT
   YÜKSEKLİK YOK: `width: 100%` + `height: auto` ile ne yüklenirse tam
   genişlikte ve oranı bozulmadan basılıyor. Sabit yükseklik verilseydi farklı
   oranlı bir görselde ya kırpma ya da esneme olurdu.
   -------------------------------------------------------------------------- */
.si-banner-area { margin: 40px 0; }
.si-banner + .si-banner { margin-top: 20px; }
.si-banner {
  border-radius: 12px;
  overflow: hidden;
  line-height: 0;            /* satır içi görselin altındaki boşluk kalksın */
}
.si-banner a { display: block; }
/* Yükseklik SABİT DEĞİL, oranı görselden geliyor; `max-height` yalnızca
   emniyet kemeri: yanlışlıkla dikey bir görsel yüklenirse sayfayı ele
   geçirmesin. O durumda `contain` kırpmadan sığdırır, kenarlarda boşluk
   kalır — kırpmak yöneticinin görselinden parça götürürdü. */
.si-banner__img {
  display: block; width: 100%; height: auto;
  max-height: 420px; object-fit: contain;
}
@media (max-width: 767.98px) {
  .si-banner-area { margin: 28px 0; }
}

/* Ağa özel ilan rozeti — temada karşılığı yok */
.badge-private {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700; background: #efeafc; color: #6b4bbd;
  vertical-align: middle;
}
.badge-verified {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700; background: #e7f6ee; color: #1a7f4b;
  vertical-align: middle;
}
/* Sertifika ikonlu sürüm: ikon ve metin aynı temel çizgide dursun diye
   `inline-flex`. `.badge-verified` satır içi olduğu için `mt-5` gibi tema
   yardımcıları etkisizdi — bu yüzden kendi üst boşluğunu veriyor. */
.si-verified {
  /* `inline-flex` DEĞİL: temanın `.location-small`u `inline-block` olduğu
     için rozet onun yanına, aynı satıra oturuyordu. `flex` blok seviyesine
     çıkarıp kendi satırına indiriyor; `fit-content` ise hapı satır boyunca
     germesini engelliyor. */
  display: flex; width: fit-content;
  align-items: center; gap: 5px;
  margin-top: 7px;
}
.si-verified__icon { flex: none; }

.badge-status {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700; background: #fdf3e0; color: #8a5a00;
  vertical-align: middle;
}

/* Kilitli iletişim kutusu */
.locked-box {
  background: #f4f1fd; border: 1px solid #e3dcf8; border-radius: 8px;
  padding: 20px 24px; margin: 24px 0;
}
.locked-box strong { color: #6b4bbd; }

/* Form hataları */
.form-error {
  background: #fdecec; color: #a3232c; border-radius: 8px;
  padding: 10px 14px; font-size: 14px; margin-bottom: 16px;
}
.field-error { color: #a3232c; font-size: 13px; display: block; margin-top: -10px; margin-bottom: 12px; }

/* İlan kartında açıklama taşmasın */
.card-grid-2 .card-block-info p { min-height: 48px; }

/* Boş durum */
.empty-state {
  background: #fff; border: 1px dashed #e0e6f7; border-radius: 8px;
  padding: 56px 24px; text-align: center; color: #66789c;
}

/* Sayfalama */
.pager-simple { display: flex; gap: 10px; justify-content: center; align-items: center; margin-top: 40px; }

/* Panel yan menüsü */
.panel-nav { list-style: none; padding: 0; margin: 0; }
.panel-nav li a {
  display: block; padding: 11px 16px; border-radius: 8px;
  color: #4f5e78; font-size: 15px;
}
.panel-nav li a:hover { background: #f2f6fd; color: #3c65f5; }
.panel-nav li a.active { background: #3c65f5; color: #fff; }

/* -----------------------------------------------------------------------------
   Hero · popüler etiketler
   Tema `.list-tags-banner` için yalnızca <strong> ve düz <a> stili tanımlıyor;
   demo virgülle ayrılmış linkler kullanıyor. Biz <ul><li> kullandığımız için
   madde işaretli ve alt alta diziliyordu.

   ÖZGÜLLÜK NOTU — bu kurallar neden bu kadar uzun seçicilerle yazıldı:
   Tema şunu tanımlıyor:
       .banner-hero .block-banner .list-tags-banner a   →  (0,3,1)
   Kısa yazılan `.list-tags-banner ul li a:hover` ise    →  (0,2,3)
   Sınıf sütunu 2 < 3 olduğu için tema KAZANIYOR; renk ve alt çizgi bir türlü
   değişmiyordu. `!important` yerine tema yolunun tamamı tekrarlanıp
   özgüllük (0,4,3) / (0,5,3) seviyesine çıkarıldı — kural okunabilir kalıyor
   ve ileride başka bir şeyi ezme riski doğurmuyor.
   -------------------------------------------------------------------------- */
.list-tags-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
}
.list-tags-banner strong { margin-right: 0; white-space: nowrap; }
.list-tags-banner ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.list-tags-banner ul li { margin: 0; }

/* İki seçici, tek gövde:
     1) `.list-tags-banner ul li a` (0,1,3) — hero DIŞINDAKİ etiket grupları
        (ör. "Şehre göre ilanlar"). Orada temanın rakip kuralı yok.
     2) tam tema yolu (0,4,3) — hero içinde temanın (0,3,1) kuralını geçer.
   Böylece her iki grup da AYNI pill görünümünü alır. */
.list-tags-banner ul li a,
.banner-hero .block-banner .list-tags-banner ul li a {
  display: inline-block;
  padding: 6px 14px;
  margin-left: 0;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #E0E6F7;
  font-size: 13px;
  line-height: 1.4;
  color: #05264E;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

/* hover'da yazı BEYAZ — aynı ikili seçici mantığı */
.list-tags-banner ul li a:hover,
.list-tags-banner ul li a:focus-visible,
.banner-hero .block-banner .list-tags-banner ul li a:hover,
.banner-hero .block-banner .list-tags-banner ul li a:focus-visible {
  background: #3C65F5;
  border-color: #3C65F5;
  color: #fff;
  text-decoration: none;
}
.list-tags-banner ul li a:focus-visible,
.banner-hero .block-banner .list-tags-banner ul li a:focus-visible {
  outline: 2px solid #05264E;
  outline-offset: 2px;
}

/* =============================================================================
   Ana sayfa · "Ne arıyorsunuz?" kart ızgarası
   Temanın `item-logo` / `card-grid-*` bileşenleri küçük ikon + metin için
   tasarlanmış; görsel öncelikli bir kart için kendi sınıflarımızı yazıyoruz.
   `si-` öneki tema sınıflarıyla çakışmayı önler.
   ============================================================================= */
.si-cats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
@media (max-width: 1199px) { .si-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px)  { .si-cats { grid-template-columns: 1fr; } }

.si-cat {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #E0E6F7;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  transition: transform .22s cubic-bezier(.2,.7,.3,1),
              box-shadow .22s ease, border-color .22s ease;
}
.si-cat:hover {
  transform: translateY(-6px);
  border-color: #C7D4FB;
  box-shadow: 0 18px 40px rgba(5, 38, 78, .13);
}

.si-cat__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: linear-gradient(135deg, #05264E, #3C65F5);
}
.si-cat__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
.si-cat:hover .si-cat__media img { transform: scale(1.06); }

/* Görsel yoksa: marka gradyanı + baş harf */
.si-cat__ph {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: rgba(255,255,255,.9);
  font-size: 38px; font-weight: 800; letter-spacing: -1px;
}

.si-cat__badge {
  position: absolute; top: 12px; left: 12px;
  background: #fff; color: #05264E;
  border-radius: 999px; padding: 4px 12px;
  font-size: 12px; font-weight: 700;
  box-shadow: 0 4px 14px rgba(5, 38, 78, .18);
}

.si-cat__body {
  padding: 20px 22px 22px;
  display: flex; flex-direction: column; gap: 7px;
  flex: 1;
}
.si-cat__title {
  font-size: 17px; font-weight: 700; color: #05264E;
  letter-spacing: -.3px; line-height: 1.35; margin: 0;
}
.si-cat__desc {
  font-size: 14px; line-height: 1.6; color: #66789C; margin: 0;
  flex: 1;
}
.si-cat__more {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 6px;
  font-size: 14px; font-weight: 600; color: #3C65F5;
}
.si-cat__more svg { transition: transform .22s ease; }
.si-cat:hover .si-cat__more svg { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .si-cat, .si-cat__media img, .si-cat__more svg { transition: none; }
  .si-cat:hover { transform: none; }
  .si-cat:hover .si-cat__media img { transform: none; }
}

/* İlan kartındaki ilan sahibi rozeti.
   Artık ortak `Avatar` bileşeni kullanılıyor (profil resmi varsa onu, yoksa
   baş harfleri basar). Tek fark köşeler: kart dilinde yuvarlak kare duruyor,
   başlıktaki avatar ise daire. Eski `.si-avatar` sınıfı kaldırıldı — tek bir
   avatar bileşeni olsun, ikinci bir görünüm kaynağı kalmasın. */
.card-grid-2-image-left .image-box .si-ava {
  border-radius: 12px;
  font-weight: 800;
}

/* İlan kartındaki güzergâh / çalışma bölgesi / saat satırları */
.si-facts { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.si-facts li {
  display: flex; gap: 8px; align-items: baseline;
  font-size: 13.5px; color: #05264E; line-height: 1.5;
}
.si-facts__k {
  flex: none; min-width: 96px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .3px;
  text-transform: uppercase; color: #8595B5;
}

/* Satır görünümünde sol sütuna taşınan bilgiler: etiket ÜSTTE, değer altta.
   Yan yana yazıldığında ("GÜZERGÂH" 96px + değer) 330px'lik sütunda değere
   çok az yer kalıyordu. */
.si-facts--stacked li { display: block; }
.si-facts--stacked .si-facts__k { display: block; min-width: 0; margin-bottom: 2px; }
.si-facts--stacked li + li { margin-top: 8px; }

/* =============================================================================
   Taklit (kullanıcı olarak görüntüle) uyarı şeridi
   Bilerek dikkat çekici: yönetici hangi kimlikle işlem yaptığını kaybetmemeli.
   ============================================================================= */
.si-imp {
  position: sticky; top: 0; z-index: 60;
  background: linear-gradient(90deg, #7A3E00, #B4551C);
  color: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
}
.si-imp__inner {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 20px; flex-wrap: wrap;
}
.si-imp__dot {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: #FFD166; box-shadow: 0 0 0 4px rgba(255, 209, 102, .25);
}
.si-imp__text { flex: 1; min-width: 220px; font-size: 13.5px; line-height: 1.45; }
.si-imp__text b { font-weight: 700; }
.si-imp__hint { display: block; font-size: 12px; opacity: .8; }
.si-imp__exit {
  border: 1px solid rgba(255,255,255,.55);
  background: rgba(255,255,255,.1);
  color: #fff; font: inherit; font-size: 13px; font-weight: 600;
  padding: 6px 14px; border-radius: 8px; cursor: pointer; white-space: nowrap;
}
.si-imp__exit:hover { background: #fff; color: #7A3E00; }

/* Şerit sticky olduğu için tema header'ı onun altına insin */
.si-imp + .header.sticky-bar { top: 0; }

/* =============================================================================
   Profil resmi
   ============================================================================= */
.si-ava {
  display: inline-grid; place-items: center; flex: none;
  border-radius: 50%; overflow: hidden;
  background: linear-gradient(135deg, #E8EEFF, #C7D4FB);
  color: #3C65F5; font-weight: 700; line-height: 1;
  user-select: none;
}
.si-ava__img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Header'daki isim + avatar */
.si-userlink {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 14px; font-weight: 600; color: #05264E;
  text-decoration: none;
}
.si-userlink:hover { color: #3C65F5; }

/* Panel yan menüsü — aktif satır belirgin olsun */
.panel-nav li a { display: flex; align-items: center; gap: 9px; }
.panel-nav li a .si-ava { margin-inline-end: 2px; }

/* Profil formu */
.si-profile-head {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding-bottom: 22px; margin-bottom: 22px;
  border-bottom: 1px solid #E0E6F7;
}
.si-profile-head__info b { display: block; font-size: 17px; color: #05264E; }
.si-profile-head__info span { font-size: 14px; color: #66789C; }
.si-upload-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.si-form-note { font-size: 13px; color: #66789C; margin-top: 6px; display: block; }
.si-ok {
  background: #E7F6EE; color: #1a7f4b; border-radius: 8px;
  padding: 10px 14px; font-size: 14px; margin-bottom: 16px;
}

/* =============================================================================
   Panel · ilan satırı işlem ikonları
   ============================================================================= */
.si-row-end {
  display: flex; align-items: center; gap: 8px;
  justify-content: flex-end; flex-wrap: wrap;
}
@media (max-width: 991px) { .si-row-end { justify-content: flex-start; } }

.si-row-actions { display: inline-flex; gap: 6px; align-items: center; }
.si-icon-btn {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: 8px;
  border: 1px solid #E0E6F7;
  background: #fff;
  color: #4F5E78;
  cursor: pointer;
  transition: all .15s ease;
}
.si-icon-btn:hover { border-color: #3C65F5; color: #3C65F5; background: #F4F7FF; }
.si-icon-btn--danger:hover { border-color: #A81F27; color: #A81F27; background: #FDF1F1; }
.si-icon-btn svg { display: block; }

/* =============================================================================
   Header sağ blok · Jobbox dashboard düzeni
   ---------------------------------------------------------------------------
   .member-login / .btn-notify / .info-member / .icon-edit / .icon-down
   sınıfları temanın style.css'inde YOK — Jobbox'ın dashboard varyantından
   geliyorlar. Tema dosyasına dokunmamak için (yükseltmede kaybolurdu) burada
   yeniden yazıldılar. İkonlar dış dosya yerine gömülü data-URI: header her
   sayfada var, iki ek istek etmeye değmez.
   ============================================================================= */

/* ÖLÇÜLDÜ: temanın `.block-signin`i `display:block`. Üç inline-block çocuk
   (İlan Ekle + zil + üye kutusu) 245px'lik kutuya sığmayıp alt satıra
   taşıyordu — üye kutusu header'ın dışına sarkıyordu. Satırı flex'e çevirip
   sarmayı kapatıyoruz; yer açmak için de menü şeridinin daralmasına izin
   veriyoruz (nav 942px alıp sağ bloğu boğuyordu). */
.header-right .block-signin {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 12px;
}
.main-header .header-right { flex: 0 0 auto; }
.main-header .header-nav { min-width: 0; }

.block-signin .btn.icon-edit {
  padding-inline-start: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 18px center;
}

/* padding: 0 zorunlu — temanın `.btn` kuralı 18px/25px dolgu veriyor ve
   40x40 kutu ona eklenip zil ikonunu dev bir düğmeye çevirirdi. */
.btn-notify {
  position: relative;
  display: inline-block;
  padding: 0;
  box-sizing: border-box;
  width: 40px; height: 40px;
  border-radius: 50%;
  background-color: #F2F6FD;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%233C65F5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.7 21a2 2 0 0 1-3.4 0'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  vertical-align: middle;
  transition: background-color .15s ease;
}
.btn-notify:hover { background-color: #E3EBFC; }

/* Okunmamış sayacı. Rozet yalnızca sayı > 0 iken basılıyor (bkz. SiteHeader) */
.btn-notify .notify-count {
  position: absolute; top: -4px; inset-inline-end: -4px;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px;
  background: #E74C3C; color: #fff;
  font-size: 11px; line-height: 18px; font-weight: 700;
  text-align: center;
}

.member-login {
  display: inline-flex; align-items: center; gap: 10px;
  vertical-align: middle;
  white-space: nowrap;
}
.member-login .si-ava { flex: 0 0 auto; }
.info-member { line-height: 1.25; text-align: start; }
.info-member > strong { display: block; font-size: 14px; }

.info-member .icon-down {
  display: inline-block;
  padding-inline-end: 16px;
  background-image: url("../imgs/template/icons/arrow-down.svg");
  background-repeat: no-repeat;
  background-position: right center;
  cursor: pointer;
}

/* Bootstrap açılır menüsü temanın gölge/köşe diliyle uyumlansın */
.header-right .dropdown-menu {
  border: 1px solid #E0E6F7;
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(28, 41, 71, .12);
  padding: 6px;
  min-width: 200px;
}
.header-right .dropdown-menu .dropdown-item {
  border-radius: 6px;
  font-size: 14px;
  padding: 8px 12px;
  color: #4F5E78;
}
.header-right .dropdown-menu .dropdown-item:hover,
.header-right .dropdown-menu .dropdown-item:focus {
  background: #F2F6FD; color: #3C65F5;
}
.header-right .dropdown-menu .dropdown-item.active {
  background: #3C65F5; color: #fff;
}

/* Bildirim satırı: başlık + açıklama iki satır, okunmamışlar vurgulu */
.notify-item { display: block; white-space: normal; }
.notify-item strong { display: block; font-size: 13px; font-weight: 600; }
.notify-item span { display: block; font-size: 12px; color: #66789C; }
.notify-item--unread strong::before {
  content: ""; display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: #3C65F5; margin-inline-end: 6px; vertical-align: middle;
}

/* Menü içindeki Çıkış bir <form>; görünüm olarak diğer satırlardan ayrılmasın */
.dropdown-menu .dropdown-item-form { display: block; }
.dropdown-menu .dropdown-item-form button {
  width: 100%; text-align: start;
  background: none; border: 0; cursor: pointer;
}

/* Dar ekranda önce ad/rol yazısı, sonra "İlan Ekle" metni feda edilir —
   üçü birden sığmadığında taşmak yerine küçülsün. */
@media (max-width: 1399px) {
  .block-signin .btn.icon-edit { padding-inline: 34px 16px; background-position: 12px center; }
  .member-login .info-member { display: none; }
}

/* "Tümünü okundu işaretle" bildirim satırlarından ayrılsın.
   Seçici uzun çünkü rakipleri `.header-right .dropdown-menu .dropdown-item`
   (0,3,0) ve `.dropdown-menu .dropdown-item-form button` (0,3,0; `border:0`
   veriyor). `!important` yerine özgüllük (0,4,1) seviyesine çıkarıldı. */
.header-right .dropdown-menu .dropdown-item-form button.notify-readall {
  border-top: 1px solid #E0E6F7;
  border-radius: 0 0 6px 6px;
  margin-top: 4px;
  padding-top: 10px;
  font-size: 13px;
  color: #3C65F5;
}

/* =============================================================================
   Şehre göre ilanlar · temanın "Top Recruiters" kartından uyarlandı
   ---------------------------------------------------------------------------
   Orijinal kartta `image-left` bir marka logosu taşıyordu. Şehirlerin logosu
   yok ve 81 il için ayrı görsel tutmak istemedik; yerine PLAKA KODU basılıyor.
   `cities.id` zaten plaka kodu olduğu için ek veri gerekmiyor.
   ============================================================================= */
.si-plate {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border-radius: 10px;
  background: linear-gradient(135deg, #E8EEFF, #C7D4FB);
  color: #3C65F5;
  font-size: 16px; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* Kart bir <a> içinde; tema bağlantı rengini miras aldırmıyor, başlık
   griye kayıyordu. Kart içindeki metin renklerini sabitliyoruz. */
.box-swiper .swiper-container .item-logo h4 { color: #05264E; }
.box-swiper .swiper-container a:hover .item-logo h4 { color: #3C65F5; }

/* Kayan alanda `.item-5` float'ları slaydı çökertmesin */
.swiper-style-2 .swiper-slide::after { content: ""; display: block; clear: both; }

/* Swiper devre dışıyken (tek slayt) satırın float'ları çökmesin */
.si-city-row::after { content: ""; display: block; clear: both; }

/* Kurumsal firmalar satırı: tema kartı 5'li diziyor (`.swiper-style-2 .item-5`
   = %20), firmalar bölümünde 4 kolon isteniyor. style.css'ten sonra
   yüklendiğimiz için aynı özgüllükte bu kural kazanıyor; kırılımlar temanın
   kendi eşikleriyle birebir aynı tutuldu, yalnız masaüstü %20 → %25. */
.si-firm-row .item-5 { width: 25%; }
@media (max-width: 991.98px) { .si-firm-row .item-5 { width: 33.33%; } }
@media (max-width: 767.98px) { .si-firm-row .item-5 { width: 50%; } }
@media (max-width: 484.98px) { .si-firm-row .item-5 { width: 100%; } }

/* Kurumsal firma kartı · yeşil köşegen geçiş
   ---------------------------------------------------------------------------
   İlan kartındaki (`.si-ad-card`) sol alttan sağ üste giden renk→saydam
   geçişinin aynısı; tek fark rengin kategoriye göre değil sabit yeşil
   olması. Duraklar (%0/.20, %34/.07, %62 saydam) birebir kopyalandı ki iki
   bölüm yan yana aynı okunsun. Yeşil #1A7F4B projede zaten var: "Onaylı"
   rozeti ve `sehir-ici-yuk` kategorisi bu tonu kullanıyor.

   Seçici `.box-swiper .swiper-container` ile başlıyor çünkü temanın kendi
   `.item-logo` kuralı (style.css:1481) `border` ve `background-color`
   yazıyor; daha kısa bir seçici özgüllükte kaybederdi. */
.si-firm-row { --si-firm: #1A7F4B; --si-firm-rgb: 26, 127, 75; }

.box-swiper .swiper-container .si-firm-row .item-logo {
  position: relative;
  overflow: hidden;
  background-image: linear-gradient(
    to top right,
    rgba(var(--si-firm-rgb), .20) 0%,
    rgba(var(--si-firm-rgb), .07) 34%,
    rgba(255, 255, 255, 0) 62%
  );
  border-color: rgba(var(--si-firm-rgb), .28);
  transition: box-shadow .18s ease, border-color .18s ease;
}
/* Sol kenar çubuğu — ilan kartıyla aynı 4px'lik sözde eleman. */
.box-swiper .swiper-container .si-firm-row .item-logo::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--si-firm);
}
.box-swiper .swiper-container .si-firm-row .item-logo:hover {
  border-color: rgba(var(--si-firm-rgb), .45);
  box-shadow: 0 10px 30px rgba(var(--si-firm-rgb), .18);
}

/* =============================================================================
   İlan haritası (Leaflet)
   Leaflet kendi CSS'ini getiriyor; buradakiler yalnızca kabuk ve popup.
   ============================================================================= */
.si-map-wrap { position: relative; }
.si-map {
  height: 560px;
  width: 100%;
  border-radius: 12px;
  border: 1px solid #E0E6F7;
  background: #F2F6FD;   /* karolar gelene kadar boş beyaz kutu görünmesin */
  z-index: 0;            /* Leaflet iç katmanları sticky header'ın üstüne çıkmasın */
}
@media (max-width: 767px) { .si-map { height: 400px; } }

.si-map-state {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  text-align: center; padding: 20px;
  color: #66789C; font-size: 14px;
  pointer-events: none;
}

.si-map-pop { display: grid; gap: 3px; min-width: 190px; }

/* =============================================================================
   Harita araçları · daire ile alan seçme, mesafe ölçme
   ---------------------------------------------------------------------------
   Çubuk haritanın ÜZERİNDE, sağ üst köşede duruyor. Sol üst köşeye
   dokunulmuyor: orası Leaflet'in yakınlaştırma düğmelerinin yeri.

   767px ALTINDA bindirme kalkıyor ve çubuk haritanın üstündeki kendi
   satırına dönüyor — dar ekranda kutu gerçekten işaretleri kapatıyor.
   (Renk göstergesi `.si-map-legend` aynı sebeple hep haritanın altında.)

   Düğmeler markanın mavisiyle DOLU: harita zemininin üstünde beyaz çerçeveli
   düğmeler "tıklanabilir" değil "seçili" gibi görünüyordu ve karo görselinin
   içinde kayboluyorlardı. Gölge de bu yüzden var — düğmenin haritadan ayrı
   bir katman olduğunu söylüyor.
   ============================================================================= */
.si-map-tools {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-bottom: 12px;
}

@media (min-width: 768px) {
  .si-map-tools {
    position: absolute;
    /* Leaflet'in kendi katmanları en fazla z-index 800 (kontroller)
       kullanıyor; çubuk onların üstünde kalsın. */
    z-index: 900;
    top: 12px; right: 12px;
    margin-bottom: 0;
    justify-content: flex-end;
    /* Dar haritada çubuk tüm genişliği kaplayıp işaretleri kapatmasın. */
    max-width: calc(100% - 84px);
  }
}

.si-map-tool {
  border: 1px solid #3C65F5; background: #3C65F5;
  border-radius: 8px; padding: 8px 15px;
  font-size: 14px; font-weight: 600; color: #fff;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(5, 38, 78, .22);
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.si-map-tool:hover { background: #2647C4; border-color: #2647C4; }
/* Seçili araç: koyu lacivert. Mavinin tonunu koyulaştırmak yerine belirgin
   şekilde başka bir renk — "açık" durumun mavi düğmeden ayrıldığı hemen
   anlaşılsın. */
.si-map-tool.is-active {
  background: #05264E; border-color: #05264E; color: #fff;
}
/* Temizle ikincil eylem: beyaz zemin, uyarı rengi. */
.si-map-tool--clear {
  background: #fff; border-color: #EAD7C8; color: #B4551C;
}
.si-map-tool--clear:hover { background: #FDF0E6; border-color: #D9B99F; color: #B4551C; }

/* İpucu harita üstünde okunacağı için kendi zeminini taşıyor. */
.si-map-tools__hint {
  font-size: 13px; color: #05264E;
  background: rgba(255, 255, 255, .94);
  border-radius: 8px; padding: 7px 12px;
  box-shadow: 0 2px 8px rgba(5, 38, 78, .18);
}

/* Araç açıkken imleç artı: tıklamanın harita gezdirmek değil nokta koymak
   olduğu imleçten anlaşılsın. Sınıf SARMALAYICIDA duruyor — harita kutusunun
   kendi className'i sabit olmak zorunda, gerekçesi AdMap.tsx'te. */
.si-map-wrap--tool .si-map { cursor: crosshair; }

/* Sonuç kutusu — hem ölçüm hem daire seçimi için ortak kabuk */
.si-map-result {
  margin-top: 12px;
  border: 1px solid #E0E6F7; border-radius: 10px;
  background: #F7F9FF; padding: 12px 14px;
}
/* Ölçüm sonucu balonu — haritanın ÜZERİNDE, son tıklanan noktada.
   Leaflet'in balon kabuğu beyaz; ölçüm çizgisiyle aynı sıcak tonu kullanan
   ince bir üst şerit ve `--measure` kutusundaki zemin korunuyor ki hangi
   araca ait olduğu bir bakışta anlaşılsın. */
.si-map-olcumpop .leaflet-popup-content-wrapper {
  background: #FDF6F1;
  border: 1px solid #EAD7C8;
  border-top: 3px solid #B4551C;
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(5, 38, 78, .22);
}
.si-map-olcumpop .leaflet-popup-tip { background: #FDF6F1; border: 1px solid #EAD7C8; }
.si-map-olcumpop .leaflet-popup-content { margin: 11px 14px; }
.si-olcum { display: grid; gap: 2px; }
.si-olcum__ana { font-size: 15px; color: #05264E; }
.si-olcum__satir { font-size: 13px; color: #05264E; }
.si-olcum b { color: #05264E; font-weight: 700; }
.si-olcum__not {
  margin-top: 5px; font-size: 11.5px; color: #7A6A5E; line-height: 1.5;
}

.si-map-result--measure { background: #FDF6F1; border-color: #EAD7C8; }
.si-map-result__main { font-size: 14px; color: #05264E; }
.si-map-result__main b { color: #05264E; }
.si-map-result__sep { margin: 0 8px; color: #B4C0E0; }
.si-map-result__note {
  display: block; margin-top: 5px;
  font-size: 12.5px; color: #66789C; line-height: 1.5;
}

/* Daire içindeki ilanlar. Uzun listede kutu sayfayı itmesin diye kendi
   içinde kayıyor. */
.si-map-result__list {
  list-style: none; margin: 10px 0 0; padding: 0;
  max-height: 240px; overflow-y: auto;
  display: grid; gap: 2px;
}
.si-map-result__list a {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 6px;
  font-size: 14px; color: #05264E; text-decoration: none;
}
.si-map-result__list a:hover { background: #EDF2FF; color: #3C65F5; }
.si-map-result__list i {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
}
/* Satır: renk noktası · başlık (esner) · yol rozeti · konum.
   Başlık uzun olduğunda sağdaki iki bilgiyi kırpmasın diye taşan başlık
   kesiliyor; rozet ve konum `white-space: nowrap` ile bütün kalıyor. */
.si-map-result__title {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.si-map-result__road {
  flex: none; font-style: normal;
  padding: 1px 8px; border-radius: 999px;
  background: #FDF0E6; color: #B4551C;
  font-size: 12px; font-weight: 700; white-space: nowrap;
}
.si-map-result__loc {
  flex: none; padding-left: 4px;
  font-size: 12.5px; color: #66789C; white-space: nowrap;
}
/* Dar ekranda konum düşsün: başlık ve yol mesafesi daha önemli. */
@media (max-width: 575.98px) {
  .si-map-result__loc { display: none; }
}
.si-map-pop strong { font-size: 14px; color: #05264E; }
.si-map-pop a { text-decoration: none; }
.si-map-pop a:hover strong { color: #3C65F5; }
.si-map-pop span { font-size: 12.5px; color: #66789C; }
.si-map-pop em { font-size: 11.5px; color: #8595B5; font-style: normal; }

/* Balondaki kategori satırı: işaretin rengiyle aynı nokta + kategori adı */
.si-map-pop__cat {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: #05264E; font-weight: 600;
}
.si-map-pop__cat i {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
}

/* Kategori renkli işaret.
   `divIcon` varsayılan olarak beyaz zemin + kenarlık alır; ikisi de
   temizleniyor, geriye yalnızca SVG damla kalıyor. Gölge işaretin
   şeklini takip etsin diye ayrı bir görsel değil `drop-shadow`. */
.si-map-pin {
  background: none; border: 0;
  filter: drop-shadow(0 2px 3px rgba(5, 38, 78, .35));
}

/* Renk göstergesi */
.si-map-legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 16px;
}
.si-map-legend__title {
  font-size: 13px; font-weight: 700; color: #2d2e30; margin-right: 4px;
}
.si-map-legend__item {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px 5px 10px; border-radius: 999px;
  border: 1px solid #E0E6F7; background: #fff;
  font-size: 12.5px; color: #2d2e30; text-decoration: none;
  transition: border-color .15s, box-shadow .15s;
}
a.si-map-legend__item:hover {
  border-color: #C7D2F0; box-shadow: 0 2px 8px rgba(5, 38, 78, .08);
}
.si-map-legend__item.is-active {
  border-color: #3C65F5; box-shadow: 0 0 0 1px #3C65F5 inset;
}
.si-map-legend__item i {
  width: 10px; height: 10px; border-radius: 50%; flex: none;
}
.si-map-legend__item b {
  font-weight: 700; color: #66789C; font-size: 11.5px;
}

/* Harita altındaki metin listesinde de aynı renk */
.si-map-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 8px; vertical-align: middle; flex: none;
}

/* Kartın ana bağlantısı: `.item-logo` flex kutusunun tek çocuğu olduğu için
   iç düzeni (rozet | ad + ilçeler | alt satır) kendisi taşımalı. */
.item-logo .si-city-main {
  display: flex; flex-wrap: wrap; width: 100%;
  text-decoration: none;
}

/* Ad + ilçe sütunu kalan genişliğe SIĞMALI.
   Ölçüm: uzun ilçe metni (Ankara) bu kutuyu 178px'e itiyor, rozetle birlikte
   kart genişliğini aşıyor ve flex-wrap onu bir alt satıra atıyordu — o kart
   200px, diğerleri 154px oluyordu. `flex: 1 1 0` + `min-width: 0` ile kutu
   kalan alana sığıyor, metin kendi içinde sarıyor. */
.item-logo .si-city-main .text-info-right {
  flex: 1 1 0;
  min-width: 0;
}

/* Şehir adının altındaki ilçe listesi — daha küçük ve soluk.
   İki satırda kesiliyor: kartlar yan yana durduğu için biri uzayınca
   ızgaranın hizası bozulurdu. */
.si-city-districts {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* İki satırlık yer HER KARTTA ayrılıyor. Ölçüldüğünde ilçe adları bir
     kartta iki satıra taşıp o kartı 136px'ten 182px'e çıkarmış ve beş kartlık
     sıranın alt hizası bozulmuştu; `.item-5` float olduğu için flexbox'ın
     eşitleme davranışı da devreye girmiyor. */
  min-height: 2.9em;
  margin-top: 2px;
  font-size: 12px; line-height: 1.45; color: #66789C;
}

/* =============================================================================
   Açık mavi başlık şeridindeki ikincil düğmeler
   ---------------------------------------------------------------------------
   Temanın `.btn-border-3`ü kenarlıksız ve zemini #EFF2FB. Beyaz sayfa
   gövdesinde düğme gibi duruyor ama `.banner-single-bg` şeridi de açık mavi
   olduğu için orada kayboluyor ve düz metin gibi okunuyordu. Kural yalnızca
   bu şeride sınırlı — panel ve ilan detayındaki kullanımlar etkilenmez.
   ============================================================================= */
.banner-single-bg .btn-border-3 {
  background: #fff;
  border: 1px solid #C7D4FB;
  color: #05264E;
}
.banner-single-bg .btn-border-3:hover,
.banner-single-bg .btn-border-3:focus-visible {
  background: #3C65F5; border-color: #3C65F5; color: #fff;
}

/* İkonlu düğmelerde ikon ile yazı aynı hizada dursun */
.si-btn-icon {
  display: inline-flex; align-items: center; gap: 8px;
}
.si-btn-icon svg { flex: none; }

/* =============================================================================
   Alt sayfa başlık şeridi · yan görseller
   ---------------------------------------------------------------------------
   Tema bu şeride kendi ofis/masa-başı çizimlerini basıyor
   (job-single/left-job-head.svg + right-job-head.svg). Servisilan taşımacılık
   platformu; görseller sektöre uygun olanlarla değiştirildi.

   Tema dosyasına DOKUNULMADI: kural burada, aynı seçiciyle yeniden yazılıyor
   ve site.css style.css'ten SONRA yüklendiği için kazanıyor. Yeni dosya adları
   ayrı olduğu için de bayat önbellek riski yok (§10).

   Geometri (konum/boyut) bilinçli olarak DEĞİŞTİRİLMEDİ; yeni SVG'ler
   orijinallerle aynı viewBox ölçülerinde çizildi (232x201 ve 213x170).
   ============================================================================= */
.banner-hero.banner-single::before {
  background-image: url(../imgs/page/si-head-left.svg);
}
.banner-hero.banner-single::after {
  background-image: url(../imgs/page/si-head-right.svg);
}

/* Dar ekranda iki çizim birbiriyle ve başlık metniyle üst üste biniyor.
   Önce opaklık düşürüldü ama ölçüldüğünde hâlâ düğmenin arkasından geçiyordu;
   bu boyutta tamamen gizlemek daha okunaklı. */
@media (max-width: 767px) {
  .banner-hero.banner-single::before,
  .banner-hero.banner-single::after { display: none; }
}

/* =============================================================================
   Tanıtım bölümü arka planı
   Hero'nun `bg-homepage1` bandıyla aynı SVG. Sınıfın kendisi yeniden
   kullanılamıyor çünkü o, sayfanın en üstüne (top:0) çakılı.
   ============================================================================= */
.si-promo { position: relative; }
.si-promo-bg {
  position: absolute;
  /* Bölümün mt-100/mb-100 boşluklarına da taşsın; kutuyla sınırlı kalırsa
     band değil, dikdörtgen bir yama gibi duruyor. */
  inset: -60px 0;
  z-index: -1;
  background: url(../imgs/page/homepage1/bg-banner.svg) no-repeat center / cover;
  /* SVG'nin dekoratif blokları sağ üstte duruyor; bu bölümde metin sütunu da
     sağda olduğu için bloklar paragrafın arkasına denk geliyor ve gürültü
     yapıyordu (ölçüldü, ekran görüntüsüyle görüldü). Yatayda çevrilerek
     yoğunluk illüstrasyonun olduğu sol tarafa alındı. */
  transform: scaleX(-1);
}

/* Dar ekranda bölümler arası boşluk daralıyor; -60px taşma bir üstteki
   "Ne arıyorsunuz?" kartlarının altına 30px giriyordu (ölçüldü). Katman
   z-index:-1 olduğu için içeriği örtmüyordu ama bandın nerede başladığı
   belirsizleşiyordu — taşma küçültüldü. */
@media (max-width: 767px) {
  .si-promo-bg { inset: -20px 0; }
}

/* =============================================================================
   Hero arama kutusundaki açılır listeler
   ---------------------------------------------------------------------------
   Tema bu iki select'i select2 ile sarmalıyor ve ikonları `.select2::before`
   üzerinden çiziyordu. main.js YALNIZCA ilk yüklemede çalıştığı için
   (Next.js istemci tarafı geçişte sayfayı yeniden yüklemiyor) sarmalayıcı
   kurulmuyor, ikonlar kayboluyordu; F5 ile geri geliyordu.

   Çözüm: select2 devre dışı, görünüm native select üzerinde yeniden kuruldu.
   Artık hiçbir JS'e bağlı değil — ilk yükleme ile geçiş aynı sonucu veriyor.

   ÖZGÜLLÜK: temanın `.banner-hero .block-banner .form-find .form-input`
   kuralı (0,4,0) dolguyu ezerdi; buradaki seçiciler bir sınıf daha uzun.
   ============================================================================= */
.banner-hero .block-banner .form-find .si-selectbox {
  position: relative;
  /* ÖLÇÜM: temanın `.block-banner` dolgusu arama kutusuna yalnızca 507px
     bırakıyor (hero görsellerine yer ayrılmış). Esnek kutuda hepsi orantılı
     daralınca select'ler 97px'e düşüyor ve "Araç tipi" → "Ar…" diye
     kırpılıyordu. min-width etiketin sığacağı tabanı garantiler; kısılması
     gereken alan anahtar kelime kutusu (yer tutucusu zaten kırpılıyordu). */
  flex: 1 1 auto;
  min-width: 124px;
  max-width: 180px;
  margin-right: 10px;
}
.banner-hero .block-banner .form-find .input-keysearch { min-width: 0; }

/* sol ikon */
.banner-hero .block-banner .form-find .si-selectbox::before {
  content: "";
  position: absolute; left: 11px; top: 15px;
  width: 18px; height: 18px;
  background-repeat: no-repeat;
  pointer-events: none;
}
.banner-hero .block-banner .form-find .si-selectbox--vehicle::before {
  background-image: url(../imgs/template/icons/industry.svg);
}
.banner-hero .block-banner .form-find .si-selectbox--city::before {
  background-image: url(../imgs/template/icons/icon-location-2.svg);
}

/* alanları ayıran ince dikey çizgi (temada .select2::after idi) */
.banner-hero .block-banner .form-find .si-selectbox::after {
  content: "";
  position: absolute; top: 16px; right: -3px;
  width: 1.4px; height: 18px;
  border-radius: 5px;
  background-color: #B4C0E0;
  pointer-events: none;
}

/* select'in kendisi: tarayıcı okunu kaldır, temanın okunu bas */
.banner-hero .block-banner .form-find .si-selectbox .si-select {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  border-radius: 0;
  width: 100%;
  /* Dolgu select2'nin kullandığı ölçüye çekildi (sol 30px / sağ 26px);
     68px dolgu 97px'lik kutuda metne 29px bırakıyordu. */
  padding: 10px 24px 10px 30px;
  background: transparent url(../imgs/template/icons/arrow-down.svg)
              no-repeat right 8px center;
  cursor: pointer;
  /* Uzun şehir adı kutuyu şişirmesin */
  text-overflow: ellipsis;
}
.banner-hero .block-banner .form-find .si-selectbox .si-select:focus-visible {
  outline: 2px solid #3C65F5;
  outline-offset: -2px;
}

@media (max-width: 991px) {
  .banner-hero .block-banner .form-find .si-selectbox { max-width: 100%; }
  .banner-hero .block-banner .form-find .si-selectbox::after { display: none; }
}

/* İlan detayı · üstteki konum haritası
   Orijinalde burada kapak fotoğrafı vardı (thumb.png, 1326x363). Harita onun
   YERİNİ alıyor ve ondan uzun olmuyor: oran aynı, `max-height` doğal
   yüksekliğe eşit. Dar ekranda 3.65:1 oran haritayı 107px'e indiriyordu —
   kullanılabilir kalması için alt sınır kondu (yine 363px'in altında). */
.banner-hero.banner-image-single .si-banner-map .si-map {
  height: auto;
  aspect-ratio: 1326 / 363;
  max-height: 363px;
  min-height: 190px;
  border-radius: 16px;
  border: 0;
}

/* İlan detayı · bilgi ızgarası
   Tema etiketi ve değeri yan yana diziyor (`.text-description` %50/min 120px).
   Orijinaldeki etiketler kısa ("Industry"); Türkçe karşılıkları uzun olduğu
   için "Çalışma saatleri" 120px'i tam doldurup değere yapışıyordu. */
.job-overview .sidebar-text-info .text-description { padding-right: 12px; }

/* İlan formunda alt başlık (ör. "Güzergâhın haritadaki yeri") */
.si-form-sub {
  font-size: 13px; font-weight: 700; color: #05264E;
  margin: 6px 0 12px;
  padding-top: 14px;
  border-top: 1px solid #E0E6F7;
}

/* Profil formunda kapak önizlemesi — sayfadaki oranın aynısı (1326:366) */
.si-cover-preview {
  border: 1px solid #E0E6F7;
  border-radius: 12px;
  overflow: hidden;
  background: #F2F6FD;
  aspect-ratio: 1326 / 366;
  max-height: 200px;
}
.si-cover-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* =============================================================================
   Harita sayfası · yatay filtre şeridi
   Seçenekler birer bağlantı (JS'siz çalışsın ve filtre paylaşılabilir bir
   adres olsun diye); çipler yatayda akar, dar ekranda yan yana kaydırılır.
   ============================================================================= */
.si-mapfilters {
  background: #fff;
  border: 1px solid #E0E6F7;
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 20px;
}
.si-mapfilters__row {
  display: flex; align-items: center; gap: 12px;
  padding: 6px 0;
}
.si-mapfilters__row + .si-mapfilters__row { border-top: 1px solid #F0F3FB; }
.si-mapfilters__label {
  flex: none; min-width: 78px;
  font-size: 12px; font-weight: 700; letter-spacing: .3px;
  text-transform: uppercase; color: #8595B5;
}
.si-mapfilters__chips {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; min-width: 0;
}
.si-mapfilters__form { display: flex; align-items: center; gap: 8px; }
.si-mapfilters__select {
  border: 1px solid #E0E6F7; border-radius: 999px;
  padding: 6px 12px; font-size: 13px; color: #05264E;
  background: #fff; max-width: 200px;
}

.si-chip {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid #E0E6F7;
  background: #fff;
  font-size: 13px; line-height: 1.4; color: #05264E;
  white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.si-chip:hover { background: #F2F6FD; border-color: #C7D4FB; color: #3C65F5; }
.si-chip--on { background: #3C65F5; border-color: #3C65F5; color: #fff; }
.si-chip--on:hover { background: #2F55DE; border-color: #2F55DE; color: #fff; }
.si-chip--go { background: #F2F6FD; border-color: #C7D4FB; color: #3C65F5; font-weight: 600; }
.si-chip--clear { color: #A81F27; border-color: #F3C4C4; }
.si-chip--clear:hover { background: #FDF1F1; border-color: #A81F27; color: #A81F27; }

@media (max-width: 767px) {
  .si-mapfilters__row { flex-direction: column; align-items: flex-start; gap: 8px; }
  .si-mapfilters__label { min-width: 0; }
  /* Çipler alt alta yığılmasın: yatayda kaydırılabilir tek satır */
  .si-mapfilters__chips { flex-wrap: nowrap; overflow-x: auto; width: 100%; padding-bottom: 4px; }
}

/* İletişim formundaki bal küpü alanı — ekranda görünmez, botlar doldurur.
   `display:none` YERİNE ekran dışına alınıyor: bazı botlar gizli alanları
   atlıyor, konumlandırılmış olanı ise dolduruyor. */
.si-hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* =============================================================================
   Sektörel haberler
   ---------------------------------------------------------------------------
   Yazı kapağı `banner-image-single` içinde ve tema onu `width:100%` basıyor.
   Kapak çizimleri 720x440 olduğu için 1326px'lik kapta ~810px yüksekliğe
   çıkıyordu (ölçüldü) — makale başlığı ekrandan taşıyordu. Kırpmak yerine
   kutu görselin doğal genişliğine sabitlendi: çizim bozulmuyor, letterbox
   oluşmuyor, başlık ilk ekranda kalıyor.
   ============================================================================= */
.si-blog-cover { max-width: 760px; margin-inline: auto; }
.si-blog-cover img { width: 100%; height: auto; border-radius: 16px; display: block; }

/* Kart görselleri sabit oranda kırpılır ki üç kart aynı hizada dursun */
.card-grid-3 .card-grid-3-image figure { margin: 0; }
.card-grid-3 .card-grid-3-image img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}

/* Yazı gövdesi: liste ve ayırıcı temanın content-single'ında tanımsız */
.content-single ul { padding-left: 20px; margin-bottom: 20px; }
.content-single li { line-height: 1.9; color: #4F5E78; }
.content-single hr { border: 0; border-top: 1px solid #E0E6F7; }

/* Kurumsal firma kartında ad iki satıra kadar; sıradaki kartlar aynı hizada
   dursun diye yer HER KARTTA ayrılıyor. Tema h4'ü 16px/26px, iki satır 52px.
   (Şehir kartlarındaki ilçe satırıyla aynı gerekçe — ölçülerek bulundu.) */
.item-logo .si-city-main h4 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 52px;
}

/* Kart alt satırı: rozetli ve rozetsiz kartlar aynı yükseklikte olsun.
   Ölçüldü — "Onaylı" rozeti satırı 24px'ten 28px'e çıkarıyor ve dört kartın
   yalnızca biri kısa kalıyordu. float yerine flex: hizalama da netleşiyor. */
.item-logo .text-info-bottom {
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* Firma panelinde toplu görünürlük kutusu */
.si-visibility-box {
  border: 1px solid #E0E6F7; border-radius: 12px;
  padding: 20px; background: #fff;
}
.si-visibility-box .si-upload-actions form { display: inline-block; }

/* Firma profilinde ağa katıl / ayrıl düğmesi.
   Yan sütundaki bilgi kutusunun (`sidebar-border`) en altında; bilgi
   listesinden ince bir çizgiyle ayrılıyor. Düğme kutu genişliğini kaplıyor
   ki liste satırlarıyla aynı hizada dursun. */
.sidebar-border .si-network {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid #E0E6F7;
}
.sidebar-border .si-network form { display: block; }
.sidebar-border .si-network .btn { width: 100%; }
.sidebar-border .si-network .si-form-note { margin-top: 8px; }

/* Ağ isteklerinde iki blok arası boşluk — blok sırası duruma göre değiştiği
   için boşluğu başlığa sabitlemek yerine kardeş seçiciyle veriyoruz. */
.content-page > div + div > .box-filters-job { margin-top: 50px; }

/* ------------------------------------------------------------------ *
 * İlan listesi — türe göre gruplama sekmeleri
 *
 * Tek seçimli: bir sekme seçildiğinde liste yalnızca o türü gösterir.
 * Seçenekleri yan sütundaki `select`lere değil listenin başına koyduk —
 * tür, kullanıcının önce verdiği karar (şoför mü arıyorum, araç mı) ve
 * sonucu diğer filtrelerden çok daha fazla değiştiriyor. Sayaçlar diğer
 * filtreler uygulanmış hâlde gelir; sekmedeki sayı ile tıklandığında
 * çıkan sonuç sayısı aynıdır.
 * ------------------------------------------------------------------ */
.si-group {
  background: #fff;
  border: 1px solid #E0E6F7;
  border-radius: 14px;
  padding: 18px 20px 20px;
  margin-bottom: 30px;
}
.si-group__head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  margin-bottom: 14px;
}
.si-group__title {
  margin: 0; font-size: 16px; font-weight: 700; color: #05264E;
}
.si-group__hint { font-size: 13px; color: #66789C; }

.si-group__tabs { display: flex; flex-wrap: wrap; gap: 8px; }

.si-group__tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  border: 1px solid #E0E6F7; border-radius: 10px;
  background: #F8FAFF;
  font-size: 14px; font-weight: 600; color: #05264E; line-height: 1.2;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.si-group__tab:hover { border-color: var(--si-ad, #3C65F5); color: var(--si-ad-ink, #3C65F5); }
/* Seçili sekme türün rengini alıyor; "Tümü" sekmesinde `--si-ad` tanımlı
   olmadığı için yedek marka mavisine düşüyor. */
.si-group__tab.active {
  background: var(--si-ad, #3C65F5); border-color: var(--si-ad, #3C65F5); color: #fff;
}

/* Tür noktası — kartların sol çubuğu ve harita işaretiyle aynı renk.
   Renk şemasının öğrenildiği yer burası: kullanıcı türü seçerken rengini de
   görüyor. Seçili sekmede zemin zaten o renk olduğundan nokta beyaza
   dönüyor, yoksa zeminde kayboluyordu. */
.si-group__dot {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: var(--si-ad);
  margin-right: -2px;
}
.si-group__tab.active .si-group__dot { background: #fff; }

/* Sayaç rozeti — seçili sekmede zemin koyu olduğu için ters çevriliyor. */
.si-group__count {
  min-width: 22px; padding: 1px 6px;
  border-radius: 20px;
  background: #E0E6F7; color: #05264E;
  font-size: 12px; font-weight: 700; text-align: center;
}
.si-group__tab.active .si-group__count {
  background: rgba(255, 255, 255, .25); color: #fff;
}

/* Sayacı sıfır olan tür GİZLENMİYOR, soluklaşıyor: sekmenin kaybolması
   "böyle bir ilan türü yok" izlenimi verir; sıfır yazması ise "şu an yok"
   der ve kullanıcı filtresini gevşetmeyi düşünür. Tıklanabilir kalır. */
.si-group__tab.is-empty:not(.active) { opacity: .55; }

@media (max-width: 575px) {
  .si-group { padding: 14px 14px 16px; }
  .si-group__tab { flex: 1 1 100%; justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
  .si-group__tab { transition: none; }
}

/* Gruplama kutusundaki görünüm değiştirici (Liste / Kart).
   Başlık satırının sağ ucuna itiliyor; dar ekranda alt satıra düşüyor. */
.si-group__view {
  display: inline-flex; margin-left: auto;
  border: 1px solid #E0E6F7; border-radius: 10px;
  background: #F8FAFF; padding: 3px;
}
.si-group__view-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 8px;
  font-size: 13px; font-weight: 600; color: #66789C; line-height: 1.2;
  transition: background .18s ease, color .18s ease;
}
.si-group__view-btn:hover { color: #3C65F5; }
.si-group__view-btn.active {
  background: #fff; color: #05264E;
  box-shadow: 0 1px 2px rgba(5, 38, 78, .12);
}
.si-group__view-btn svg { flex: none; }

/* ------------------------------------------------------------------ *
 * Satır (liste) görünümü — VARSAYILAN
 *
 * Kart görünümünde ilan iki sütuna sıkışıyor ve asıl bilgi (güzergâh,
 * çalışma bölgesi, saat, açıklama) dar kalıyordu. Satırda ilan sahibi
 * bloğu sola sabitleniyor, kalan genişliği içerik alıyor.
 *
 * Kart işaretlemesi (`card-grid-2`) İKİ görünümde de AYNI: ikinci bir
 * bileşen yazmak, rozet/tarih/düğme gibi ayrıntıların zamanla birinde
 * eklenip diğerinde unutulması demekti. Fark yalnızca bu düzen kuralları.
 * ------------------------------------------------------------------ */
@media (min-width: 992px) {
  .si-view--list .card-grid-2 {
    display: grid;
    /* 250 → 330: güzergâh/saat bilgileri artık bu sütunda duruyor ve
       "Vialand / Tema Park (Küçükköy)" gibi uzun uç adlarına yer gerekiyor. */
    grid-template-columns: 330px minmax(0, 1fr);
    align-items: start;
  }
  .si-view--list .card-grid-2 .card-grid-2-image-left {
    padding: 26px 10px 26px 24px;
    /* Sütun daralınca ad soyad taşmasın; kırpma yerine alta sarsın. */
    min-width: 0;
    /* Temada bu bloğa `position: relative` veriliyor; kategori görseli
       kartın sağ üstüne hizalanabilsin diye statik bırakılıyor (görsel
       kartın kendisine göre konumlanıyor). */
    position: static;
  }
  .si-view--list .card-grid-2 .card-grid-2-image-left .right-info { min-width: 0; }
  .si-view--list .card-grid-2 .card-grid-2-image-left .name-job { word-break: break-word; }

  .si-view--list .card-grid-2 .card-block-info {
    padding: 26px 30px 26px 10px;
  }

  /* Satırda açıklama iki satırla sınırlı: yükseklikler eşitlensin ve bir
     ekrana daha çok ilan sığsın. Kart görünümündeki min-height burada
     ters etki yapıyordu (kısa açıklamalı satırlar gereksiz uzuyordu). */
  .si-view--list .card-grid-2 .card-block-info p {
    min-height: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Alt satır (tarih + İncele) satır düzeninde bu kadar boşluğa gerek
     duymuyor; `mt-30` utility'si !important olduğu için burada eziliyor. */
  .si-view--list .card-grid-2 .card-2-bottom.mt-30 { margin-top: 18px !important; }
}

/* Tema sol bloğu `display: flex` yapıyor (avatar + bilgi yan yana).
   Güzergâh/saat listesi ÜÇÜNCÜ flex öğesi olarak aynı satıra girip firma adını
   üç satıra bölüyordu. Sarma açılıp listeye tam genişlik veriliyor: avatar +
   ad üstte, bilgiler altta.

   Bu kural MEDYA SORGUSUNUN DIŞINDA: satır düzeni yalnızca 992px üstünde
   çalışıyor ama sol bloğun flex olması her genişlikte geçerli, dolayısıyla
   ezilme mobilde de oluyordu (ölçüldü). */
.si-view--list .card-grid-2 .card-grid-2-image-left { flex-wrap: wrap; }
.si-view--list .card-grid-2 .card-grid-2-image-left > .si-facts { flex: 1 0 100%; }
.si-view--list .card-grid-2 .card-grid-2-image-left .right-info { flex: 1; min-width: 0; }

/* =============================================================================
   İlan kartı · İLAN TİPİ rengi ve köşegen geçiş
   Renk artık KATEGORİDEN değil İLAN TİPİNDEN geliyor (bkz.
   lib/ad-type-color.ts). Gerekçe: kullanıcı listede dolaşırken asıl ayırmak
   istediği şey "bu ilan arayan mı, sunan mı" — on kategori rengi bir listede
   birbirine karışıyordu, dört tip rengi bir bakışta ayrılıyor. Soğuk renkler
   arayan, sıcak renkler sunan.

   Renk karta DÖRT yerden giriyor:
     1) sol kenardaki dikey çubuk — satır boyunca uzanır, listede gözü çeker,
     2) sol alttan sağ üste renkten saydama giden geçiş,
     3) ilan tipi rozeti (başlığın altında, kartın en belirgin renk lekesi),
     4) sağ üstteki kategori görseli ve güzergâh şeridi.
   Metin hep koyu kalıyor: renk yalnızca zeminde ve ince ayrıntılarda, okuma
   kontrastı ilana göre değişmesin.

   ★ Değişken adları `--si-ad*`: eskiden `--si-cat*` idi ve "kategori" demekti;
   renk kaynağı değişince ad da değişti, yoksa CSS ile TSX arasında yanlış
   anlam kalırdı. `.si-cat-chip` ADI KORUNDU — o gerçekten kategori rozeti.

   Geçiş `rgba(var(--si-ad-rgb), …)` ile kuruluyor; `color-mix` kullanılmadı
   çünkü kart herkese açık sayfada ve eski tarayıcıda renk hiç görünmemesi
   yerine düz çalışması tercih edildi.
   ============================================================================= */
.si-ad-card {
  position: relative;
  overflow: hidden;
  /* ★ ZEMİN BEYAZA ÇEKİLDİ.
     Temanın `.card-grid-2` kuralı `background: #F8FAFF` yazıyor — MAVİYE
     çalan bir beyaz. Üstüne konan tip rengi bu mavi tabanla karışınca yeşil
     ve turuncu kartlar da lavanta gibi görünüyordu, yani gradyan tipe göre
     değişmesine rağmen GÖZ hepsini aynı görüyordu. Taban nötr beyaz olunca
     geçişin rengini yalnızca `--si-ad` belirliyor ve kart soldaki üçgenle
     aynı rengi konuşuyor. */
  background-color: #fff;
  background-image: linear-gradient(
    to top right,
    rgba(var(--si-ad-rgb), .34) 0%,
    rgba(var(--si-ad-rgb), .14) 38%,
    rgba(var(--si-ad-rgb), 0) 72%
  );
  border-color: rgba(var(--si-ad-rgb), .34);
  transition: box-shadow .18s ease, border-color .18s ease;
}
/* Sol kenar çubuğu: kartın tam yüksekliği boyunca. `border-left` yerine
   sözde eleman, çünkü temanın kendi `border` kuralı radius ile birlikte
   geliyor ve kalın bir kenarlık köşeleri bozuyordu.
   6px: 4px'te uzun bir listede ince bir çizgi olarak kayboluyordu. */
.si-ad-card::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 6px;
  background: var(--si-ad);
}
.si-ad-card:hover {
  box-shadow: 0 10px 30px rgba(var(--si-ad-rgb), .22);
  border-color: rgba(var(--si-ad-rgb), .5);
}

/* -------------------------------------------------- satır düzeninde OK UCU
   Liste görünümünde sol çubuk düz bir dikey şerit değil, sağa bakan İÇİ DOLU
   YATAY ÜÇGEN: taban satırın sol kenarında (tam yükseklik), tepe noktası
   dikeyde ortada ve içeri doğru uzanıyor. Şerit böylece "bu satır şu yöne
   gidiyor" diyen bir ok ucuna dönüşüyor ve satırlar birbirinden daha kolay
   ayrılıyor.

   `clip-path` ile kesiliyor, ayrı bir SVG değil: renk zaten `--si-ad`
   değişkeninden geliyor, üçgen için ikinci bir renkli varlık üretmek
   gerekmiyor.

   Genişlik `--si-wedge`: 26px denendi, 300px'lik bir satırda iğne gibi
   görünüyordu — ok ucunun okunması için taban genişliği yükseklikle orantılı
   olmalı. 44px'te tepe açısı ~32° ve şekil ilk bakışta ok olarak okunuyor.

   Sol boşluk bu yüzden 22px'ten 54px'e çıkıyor: üçgen en geniş yerinde
   (dikeyde tam orta) metnin altına girmemeli. Metin üstte ve altta üçgen
   zaten inceldiği için boşluğu israf etmiyor.

   `clip-path` desteklemeyen eski tarayıcıda dikdörtgen bir şerit kalır,
   yani hiçbir şey kaybolmaz. */
.si-ad-card--row { --si-wedge: 44px; }
.si-ad-card--row::before {
  width: var(--si-wedge);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
/* Seçici `.si-ad-card` ile ÇİFTLENDİ: aşağıdaki
   `.si-ad-card .card-grid-2-image-left { padding-left: 22px }` kuralı aynı
   özgüllükte ve dosyada DAHA SONRA geliyor, bu yüzden tek sınıfla yazınca
   22px kazanıyor ve üçgen metnin altına giriyordu (ölçüldü: 18.6px çakışma). */
.si-ad-card.si-ad-card--row .card-grid-2-image-left,
.si-ad-card.si-ad-card--row .si-locked__body { padding-left: 54px; }
/* Güzergâh şeridi satırın EN ÜSTÜNDE. Üçgenin ucu kartın dikey ORTASINDA,
   yani üst kenarda genişliği sıfır ve şeridin alt hizasında ancak ~20px'e
   çıkıyor — şeridin 22px'lik sol boşluğunun altında kalıyor, metin üçgenin
   üstüne binmiyor. (Şerit eskiden en alttaydı; üçgen simetrik olduğu için
   ölçü değişmedi.) */

@media (max-width: 767.98px) {
  /* Dar ekranda satır düzeni yok ama bileşen sınıfı kalabiliyor; ok ucu
     daralıyor ki dar sütunda yer yemesin. */
  .si-ad-card--row { --si-wedge: 20px; }
  .si-ad-card.si-ad-card--row .card-grid-2-image-left,
  .si-ad-card.si-ad-card--row .si-locked__body { padding-left: 26px; }
}

/* -----------------------------------------------------------------------------
   Tarih daraltma menüsü (görünüm değiştiricinin solunda)
   `<details>` üzerine kurulu: JS'siz açılıp kapanıyor, seçenekler düz
   bağlantı. Menü mutlak konumlu, bu yüzden `details` konumlandırma bağlamı.
   -------------------------------------------------------------------------- */
/* Menü, görünüm değiştiricinin hemen SOLUNDA duruyor: sağa itme görevi
   ondan alınıp buraya verildi (`margin-left: auto` ikisinde birden olsaydı
   aralarında boşluk kalırdı). Başlık satırı `align-items: baseline` olduğu
   için iki denetim de ortaya hizalanıyor. */
.si-group__head .si-since { margin-left: auto; align-self: center; }
/* İki menü yan yana: sıralama solda, tarih sağda; yalnızca ilkine otomatik
   sol boşluk verilir, ikincisi ona yapışır. */
.si-group__head .si-sort + .si-since { margin-left: 8px; }
.si-group__head .si-since + .si-group__view { margin-left: 8px; align-self: center; }

.si-since { position: relative; }
.si-since__btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 12px;
  border: 1px solid #e0e6f7; border-radius: 8px;
  background: #fff; cursor: pointer;
  font-size: 13.5px; font-weight: 600; color: #05264e;
  white-space: nowrap;
  list-style: none;          /* varsayılan üçgen işareti kalksın */
}
.si-since__btn::-webkit-details-marker { display: none; }
.si-since__btn:hover { border-color: #3c65f5; color: #3c65f5; }
.si-since__caret { transition: transform .15s ease; }
.si-since[open] .si-since__caret { transform: rotate(180deg); }

.si-since__menu {
  position: absolute; z-index: 40; top: calc(100% + 6px); left: 0;
  min-width: 200px; padding: 6px;
  background: #fff; border: 1px solid #e0e6f7; border-radius: 10px;
  box-shadow: 0 12px 30px rgba(5, 38, 78, .12);
}
.si-since__item {
  display: block; padding: 8px 10px; border-radius: 6px;
  font-size: 13.5px; color: #4f5e78; white-space: nowrap;
}
.si-since__item:hover { background: #f2f6fd; color: #3c65f5; }
.si-since__item.active { background: #eff2fb; color: #05264e; font-weight: 700; }

/* Dar ekranda menü sağa taşmasın: düğme sağa yakınsa sağdan hizala */
@media (max-width: 575.98px) {
  .si-since__menu { left: auto; right: 0; }
}

/* =============================================================================
   İlan listesi · yan sütun widget'ları ve "daha fazla" düğmesi
   ============================================================================= */

/* Şehir listesi: ad solda, sayı sağda hap içinde */
.si-side-list { list-style: none; margin: 0; padding: 0; }
.si-side-list li + li { border-top: 1px solid #eef1f8; }
.si-side-list a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 2px; font-size: 14px; color: #4f5e78;
}
.si-side-list a:hover { color: #3c65f5; }
.si-side-list__name { min-width: 0; overflow-wrap: anywhere; }
.si-side-list__count {
  flex: none; min-width: 26px; padding: 1px 8px;
  border-radius: 999px; background: #eff2fb; color: #05264e;
  font-size: 12px; font-weight: 700; text-align: center;
}
.si-side-more {
  display: inline-block; margin-top: 12px;
  font-size: 13px; font-weight: 600; color: #3c65f5;
}

/* Firma listesi */
.si-side-firms { list-style: none; margin: 0; padding: 0; }
.si-side-firms li + li { margin-top: 12px; }
.si-side-firms a { display: flex; align-items: center; gap: 10px; }
.si-side-firms__text { min-width: 0; line-height: 1.35; }
.si-side-firms__text b {
  display: block; font-size: 13.5px; color: #05264e; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.si-side-firms__text span { display: block; font-size: 12px; color: #8a97ab; }
.si-side-firms a:hover .si-side-firms__text b { color: #3c65f5; }

/* Haber listesi */
.si-side-posts { list-style: none; margin: 0; padding: 0; }
.si-side-posts li + li { margin-top: 14px; padding-top: 14px; border-top: 1px solid #eef1f8; }
.si-side-posts__tag {
  display: inline-block; margin-bottom: 4px;
  font-size: 11px; font-weight: 700; letter-spacing: .4px;
  text-transform: uppercase; color: #e07b39;
}
.si-side-posts__title {
  display: block; font-size: 13.5px; line-height: 1.45; color: #05264e;
}
.si-side-posts a:hover .si-side-posts__title { color: #3c65f5; }

/* İlan ver çağrısı — dolu zemin, diğer kutulardan ayrılsın */
.si-side-cta {
  background: linear-gradient(135deg, #3c65f5 0%, #2a4bd0 100%);
  border-radius: 8px; padding: 22px 20px; color: #fff;
}
.si-side-cta h5 { color: #fff; font-size: 16px; margin-bottom: 8px; }
.si-side-cta p { color: rgba(255,255,255,.85); margin-bottom: 16px; line-height: 1.6; }
.si-side-cta .btn { background: #fff; color: #05264e; }

/* "Daha fazla ilan" */
.si-loadmore {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  margin-top: 26px;
}
.si-loadmore__count { font-size: 13px; color: #8a97ab; }

/* -----------------------------------------------------------------------------
   Kilitli (ağa özel) ilan kartı
   Normal kartın ızgara düzenini KULLANMIYOR: gösterilecek yalnızca iki bilgi
   var (firma, başlık) ve iki sütuna yaymak boş kutular bırakırdı. Kategori
   rengi ve köşe görseli duruyor — kullanıcı hangi alanda bir iş olduğunu
   görebilsin.
   -------------------------------------------------------------------------- */
/* -----------------------------------------------------------------------------
   Sağdan açılan çekmece (teklif paneli)
   Konumlandırma `fixed`: sayfanın neresinde olursanız olun tam yükseklikte
   açılıyor. Arka plan ayrı bir katman — tıklanınca kapanıyor ve altındaki
   sayfayla etkileşimi kesiyor.
   -------------------------------------------------------------------------- */
.si-drawer {
  position: fixed; inset: 0; z-index: 1090;
  /* ★ `text-align` MİRAS ALINIR, `position: fixed` bunu kesmez. Çekmece
     ilan sayfasında `text-lg-end` (sağa yaslı) bir sütunun içinde
     duruyordu ve formun bütün etiketleri sağa yapışıyordu — ölçüldü.
     Katman kendi hizasını burada sıfırlıyor ki nereye monte edilirse
     edilsin aynı görünsün. */
  text-align: left;
}
.si-drawer__backdrop {
  position: absolute; inset: 0;
  background: rgba(5, 38, 78, .45);
  animation: si-fade-in .18s ease-out;
}
.si-drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(440px, 100%);
  background: #fff;
  box-shadow: -12px 0 40px rgba(5, 38, 78, .18);
  display: flex; flex-direction: column;
  animation: si-drawer-in .22s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .si-drawer__backdrop, .si-drawer__panel { animation: none; }
}
@keyframes si-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes si-drawer-in { from { transform: translateX(100%); } to { transform: none; } }

.si-drawer__head {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 20px 22px; border-bottom: 1px solid #e0e6f7;
}
.si-drawer__head h5 { margin: 0 0 4px; font-size: 17px; color: #05264e; }
.si-drawer__head p { margin: 0; color: #66789c; line-height: 1.45; }
.si-drawer__close {
  margin-left: auto; flex: none;
  background: none; border: 0; padding: 0;
  width: 30px; height: 30px; line-height: 1;
  font-size: 26px; color: #8a97ab; cursor: pointer;
}
.si-drawer__close:hover { color: #05264e; }
/* Gövde kendi içinde kayıyor: uzun formda başlık ve kapatma düğmesi sabit. */
/* Gövde kendi içinde kayıyor VE dikey bir flex: mesaj alanı kalan boşluğu
   kaplayabilsin. `min-height: 0` olmadan flex çocuk kendi içeriğinden
   küçülemez ve kaydırma çalışmaz. */
.si-drawer__body {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 20px 22px 28px; margin-top: 0;
  display: flex; flex-direction: column;
}
/* Mesaj alanı: kalan yüksekliği alır, kısa ekranda 140px'in altına inmez. */
.si-offer-msg { flex: 1 1 auto; min-height: 140px; display: flex; flex-direction: column; }
.si-offer-msg textarea {
  flex: 1; min-height: 120px; resize: vertical;
}
/* Gönder düğmesi ve notu aşağıda sabit kalsın */
.si-drawer__body > .btn { flex: none; }

/* İlandaki fiyat — teklif alanının hemen üstünde referans olarak */
.si-offer-price {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  background: #f2f6fd; border-radius: 8px; padding: 12px 14px; margin-bottom: 18px;
}
.si-offer-price span { font-size: 13px; color: #66789c; }
.si-offer-price b { font-size: 18px; color: #05264e; }

/* =============================================================================
   Panel · kart düzeni (firma bilgileri)
   Uzun tek sütunlu form yerine konu başına bir kart. Tema panelde hazır bir
   kart bileşeni sunmuyor; `sidebar-shadow` yan sütun için tasarlanmış ve
   `padding: 0 20px 0 0` gibi kendi ölçülerini dayatıyor (bkz. §48'deki
   çağrı kutusu tuzağı). Bu yüzden kendi kartımız.
   ============================================================================= */
.si-panel-card {
  background: #fff; border: 1px solid #e0e6f7; border-radius: 12px;
  padding: 24px 26px; margin-bottom: 20px;
}
.si-panel-card__head { margin-bottom: 20px; }
.si-panel-card__head h5 { margin: 0 0 4px; font-size: 17px; color: #05264e; }
.si-panel-card__head p { margin: 0; font-size: 13.5px; color: #66789c; line-height: 1.6; }

/* Üst özet şerit — hangi firmayı düzenlediğin ekranda kalsın */
.si-panel-head {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: linear-gradient(135deg, #f2f6fd 0%, #ffffff 60%);
  border: 1px solid #e0e6f7; border-radius: 12px;
  padding: 18px 22px; margin-bottom: 20px;
}
.si-panel-head__text { min-width: 0; line-height: 1.35; }
.si-panel-head__text b { display: block; font-size: 17px; color: #05264e; }
.si-panel-head__text span { font-size: 13px; color: #8a97ab; }
.si-panel-head__meta {
  margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.si-panel-head__link { font-size: 13.5px; font-weight: 600; color: #3c65f5; }

/* Logo + kapak yan yana; dar ekranda alt alta */
.si-brand-grid {
  display: grid; grid-template-columns: 220px minmax(0, 1fr);
  gap: 24px; margin-bottom: 22px;
}
.si-brand-logo { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.si-brand-logo .si-upload-actions { display: flex; flex-direction: column; gap: 6px; }
@media (max-width: 767.98px) {
  .si-brand-grid { grid-template-columns: 1fr; gap: 18px; }
}

/* Yapışkan kaydet şeridi */
.si-savebar {
  position: sticky; bottom: 0; z-index: 20;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  /* Tam opak: %94'te altındaki alan adı/telefon metni şeridin arkasından
     hayal meyal okunuyordu. */
  background: #fff;
  border-top: 1px solid #e0e6f7;
  box-shadow: 0 -8px 20px rgba(5, 38, 78, .06);
  /* NEGATİF KENAR BOŞLUĞU YOK: sütunun dışına taşırmak 390px'te yatay
     kaydırma çubuğu doğuruyordu (ölçüldü). Şerit içerik genişliğinde
     kalıyor, üst çizgisi zaten ayırıcı görevi görüyor. */
  padding: 14px 0;
  margin-top: 4px;
}
.si-savebar__note { font-size: 13px; color: #8a97ab; }

/* Firma sayfasındaki "kişisel hesap" bağlantı kutusu */
.si-account-link {
  background: #f8faff; border: 1px solid #e0e6f7; border-radius: 10px;
  padding: 20px 22px;
}

/* Profil formundaki ek telefon satırları */
.si-phone-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.si-phone-row .form-control { flex: 1; margin-bottom: 0; }
.si-phone-row .btn { flex: none; }

/* =============================================================================
   Kart görünümünde SABİT YÜKSEKLİK
   Kartlar ilana göre 335–466px arasında değişiyordu; ızgara kırık görünüyor
   ve alt satırlar hizasız kalıyordu. Artık her kart aynı yükseklikte ve
   değişken parçalar satır sayısıyla sınırlanıyor.

   Kural yalnızca KART düzenine uygulanıyor (`:not(.si-ad-card--row)`);
   satır düzeninde yükseklik zaten içeriğe göre ve orada sabitlemek yanlış
   olurdu.

   Taşma riski satır sınırlarıyla kapatılıyor: başlık 2, açıklama 2, bilgi
   satırları 1'er satır. Alt bar `margin-top: auto` ile hep en altta.
   ============================================================================= */
.si-ad-card:not(.si-ad-card--row) {
  /* 420px: dar sütunda (336px kart) içerik en fazla 406px yer istiyor —
     ölçüldü. Tek değer kullanılıyor ki kart yüksekliği ekran genişliğine
     göre de zıplamasın. */
  height: 420px;
  display: flex;
  flex-direction: column;
}
.si-ad-card:not(.si-ad-card--row) .card-block-info {
  display: flex; flex-direction: column; flex: 1; min-height: 0;
}
/* Firma / kişi adı tek satır */
.si-ad-card:not(.si-ad-card--row) .name-job {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Başlık en fazla 2 satır */
.si-ad-card:not(.si-ad-card--row) .card-block-info h6 {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 48px;
}
/* Açıklama en fazla 2 satır.
   `flex: none` ŞART: esnek kutu içinde kalan boşluğa göre daralıyor ve iki
   satırlık metin 44px yerine 38px'e sıkışıp alt satırın kuyrukları
   kesiliyordu (ölçüldü). Boşluğu alt bardaki `margin-top: auto` yutuyor. */
.si-ad-card:not(.si-ad-card--row) .card-block-info > p {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 0; flex: none;
}
.si-ad-card:not(.si-ad-card--row) .si-facts { flex: none; }
/* Bilgi satırları (güzergâh · bölge · saat) tek satırda kalsın */
.si-ad-card:not(.si-ad-card--row) .si-facts li {
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.si-ad-card:not(.si-ad-card--row) .si-facts { max-height: 66px; overflow: hidden; }
/* Güzergâh tek satırda: İKİ UÇ DA eşit daralıyor ve adlar üç noktayla
   kesiliyor. Yalnızca `nowrap` verilince ikinci uç "(Nereye)" etiketiyle
   birlikte kutunun dışında kalıp ortadan kesiliyordu. */
.si-ad-card:not(.si-ad-card--row) .si-route--compact {
  flex-wrap: nowrap; width: 100%; min-width: 0;
}
.si-ad-card:not(.si-ad-card--row) .si-route__pair { flex: 1 1 0; min-width: 0; }
.si-ad-card:not(.si-ad-card--row) .si-route__pair b {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.si-ad-card:not(.si-ad-card--row) .si-route--compact .si-route__arrow { width: 26px; }
/* Tarih + İncele satırı hep en altta */
.si-ad-card:not(.si-ad-card--row) .card-2-bottom { margin-top: auto; }
/* Kilitli kart da aynı yükseklikte olsun ki ızgara bozulmasın */
.si-locked:not(.si-ad-card--row) { height: 420px; }

/* Telefonda 440px.
   İlan tipi rozeti geldikten sonra rozet satırı dar ekranda İKİ satıra
   çıkıyor (ör. "İşime araç arıyorum · Minibüs · Personel Servisi") ve 420px
   içinde 13px taşıyordu — ölçüldü. Rozeti küçültmek yerine kart uzatıldı:
   rozet zaten listede ilanları ayıran asıl işaret, onu kısmak amacı bozardı.

   Tek ekranda yine TEK yükseklik var; §59'daki "yükseklik ekran genişliğine
   göre zıplamasın" kuralı bir kırılma noktasında değişmeyi değil, aynı
   ızgarada karttan karta değişmeyi yasaklıyordu. */
@media (max-width: 575.98px) {
  .si-ad-card:not(.si-ad-card--row),
  .si-locked:not(.si-ad-card--row) { height: 440px; }
}
/* Kilitli kartta içerik ÜSTTEN akıyor; boşluk altta kalıyor. Alt bara
   yaslamak başlıkla açıklama arasında kocaman bir boşluk bırakıyordu. */
.si-locked:not(.si-ad-card--row) .si-locked__body { overflow: hidden; }

/* Firma beğeni düğmesi (firma profili) */
.si-like-row { margin-top: 18px; }
.si-like {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: 999px;
  border: 1px solid #e0e6f7; background: #fff;
  font-size: 14px; font-weight: 600; color: #4f5e78; cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.si-like:hover { border-color: #3c65f5; color: #3c65f5; }
.si-like.is-on { background: #eff2fb; border-color: #c9d6fb; color: #3c65f5; }
.si-like b {
  min-width: 22px; padding: 1px 7px; border-radius: 999px;
  background: #eff2fb; color: #05264e; font-size: 12.5px; text-align: center;
}
.si-like.is-on b { background: #fff; }
.si-like:disabled { opacity: .6; cursor: default; }

/* Favori (kalp) düğmesi — "İncele"nin solunda */
.si-fav {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: none;
  border: 1px solid #e0e6f7; border-radius: 8px;
  background: #fff; color: #8a97ab; cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
  vertical-align: middle;
}
.si-fav:hover { color: #e0455a; border-color: #f3c4c9; background: #fff5f6; }
.si-fav.is-on { color: #e0455a; border-color: #f3c4c9; background: #fff5f6; }
.si-fav:disabled { opacity: .6; cursor: default; }
/* Kart altındaki eylem satırı: kalp + İncele yan yana */
.si-card-actions { display: inline-flex; align-items: center; gap: 8px; }

/* Teklif satırı (panel) */
.si-offer {
  background: #fff; border: 1px solid #e0e6f7; border-radius: 10px;
  padding: 18px 20px; margin-bottom: 14px;
}
.si-offer__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.si-offer__ad { font-size: 15px; font-weight: 600; color: #05264e; }
.si-offer__ad:hover { color: #3c65f5; }
.si-offer__nums { display: flex; align-items: baseline; gap: 12px; margin-top: 8px; }
.si-offer__amount { font-size: 20px; color: #14733c; }
.si-offer__old { font-size: 13px; color: #8a97ab; text-decoration: line-through; }
/* Fiyatı olmayan teklifte üstü çizili göstermek yanlış olurdu */
.si-offer__nums .si-offer__old:only-child { text-decoration: none; }
.si-offer__who { font-size: 13.5px; color: #4f5e78; margin-top: 6px; }
.si-offer__msg {
  margin: 10px 0 0; padding: 10px 12px;
  background: #f8faff; border-radius: 8px;
  font-size: 14px; color: #4f5e78; line-height: 1.6; white-space: pre-wrap;
}
.si-offer__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 14px; flex-wrap: wrap;
}
.si-offer__actions { display: flex; gap: 8px; }

/* İlan fiyatı rozeti (kart ve detay).
   Rozet kartın alt şeridinde tarihin yerini aldı; 14px orada zayıf
   kalıyordu — fiyat artık o satırdaki asıl bilgi, ona göre büyütüldü. */
.si-price {
  display: inline-block;
  /* Dolgu 4/14 değil 3/13: aşağıdaki 1px çerçeve rozetin dış ölçüsünü 2px
     büyütecekti. Kartın alt şeridi ve 420px'lik sabit yükseklik ölçülerek
     ayarlanmıştı; çerçeve dolgudan geri alınarak rozet AYNI ölçüde kaldı. */
  padding: 3px 13px; border-radius: 999px;
  background: #e7f6ee; color: #14733c;
  /* Çok ince çerçeve: rozet düz zeminde sınırsız duruyordu. Renk, zeminin
     kendi yeşilinin bir tık koyusu — ayrı bir çizgi gibi değil, rozetin
     kenarı gibi okunsun. */
  border: 1px solid #bfe3cf;
  font-size: 18px; font-weight: 800; white-space: nowrap;
  letter-spacing: -0.2px;
}

/* Fiyat + "Başvur": ikon, fiyatın hemen sağında.
   `nowrap` bilerek — alt satıra düşse kartın 420px'lik sabit yüksekliğini
   taşırırdı; ikon 32px tutuldu ki en uzun fiyatla bile sütuna sığsın. */
.si-price-row {
  display: inline-flex; align-items: center; gap: 8px; flex-wrap: nowrap;
}

/* Yalnızca ikon: fiyatın yanında metne yer yok, adı title/aria-label'da.
   Görünüm fiyatsız karttaki "Teklif ver" düğmesiyle aynı aileden (çerçeveli
   mavi) — aynı eylem, aynı dil. Köşe yuvarlaklığı kalp düğmesiyle (8px)
   eşleşiyor: ikisi de kartın alt şeridindeki ikon düğmeleri. */
.si-price-apply {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex: none; padding: 0;
  border: 1px solid #3C65F5; border-radius: 8px;
  background-color: #fff; color: #3C65F5;
  /* Temanın `.btn` kuralı 10px alt boşluk veriyor; rozetle hizayı bozardı. */
  margin-bottom: 0;
  transition: background-color .15s ease;
}
.si-price-apply:hover { background-color: #E0E6F7; color: #3C65F5; }
/* `.si-btn-ico` metnin solunda dururken 6px sağ boşluk taşıyor; metin
   olmayınca ikon o boşluk kadar sola kayıyordu. */
.si-price-apply .si-btn-ico { margin-right: 0; }
/* İlan detayında fiyat başlığın yanındaki bilgi bloğunda duruyor ve
   çevresindeki başlıklardan büyük görünmemeli — orada bir tık küçük. */
.si-price--detail { font-size: 16px; }

/* Bekleyen istek — ne olumlu ne kilitli; bekleme hâli. */
.si-access-wait {
  background: #fdf3e0; border: 1px solid #f2ddb5; border-radius: 8px;
  padding: 14px 16px;
}
.si-access-wait strong { color: #8a5a00; }
.si-access-wait p { color: #7a5a22; }

/* Ağa kabul bildirimi — kilitli kutunun tersi: yeşil, olumlu. */
.si-access-ok {
  background: #e7f6ee; border: 1px solid #c6e9d5; border-radius: 8px;
  padding: 14px 16px; margin-bottom: 18px;
}
.si-access-ok strong { color: #1a7f4b; }
.si-access-ok p { color: #3d6b53; }

.si-locked { border-style: dashed; }
/* ★ Kilitli kart satır düzeninde İKİ SÜTUNLU ızgarayı KULLANMAZ.
   `card-grid-2` sınıfını paylaştığı için gövde 330px'lik sol sütuna düşüyor
   ve başlık orada gereksiz yere sarıyordu (ölçüldü: 989px'lik satırda başlık
   280px'e sıkışıp iki satıra bölünüyordu). Kilitli kartta gösterilecek iki
   bilgi var; ikisi de satırın tamamını kullanmalı. */
.si-view--list .card-grid-2.si-locked { display: block; }
.si-locked-page {
  background: #fff; border: 1px dashed #e0e6f7; border-radius: 12px;
  padding: 32px;
}
.si-locked-page__firm { display: flex; align-items: center; gap: 12px; }
.si-locked-page__firm b { display: block; font-size: 15px; color: #05264e; }
.si-locked__body { padding: 22px 24px; }
.si-locked__top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.si-locked__firm { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.si-locked__firm b { font-size: 15px; color: #05264e; }
.si-locked__badge { margin-left: auto; }
.si-locked__title { margin: 14px 0 10px; font-size: 20px; line-height: 1.3; }
.si-locked__title a { color: #05264e; }
.si-locked__title a:hover { color: #3c65f5; }
/* Açıklama solda tüm genişliği alır, düğme sağda kalır; dar ekranda alt alta. */
.si-locked__foot {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.si-locked__note {
  flex: 1; min-width: 260px; margin: 0;
  color: #66789c; font-size: 14px; line-height: 1.6;
}
.si-locked__foot form { flex: none; }

/* Kategori görseli · sağ üst köşe
   `overflow: hidden` kartta zaten var, bu yüzden görsel köşeden taşacak
   şekilde negatif konumlandırılıp kırpılıyor: köşeye "yaslanmış" duruyor.
   Saydamlık düşük tutuldu — arkasından metin geçtiğinde okumayı bozmasın.
   `pointer-events: none`: üzerindeki bağlantılar tıklanabilir kalsın. */
.si-ad-art {
  position: absolute; top: -12px; right: -10px;
  width: 118px; height: 118px;
  color: var(--si-ad);
  opacity: .13;
  pointer-events: none;
  z-index: 0;
}
/* Kart içeriği görselin üstünde kalsın */
.si-ad-card > *:not(.si-ad-art) { position: relative; z-index: 1; }

@media (max-width: 575.98px) {
  .si-ad-art { width: 88px; height: 88px; top: -8px; right: -8px; }
}

/* GÖRSEL ALT SAĞDA — YALNIZCA ŞERİTLİ KARTLARDA.
   Güzergâh şeridi kartın en üstüne taşınınca (§70) sağ üstteki kategori
   görseli şeridin üstüne biniyordu: şerit saydam gradyanla geçtiği için
   görsel yazının altından okunuyor ve güzergâh kirli görünüyordu.

   Anahtar `si-ad-card--row` DEĞİL `si-ad-card--band`: satır düzenindeki her
   kartta şerit yok (güzergâhsız ilanlar) ve şeridi olmayan kartta görselin
   yerini değiştirmek için bir sebep de yok — orada sağ üst köşe boş. Sınıfı
   şeridi basan koşulun ta kendisi veriyor (AdCard · `seritVar`), yani ikisi
   ayrışamıyor. Kart düzeninde şerit hiç basılmıyor.

   Seçici iki sınıflı, aşağıdaki medya sorgusundaki tek sınıflı kuraldan daha
   özgül: `top: auto` orada tekrar `-8px` yazılsa bile kazanıyor. (Aksi hâlde
   hem `top` hem `bottom` verilmiş olur ve fazla kısıtlanmış kutuda `top`
   uygulanırdı — görsel yine yukarıda kalırdı.) */
.si-ad-card--band .si-ad-art { top: auto; bottom: -12px; }
@media (max-width: 575.98px) {
  .si-ad-card--band .si-ad-art { bottom: -8px; }
}

/* İlan tipi rozeti — kartın en belirgin renk lekesi.
   Temanın `.card-briefcase` (gri, çantalı ikon) etiketinin yerini aldı: o
   etiket her kartta aynı gri tonda duruyordu, yani hiçbir ayrım sağlamıyordu.

   Dolgu ve çerçeve KİMLİK rengini, yazı ise koyulaştırılmış tonunu
   (`--si-ad-ink`) kullanıyor — turuncu `#E08A1E` beyaz üstünde yazı olarak
   2.3:1 veriyordu, okunmuyordu (bkz. ad-type-color.ts). */
.si-type-chip {
  display: inline-block;
  padding: 4px 13px;
  border-radius: 999px;
  background: rgba(var(--si-ad-rgb), .16);
  border: 1px solid rgba(var(--si-ad-rgb), .42);
  color: var(--si-ad-ink);
  font-size: 12px; font-weight: 700; line-height: 1.5;
  vertical-align: middle;
}

/* Kategori rozeti — artık NÖTR.
   Renk ilan tipini anlatıyor; kategori rozeti de renkli kalsaydı aynı kartta
   iki renk sistemi yarışırdı ve ikisi de anlamını yitirirdi. Kategori bilgisi
   duruyor, yalnızca sesi kısıldı. */
.si-cat-chip {
  display: inline-block;
  margin-left: 6px; padding: 3px 11px;
  border-radius: 999px;
  background: #F2F4F8;
  border: 1px solid #E0E6F7;
  color: #4A5568;
  font-size: 12px; font-weight: 600; line-height: 1.5;
  vertical-align: middle;
}

/* Sol çubuk için içeriği hafifçe içeri al */
.si-ad-card .card-grid-2-image-left { padding-left: 22px; }

/* -------------------------------------------------- güzergâh şeridi
   Satır düzeninde ızgaranın iki sütununu birden kaplıyor: ok gerçekten
   satır boyunca uzanıyor. Şerit kartın EN ÜSTÜNDE — ilk ızgara satırı. */
.si-ad-card--row .si-route--band { grid-column: 1 / -1; }
.si-route--band {
  display: flex; align-items: center; gap: 18px;
  /* Dolgu aynadan çevrildi (12/14 → 14/12): ayırıcı çizgi artık şeridin
     ÜSTÜNDE değil ALTINDA, boşluk da onunla birlikte yer değiştirdi. */
  padding: 14px 22px 12px;
  /* Şerit yukarı taşınınca üst çizgi kartın kendi üst kenarına biniyordu;
     ayırıcı olarak alt kenar doğru olan. */
  border-bottom: 1px solid rgba(var(--si-ad-rgb), .22);
  /* Düz bir dolgu (.05) beyaz üstünde neredeyse görünmüyordu; düz .10 ise
     kartın gövdesinden kopuk, tek parça bir blok gibi duruyordu. Şerit de
     kartın kendi köşegen dilini konuşuyor: solda koyu, sağa doğru açılıyor —
     ok da zaten soldan sağa gidiyor. */
  background-image: linear-gradient(
    to top right,
    rgba(var(--si-ad-rgb), .17) 0%,
    rgba(var(--si-ad-rgb), .06) 70%
  );
}
.si-route--band .si-route__pair {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 7px;
  min-width: 0; max-width: 42%;
}
.si-route--band .si-route__pair--end { justify-content: flex-end; text-align: right; }
.si-route--band b { font-size: 15px; font-weight: 700; color: #05264E; overflow-wrap: anywhere; }
.si-route--band .si-route__label { font-size: 11.5px; color: #8a97ab; }
.si-route--band .si-route__sub {
  flex-basis: 100%; font-size: 12px; color: #e07b39;
}
.si-route--band .si-route__pair--end .si-route__sub { text-align: right; }
/* Bağlayıcı: aradaki TÜM boşluğu doldurur */
.si-route--band .si-route__arrow { flex: 1; max-width: none; min-width: 40px; }

@media (max-width: 767.98px) {
  .si-route--band { flex-wrap: wrap; gap: 6px 12px; padding: 12px 18px; }
  .si-route--band .si-route__pair,
  .si-route--band .si-route__pair--end {
    max-width: none; flex-basis: 100%;
    justify-content: flex-start; text-align: left;
  }
  .si-route--band .si-route__pair--end .si-route__sub { text-align: left; }
  /* Dar ekranda ok yatay kalıyor ama kendi satırında */
  .si-route--band .si-route__arrow { flex-basis: 100%; height: 12px; }
}

/* Satır görünümünde kartlar arası boşluk kart görünümündekiyle aynı kalsın;
   Bootstrap `col-12` yan yana dizilim olmadığı için tek başına yetmiyor. */
.si-view--list .card-grid-2 { margin-bottom: 20px; }

/* =============================================================================
   Firma puanlama · 5 yıldız, sarı-turuncu geçiş (0039)
   ---------------------------------------------------------------------------
   Yıldızlar METİN karakteri (★), SVG değil. Böylece tek bir degrade beş
   yıldızın TAMAMI boyunca akıyor: çubuk soldan sağa sarıdan turuncuya
   gidiyor, her yıldız kendi içinde ayrı ayrı değil. Renk `background-clip:
   text` ile veriliyor.

   Kısmi doluluk iki katmanla: altta boş yıldızlar, üstte dolu olanlar;
   üstteki katman ortalamanın yüzdesine göre kırpılıyor (4.3 ile 4.5 aynı
   görünmesin).
   ============================================================================= */
:root {
  --si-star-from: #FFC53D;   /* sarı  */
  --si-star-to:   #FF7A18;   /* turuncu */
  --si-star-empty: #DCE3F2;
}

.si-stars {
  position: relative;
  display: inline-block;
  line-height: 1;
  letter-spacing: 2px;
  white-space: nowrap;
  flex: none;
  /* Karakterin kendi boşluğu satırı büyütmesin */
  vertical-align: -2px;
}
.si-stars__base { color: var(--si-star-empty); }
.si-stars__fill {
  position: absolute; inset: 0;
  overflow: hidden;
  /* Kırpma sağdan olsun diye içerik sola sabit */
  white-space: nowrap;
  background-image: linear-gradient(90deg, var(--si-star-from), var(--si-star-to));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* `background-clip: text` desteklenmeyen tarayıcıda metin görünmez kalmasın:
     degrade uygulanamazsa düz sarı yazı rengine düşülüyor. */
  -webkit-text-fill-color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .si-stars__fill {
    background-image: none;
    color: var(--si-star-from);
    -webkit-text-fill-color: currentColor;
  }
}

/* Profil başlığındaki ortalama satırı */
.si-rating-inline {
  display: flex; align-items: center; gap: 7px;
  font-size: 15px; color: #05264E;
}
.si-rating-inline b { font-weight: 700; }
.si-rating-inline span { color: #66789C; }
.si-rating-inline em { font-style: normal; font-size: 13px; color: #66789C; }

/* Yan sütundaki puanlama kutusu */
.si-rating {
  border: 1px solid #E0E6F7; border-radius: 10px;
  background: #FFFDF7;
  padding: 14px 16px; margin-bottom: 14px;
}
.si-rating__avg { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.si-rating__num { font-size: 15px; color: #05264E; }
.si-rating__num b { font-weight: 700; }
.si-rating__num span { color: #66789C; }
.si-rating__num em {
  font-style: normal; font-size: 13px; color: #66789C; margin-left: 6px;
}
.si-rating__none { font-size: 13.5px; color: #66789C; }

.si-rating__form {
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid #F0E7D2;
}
.si-rating__label {
  display: block; font-size: 13px; color: #66789C; margin-bottom: 5px;
}
.si-rating__stars { display: inline-flex; gap: 2px; }

/* Puanlama yıldızı — düğme. Boşken gri, dolduğunda degrade.
   Degrade tek yıldıza uygulandığı için burada geçiş yıldızın KENDİ içinde;
   ortalama çubuğundan farkı bilinçli: tek tek seçilebilir öğeler. */
.si-rating__star {
  border: 0; background: none; padding: 0 1px; cursor: pointer;
  font-size: 26px; line-height: 1;
  color: var(--si-star-empty);
  transition: transform .12s ease;
}
.si-rating__star.is-on {
  background-image: linear-gradient(160deg, var(--si-star-from), var(--si-star-to));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .si-rating__star.is-on {
    background-image: none;
    color: var(--si-star-from);
    -webkit-text-fill-color: currentColor;
  }
}
.si-rating__star:not(:disabled):hover { transform: scale(1.12); }
.si-rating__star:disabled { cursor: default; opacity: .65; }
.si-rating__star:focus-visible { outline: 2px solid #3C65F5; outline-offset: 2px; border-radius: 4px; }

.si-rating__hint {
  display: block; margin-top: 6px; font-size: 12.5px; color: #66789C;
}

@media (prefers-reduced-motion: reduce) {
  .si-rating__star { transition: none; }
  .si-rating__star:not(:disabled):hover { transform: none; }
}

/* Yalnızca ekran okuyucuya görünen metin. Projede daha önce yoktu. */
.si-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* =============================================================================
   Masaüstü ana gezinme · seçimden sonra alt menüyü kapat
   ---------------------------------------------------------------------------
   Tema alt menüyü saf `:hover` ile açıyor (style.css:3231). İstemci tarafı
   geçişte DOM yerinde kaldığı ve imleç hâlâ aynı `li`nin üstünde olduğu için
   `:hover` doğru kalmaya devam ediyor ve menü seçimden sonra açık kalıyordu.

   `:hover` JS ile iptal edilemez; bu kural gezinme sonrası eklenen
   `.si-nav-suppress` sınıfıyla temanın kuralını BASTIRIYOR. Sınıf, imleç
   `li`den ayrılınca kaldırılıyor (bkz. MenuAutoClose.tsx) — yani bastırma
   yalnızca "seçtim ama fare hâlâ orada" anına özel.

   Özgüllük: temanınki 0,3,1; buradaki 0,4,1 — sonra da yüklendiği için
   iki koşulda da kazanıyor.
   ============================================================================= */
.header .main-menu li.si-nav-suppress:hover > ul {
  opacity: 0;
  visibility: hidden;
  margin-top: 0;
}

/* Kart alt satırındaki "Teklif ver" düğmesi (fiyatsız ilanlarda tarihin
   yerini aldı). Kartın alt şeridine sığsın diye küçük; sağdaki "İncele"
   ile aynı yükseklikte durması için dikey boşluk ona göre. */
/* Kart içindeki "Teklif ver" düğmesi — ÖLÇÜLERİ "İncele" ile birebir.
   Değerler temanın `.btn-apply-now` kuralından (style.css:955) kopyalandı:
   aynı satırda yan yana duran iki düğmenin farklı yükseklikte olması
   (ölçüldü: 83×31 ile 95×38) satırın altını hizasız gösteriyordu.

   RENKLER bilerek AYNI DEĞİL: "İncele" markanın mavisiyle ilanı açıyor,
   "Teklif ver" ise nötr zeminde duran ikincil eylem. İstenen aynı ölçüydü,
   aynı görünüm değil. */
/* Kartın alt satırındaki iki eylem düğmesi ("Teklif ver" ve "İncele") TEK
   ölçü değişkeninden besleniyor: ikisi yan yana duruyor ve farklı boyda
   olmaları satırın altını hizasız gösteriyordu. */
.si-ad-card { --si-cta-w: 112px; }

.si-card-offer,
.si-ad-card .btn-apply-now {
  /* `display: flex` — satır içi kalsaydı çevresindeki satır kutusunun
     dayanağı (strut) yüzünden sütun 38px yerine 48px oluyordu.
     Ayrıca ikonla metni hizalamanın en kısa yolu. */
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--si-cta-w);
  min-width: var(--si-cta-w);
  /* Temanın `.btn` kuralı `margin-bottom: 10px` yazıyor; sütun 38 yerine
     48px oluyor ve düğme "İncele"nin 5px yukarısında kalıyordu (ölçüldü). */
  margin-bottom: 0;
  padding: 12px 8px;
  border-radius: 4px;
  font-size: 12px;
  line-height: 12px;
  white-space: nowrap;
}

/* "Teklif ver" — sistemin mavisiyle çerçeve.
   Zemin nötr kalıyor: "İncele" dolu mavi zeminiyle birincil eylem, teklif
   ise onun yanında çerçeveli ikincil eylem olarak duruyor. */
.si-card-offer {
  border: 1px solid #3C65F5;
  color: #3C65F5;
  background-color: #fff;
}
.si-card-offer:hover { background-color: #E0E6F7; }

/* Düğme ikonları — metnin solunda, düğmenin rengini alıyor.
   Aralık `gap` ile DEĞİL `margin-right` ile: aynı ikon esnek olmayan
   düğmelerde de kullanılıyor (ilan sayfasındaki "Teklif ver"), orada `gap`
   hiç uygulanmıyor ve ikon metne yapışıyordu. `vertical-align` de o satır
   içi durum için: esnek kutuda etkisiz kalıyor. */
.si-btn-ico {
  width: 14px; height: 14px; flex: none;
  margin-right: 6px;
  vertical-align: -2px;
}

/* =============================================================================
   İlan asistanı · sağ alt köşe
   ---------------------------------------------------------------------------
   Temanın "yukarı çık" düğmesi (#scrollUp) de sağ altta, 30/30 konumunda ve
   z-index 999 ile duruyordu. Asistan asıl eylem olduğu için köşeyi o alıyor,
   #scrollUp yukarı kaydırılıyor — style.css'ten SONRA yüklendiğimiz için
   aynı özgüllükteki bu kural kazanıyor.
   ============================================================================= */
#scrollUp { bottom: 96px; }

.si-bot-launch {
  position: fixed; right: 24px; bottom: 24px; z-index: 1000;
  width: 58px; height: 58px; border-radius: 50%;
  border: 0; background: #3C65F5; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(60, 101, 245, .38);
  cursor: pointer;
  transition: transform .15s ease, background .15s ease;
}
.si-bot-launch:hover { background: #2647C4; transform: translateY(-2px); }
.si-bot-launch.is-open { background: #05264E; }
.si-bot-launch svg { width: 26px; height: 26px; }

.si-bot {
  position: fixed; right: 24px; bottom: 94px; z-index: 1000;
  width: 360px; max-width: calc(100vw - 32px);
  /* Yükseklik ekrana göre: kısa ekranda panel taşmasın, uzun ekranda da
     gereksiz büyümesin. */
  max-height: min(72vh, 620px);
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid #E0E6F7; border-radius: 16px;
  box-shadow: 0 18px 50px rgba(5, 38, 78, .28);
  overflow: hidden;
}

.si-bot__head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 16px;
  background: #3C65F5; color: #fff;
}
.si-bot__head strong { display: block; font-size: 15px; }
.si-bot__head span { font-size: 12.5px; opacity: .85; }
.si-bot__close {
  border: 0; background: transparent; color: #fff;
  font-size: 24px; line-height: 1; cursor: pointer; padding: 0 4px;
}

/* Döküm alanı esner; seçenekler her zaman altta sabit kalsın. */
.si-bot__log {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 8px;
  background: #F7F9FF;
}
.si-bot__msg {
  max-width: 86%; padding: 9px 13px; border-radius: 14px;
  font-size: 13.5px; line-height: 1.5;
}
.si-bot__msg--bot { align-self: flex-start; background: #fff; border: 1px solid #E0E6F7; color: #05264E; }
.si-bot__msg--siz { align-self: flex-end; background: #3C65F5; color: #fff; }

/* Sonuç kartları.
   `minmax(0, 1fr)` ve `min-width: 0` ŞART: başlıklar `nowrap` olduğu için
   ızgara/esnek kutunun `auto` en küçük genişliği metnin tamamı kadar oluyor
   ve kartlar panelin dışına taşıp üç nokta yerine kesiliyordu (ölçüldü). */
.si-bot__hits {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 6px; margin-top: 4px; width: 100%;
}
.si-bot__hit {
  min-width: 0;
  display: flex; align-items: center; gap: 9px;
  padding: 9px 11px; border-radius: 10px;
  background: #fff; border: 1px solid #E0E6F7;
  text-decoration: none;
}
.si-bot__hit:hover { border-color: #3C65F5; }
.si-bot__hit i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.si-bot__hit-body { flex: 1; min-width: 0; }
.si-bot__hit-body b {
  display: block; font-size: 13px; color: #05264E; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.si-bot__hit-body em {
  display: block; font-style: normal; font-size: 11.5px; color: #66789C;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.si-bot__hit-price { flex: none; font-size: 12.5px; font-weight: 700; color: #1A7F4B; }

/* Seçenekler */
.si-bot__foot {
  display: flex; flex-wrap: wrap; gap: 7px;
  padding: 12px 14px; border-top: 1px solid #E0E6F7; background: #fff;
  max-height: 190px; overflow-y: auto;
}
.si-bot__opt {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px; border-radius: 999px;
  border: 1px solid #C7D2F0; background: #fff;
  font-size: 13px; font-weight: 600; color: #05264E;
  text-decoration: none; cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.si-bot__opt:hover { border-color: #3C65F5; background: #EDF2FF; }
.si-bot__opt i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.si-bot__opt b { font-size: 11.5px; font-weight: 700; color: #66789C; }
.si-bot__opt--any { border-style: dashed; color: #66789C; }
.si-bot__opt--go { background: #3C65F5; border-color: #3C65F5; color: #fff; }
.si-bot__opt--go:hover { background: #2647C4; border-color: #2647C4; color: #fff; }
.si-bot__hint { font-size: 13px; color: #66789C; }

/* Telefonda panel köşeye sıkışmak yerine alt şeridi kaplıyor. */
@media (max-width: 575.98px) {
  .si-bot { right: 12px; left: 12px; width: auto; bottom: 88px; max-height: 74vh; }
  .si-bot-launch { right: 16px; bottom: 16px; }
  #scrollUp { bottom: 88px; }
}

@media (prefers-reduced-motion: reduce) {
  .si-bot-launch { transition: none; }
  .si-bot-launch:hover { transform: none; }
}

/* =============================================================================
   Menüdeki ilan tipi noktaları
   ---------------------------------------------------------------------------
   Renk kartlarla, harita işaretleriyle ve /ilanlar sekmeleriyle AYNI kaynaktan
   (`ad-type-color.ts`); menü sekiz tipin renk şemasının görüldüğü ilk yer.

   ★ YENİ NOKTA EKLENMİYOR, TEMANINKİ BOYANIYOR. Alt menü bağlantısının zaten
   bir madde işareti var — masaüstünde `a::after` (5px lacivert), mobilde
   `a::before` (5px açık gri). İlk denemede yanlarına ikinci bir nokta
   konmuştu; ikisi üst üste binip her madde yarım renkli görünüyordu
   (ölçüldü). Renk `--si-ad` değişkeniyle bağlantıya geçiliyor, kural da
   temanın kendi sözde elemanını boyuyor.

   `!important` BİLEREK: temanın seçici zinciri altı-yedi seviye
   (`.mobile-header-wrapper-style … .mobile-menu li ul li a::before`). O
   zinciri site.css'te kopyalamak hem okunmaz olurdu hem de tema güncellenince
   sessizce kırılırdı; tek bir bildirimi ezmek daha dayanıklı.
   ============================================================================= */
.si-menu-type::after,
.si-menu-type::before {
  background-color: var(--si-ad) !important;
  /* 5px'te renk seçilmiyordu; 7px'te tip bir bakışta ayırt ediliyor. */
  width: 7px !important;
  height: 7px !important;
}

/* ===========================================================================
   E-posta doğrulama · panel kutuları
   =========================================================================== */

/* Kalıcı bilgi kutusu. Geçici mesajlar toast'a gidiyor; bu kutu bir DURUMU
   anlatıyor ("kod bekleniyor"), o yüzden ekranda kalıyor. */
.si-alert {
  border: 1px solid #dfe6f0; background: #f6f8fb; color: #364861;
  border-radius: 10px; padding: 12px 14px; font-size: 14px; line-height: 1.6;
  margin-bottom: 16px;
}
.si-alert--info { border-color: #cfe0f5; background: #eef5fd; color: #24466e; }
.si-alert--ok   { border-color: #cfe9d6; background: #eefaf1; color: #1e5b34; }
.si-alert--bad  { border-color: #f0d2d5; background: #fdeff0; color: #8d1f27; }

/* Altı haneli kod: geniş harf aralığı, tek tek okunabilsin. */
.si-code-input {
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: 22px; letter-spacing: 8px; text-align: center; max-width: 240px;
}

/* ===========================================================================
   Entegrasyon dokümantasyonu (/entegrasyon)
   =========================================================================== */

.si-docs { font-size: 15px; line-height: 1.75; color: #40506a; max-width: 860px; }
.si-docs h4 {
  font-size: 20px; font-weight: 700; color: #1c2a3f; margin: 40px 0 12px;
  padding-top: 12px; border-top: 1px solid #eef1f6;
  /* Yan menüden gelen bağlantı başlığı üst kenara yapıştırmasın. */
  scroll-margin-top: 90px;
}
.si-docs h4:first-child { margin-top: 0; border-top: none; padding-top: 0; }
.si-docs h5 { font-size: 15.5px; font-weight: 650; color: #24354e; margin: 24px 0 8px; }
.si-docs p { margin-bottom: 14px; }
.si-docs code {
  font-family: 'SFMono-Regular', Consolas, monospace; font-size: 13px;
  background: #f2f5f9; border: 1px solid #e5eaf2; border-radius: 5px;
  padding: 1px 6px; color: #2c3b52; word-break: break-word;
}
.si-docs-note { font-size: 13.5px; color: #66789C; }
.si-docs-list { padding-left: 20px; margin-bottom: 14px; }
.si-docs-list li { list-style: disc; margin-bottom: 6px; }

/* Yan menü: uzun sayfada nerede olduğunu kaybetmemek için sabit. */
.si-docs-toc {
  position: sticky; top: 100px; display: flex; flex-direction: column; gap: 2px;
  border: 1px solid #e6ebf3; border-radius: 12px; padding: 16px; margin-bottom: 24px;
  background: #fff;
}
.si-docs-toc b { font-size: 13px; text-transform: uppercase; letter-spacing: .6px;
  color: #8a97ab; margin-bottom: 8px; }
.si-docs-toc a { font-size: 14px; color: #40506a; padding: 5px 8px; border-radius: 7px; }
.si-docs-toc a:hover { background: #f2f5f9; color: #1c2a3f; }

.si-docs-callout {
  border: 1px solid #dbe6f5; background: #f4f8fd; border-radius: 12px;
  padding: 14px 16px; margin: 16px 0 20px;
}
.si-docs-callout b { display: block; font-size: 13.5px; color: #24466e; margin-bottom: 6px; }
.si-docs-callout code { display: inline-block; margin-bottom: 6px; }
.si-docs-callout span { display: block; font-size: 13.5px; color: #526480; }
.si-docs-callout--warn { border-color: #f0e2bd; background: #fdf8ec; }
.si-docs-callout--warn b { color: #6b5108; }

.si-endpoint { border: 1px solid #e6ebf3; border-radius: 12px; padding: 16px; margin-bottom: 14px; }
.si-endpoint__head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.si-endpoint p { margin-bottom: 0; font-size: 14px; }
.si-endpoint .si-code { margin-top: 14px; }
.si-method {
  font-size: 11.5px; font-weight: 700; letter-spacing: .5px; color: #fff;
  border-radius: 5px; padding: 3px 8px;
}
.si-method--get  { background: #2f6fd0; }
.si-method--post { background: #1f8a4c; }

.si-code { border: 1px solid #e2e8f2; border-radius: 12px; overflow: hidden; margin: 14px 0 20px; }
.si-code__head {
  display: flex; align-items: center; justify-content: space-between;
  background: #f7f9fc; border-bottom: 1px solid #e2e8f2; padding: 8px 14px;
  font-size: 12px; color: #8a97ab; text-transform: uppercase; letter-spacing: .5px;
}
.si-code__head button {
  border: 1px solid #d9e1ec; background: #fff; border-radius: 6px;
  padding: 4px 10px; font-size: 12px; color: #40506a; cursor: pointer;
  text-transform: none; letter-spacing: 0;
}
.si-code__head button:hover { background: #f2f5f9; }
.si-code pre {
  margin: 0; padding: 16px; background: #fbfcfe; overflow-x: auto;
  font-family: 'SFMono-Regular', Consolas, monospace; font-size: 12.5px;
  line-height: 1.65; color: #2c3b52;
}
.si-code pre code { background: none; border: none; padding: 0; font-size: inherit; }

.si-fieldgroup { margin-bottom: 26px; }
/* Geniş tablo sayfayı yatay kaydırmaya zorlamasın; kendi içinde kayar. */
.si-tablewrap { overflow-x: auto; border: 1px solid #e6ebf3; border-radius: 10px; }
.si-docs-table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 620px; }
.si-docs-table thead th {
  text-align: left; background: #f7f9fc; border-bottom: 1px solid #e6ebf3;
  padding: 9px 12px; font-weight: 650; color: #52627d; font-size: 12.5px;
}
.si-docs-table tbody td {
  border-bottom: 1px solid #f0f3f8; padding: 10px 12px; vertical-align: top; color: #45566f;
}
.si-docs-table tbody tr:last-child td { border-bottom: none; }
.si-docs-type { font-family: 'SFMono-Regular', Consolas, monospace; font-size: 12px; color: #66789C; }
.si-docs-example { color: #8a97ab; font-size: 12.5px; }

@media (max-width: 991px) {
  .si-docs-toc { position: static; }
}