/* ============================================================
   Şehir / meslek ilan sayfaları (/is-ilanlari/...)

   Sunucuda çizilen sayfalar (seo.js). İlanlar sayfasının mavi
   başlığıyla aynı aile; gövde sade bir liste — Google'ın ve
   ziyaretçinin ilk baktığı şey ilanların kendisi.
   ============================================================ */

.sy-hero{background:#1f4fd1;color:#fff;position:relative;overflow:hidden}
.sy-hero::before{content:"";position:absolute;width:430px;height:430px;right:5%;top:-210px;
  border:1px solid rgba(255,255,255,.08);border-radius:50%;
  box-shadow:0 0 0 72px rgba(255,255,255,.025),0 0 0 144px rgba(255,255,255,.018)}
.sy-hero .wrap{position:relative;padding-top:30px;padding-bottom:34px}
.sy-kirinti{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;color:rgba(232,238,255,.78)}
.sy-kirinti a{color:#fff;text-decoration:none;opacity:.86}
.sy-kirinti a:hover{opacity:1;text-decoration:underline}
.sy-hero h1{font-family:Archivo,var(--display);font-weight:800;font-size:clamp(32px,4.4vw,52px);
  line-height:1.02;letter-spacing:-.045em;margin:18px 0 12px;color:#fff}
.sy-hero h1::first-letter{text-transform:uppercase}
.sy-hero p{font-size:17px;color:rgba(236,241,255,.9);max-width:62ch}
.sy-hero p b{color:#fff}

.sy-govde{padding-top:28px;padding-bottom:56px;display:flex;flex-direction:column;gap:30px}
.sy-govde h2{font-family:Archivo,var(--display);font-weight:800;font-size:22px;letter-spacing:-.03em;color:var(--ink);margin-bottom:14px}

.sy-ozet{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin:0}
.sy-ozet div{background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r-lg);padding:14px 16px}
.sy-ozet dt{font-size:12.5px;color:var(--muted);font-weight:600}
.sy-ozet dd{margin:4px 0 0;font-family:Archivo,var(--display);font-weight:800;font-size:24px;letter-spacing:-.035em;color:var(--ink)}
.sy-sayac{font-size:15px;color:var(--ink-2)}
.sy-sayac b{font-family:Archivo,var(--display);font-weight:800;color:var(--ink)}

.sy-ilanlar{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.sy-ilan a{display:grid;gap:4px;padding:16px 18px;background:var(--card);border:1px solid var(--line-soft);
  border-radius:var(--r-lg);text-decoration:none;color:inherit;transition:border-color .15s,box-shadow .15s,transform .15s}
.sy-ilan a:hover{border-color:#b9c9f3;box-shadow:0 10px 26px -16px rgba(16,33,61,.35);transform:translateY(-1px)}
.sy-ilan-ust{display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.sy-ilan-ust b{font-size:17px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.sy-ilan-ust em{font-style:normal;font-weight:700;color:var(--green-ink);white-space:nowrap;font-size:15px}
.sy-ilan-isveren{font-size:14px;color:var(--ink-2)}
.sy-ilan-alt{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;margin-top:6px}
.sy-ilan-alt i{font-style:normal;font-size:12.5px;font-weight:600;color:var(--ink-2);background:var(--paper);
  border:1px solid var(--line-soft);padding:3px 9px;border-radius:999px}
.sy-ilan-alt time{margin-left:auto;font-size:12.5px;color:var(--muted)}
.sy-hepsi a{font-weight:700;color:var(--link)}

.sy-bulut ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.sy-bulut a{display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border-radius:999px;background:var(--card);
  border:1px solid var(--line);color:var(--ink);font-weight:600;font-size:14px;text-decoration:none;transition:border-color .15s,background .15s}
.sy-bulut a:hover{border-color:#1f4fd1;background:var(--paper-2)}
.sy-bulut a span{font-size:12px;font-weight:700;color:#1f4fd1;background:var(--paper-2);border-radius:999px;padding:1px 7px}

.sy-cagri{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px;padding:20px 22px;border-radius:var(--r-lg);
  background:var(--navy);color:#fff}
.sy-cagri div{flex:1 1 280px;display:flex;flex-direction:column;gap:3px}
.sy-cagri b{font-family:Archivo,var(--display);font-size:19px;font-weight:800;letter-spacing:-.02em}
.sy-cagri span{color:rgba(230,236,250,.8);font-size:14px}
.sy-btn{display:inline-flex;align-items:center;padding:11px 16px;border-radius:10px;background:#fff;color:var(--navy);
  font-weight:700;font-size:14px;text-decoration:none}
.sy-btn.ikincil{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.32)}
.sy-btn:hover{opacity:.92}
.sy-bos{font-size:16px;color:var(--ink-2)}

/* ilanlar ve ana sayfa altındaki "popüler aramalar" şeridi */
.sy-populer{padding-top:34px;padding-bottom:34px;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px 36px}
.sy-populer h2{font-family:Archivo,var(--display);font-weight:800;font-size:16px;letter-spacing:-.02em;color:var(--ink);margin-bottom:10px}
.sy-populer ul{list-style:none;margin:0;padding:0;columns:2;column-gap:18px}
.sy-populer li{break-inside:avoid;padding:3px 0}
.sy-populer a{color:var(--ink-2);font-size:14px;text-decoration:none}
.sy-populer a:hover{color:#1f4fd1;text-decoration:underline}

@media (max-width:640px){
  .sy-hero .wrap{padding-top:22px;padding-bottom:26px}
  .sy-hero p{font-size:15.5px}
  .sy-ilan-ust{flex-direction:column;gap:2px}
  .sy-ilan-alt time{margin-left:0}
  .sy-cagri .sy-btn{width:100%;justify-content:center}
}
.sy-populer > div:last-child ul{columns:1}

/* İlanlar sayfasında liste JavaScript'le geliyor. Alan ayrılmazsa
   alttaki popüler aramalar şeridi ilk anda ekranda görünüp liste
   gelince aşağı itiliyordu (CLS). Sonuç sütunu baştan ekran boyu. */
.jobs-board .jobs-results{min-height:100vh}

/* Şehir/meslek sayfalarında üst menü JavaScript'le kuruluyor; yeri
   baştan ayrılmazsa gelince bütün sayfayı aşağı itiyor (CLS). */
body.sy #siteHeader{min-height:61px}
@media (min-width:701px){ body.sy #siteHeader{min-height:123px} }

/* Ana sayfa kapak başlığı: genişlik design-polish.css'te "ch" ile
   sınırlı. ch yazı tipine göre ölçülüyor; web yazı tipi yüklenince
   başlık 346 px'ten 257 px'e daralıp iki satır uzuyor, sonra geri
   dönüyordu (CLS ~0.14). Aynı son genişlik, yazı tipinden bağımsız
   em ile: 11.5ch = 7.843em, 12ch = 8.184em (ölçülen son değerler). */
.home-v2 .home-hero h1{max-width:7.843em}
@media (max-width:940px){ .home-v2 .home-hero h1{max-width:8.184em} }