/* ============================================================
   Anasayfa modülleri: İŞKUR ilanları · Kariyer · İşlem Süreçleri
   (templates/home/bolum/iskur.php, kariyer.php, surecler.php)
   Tasarım dili: main.css değişkenleri (--primary lacivert, --secondary altın)
   ============================================================ */

.hb-bolum { padding: 68px 0; }

/* --- Ortak başlık şeridi (gundem-bas deseniyle aynı ritim) --- */
.hb-bas {
    display: flex; align-items: flex-end; justify-content: space-between;
    flex-wrap: wrap; gap: 14px 20px; margin-bottom: 32px;
}
.hb-baslik h2 {
    font-family: var(--font-heading); font-size: 32px; line-height: 1.15;
    color: var(--primary); margin: 0;
}
.hb-tumu {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 44px; padding: 10px 18px; border-radius: 999px;
    border: 1px solid var(--border); background: var(--white);
    color: var(--primary); font-size: 13.5px; font-weight: 600;
    transition: all var(--transition-fast); white-space: nowrap;
}
.hb-tumu:hover { background: var(--primary); border-color: var(--primary); color: #fff; }

/* --- Ortak küçük rozet ve kart oku --- */
.hb-rozet {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--bg-alt);
    /* DENETİM: --text-light #64748B, #F1F5F9 üzerinde 4.34:1 (AA altı)
       → --metin-soluk #5B6B7F ile 4.97:1 */
    color: var(--metin-soluk, #5B6B7F);
    font-size: 12px; font-weight: 700; line-height: 1.5;
    padding: 4px 11px; border-radius: 999px; white-space: nowrap;
}
.hb-rozet i { font-size: 10.5px; color: var(--metin-altin, #806515); }
.hb-rozet-uyari { background: #FDF0E4; color: var(--warning); }
.hb-rozet-uyari i { color: var(--warning); }
.hb-kart-ok {
    margin-inline-start: auto; display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
    background: var(--bg-alt); color: var(--primary); font-size: 12px;
    transition: all var(--transition-fast);
}

/* ============================================================
   1) İŞKUR — beyaz zemin
   ============================================================ */
.hb-iskur { background: var(--white); }

.hb-iskur-ozet {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
    margin-bottom: 26px;
}
.hb-iskur-sayi {
    display: flex; align-items: center; gap: 14px;
    background: var(--bg); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 16px 20px;
}
.hb-iskur-sayi > i {
    width: 46px; height: 46px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 12px; background: var(--primary); color: var(--secondary-light);
    font-size: 18px;
}
.hb-iskur-sayi strong {
    display: block; font-family: var(--font-heading);
    font-size: 26px; line-height: 1.1; color: var(--primary);
}
.hb-iskur-sayi span { font-size: 13px; color: var(--text-light); font-weight: 600; }

.hb-iskur-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.hb-iskur-kart {
    display: flex; flex-direction: column; gap: 10px;
    background: var(--white); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 20px;
    box-shadow: var(--shadow-sm); transition: all var(--transition-fast);
}
.hb-iskur-kart:hover { border-color: var(--secondary); box-shadow: var(--shadow); transform: translateY(-3px); }
.hb-iskur-meslek {
    font-size: 15.5px; font-weight: 700; color: var(--text); line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; min-height: 2.7em;
}
.hb-iskur-kart:hover .hb-iskur-meslek { color: var(--primary); }
.hb-iskur-meta {
    display: flex; flex-wrap: wrap; gap: 6px 16px;
    font-size: 13px; color: var(--text-light); font-weight: 500;
}
.hb-iskur-meta i { color: var(--metin-altin, #806515); font-size: 12px; margin-inline-end: 4px; }
.hb-iskur-alt {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    margin-top: auto; padding-top: 14px; border-top: 1px solid var(--bg-alt);
}
.hb-iskur-kart:hover .hb-kart-ok { background: var(--secondary); color: var(--altin-uzeri-metin, #1B3A5C); }

/* ============================================================
   2) Kariyer — açık gri (bg-alt) zemin
   ============================================================ */
.hb-kariyer { background: var(--bg-alt); }
.hb-kariyer .hb-rozet { background: var(--bg); }
.hb-kariyer .hb-kart-ok { background: var(--bg); }

.hb-kariyer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.hb-kariyer-kart {
    display: flex; flex-direction: column; gap: 10px;
    background: var(--white); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 20px;
    box-shadow: var(--shadow-sm); transition: all var(--transition-fast);
}
.hb-kariyer-kart:hover { border-color: var(--secondary); box-shadow: var(--shadow); transform: translateY(-3px); }
.hb-kariyer-firma {
    /* DENETİM: --secondary-dark #A8882E beyaz üzerinde 3.37:1 → 5.54:1 */
    font-size: 12.5px; font-weight: 700; color: var(--metin-altin, #806515);
    text-transform: uppercase; letter-spacing: .04em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hb-kariyer-firma i { margin-inline-end: 5px; }
.hb-kariyer-baslik {
    font-size: 15.5px; font-weight: 700; color: var(--text); line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; min-height: 2.7em;
}
.hb-kariyer-kart:hover .hb-kariyer-baslik { color: var(--primary); }
.hb-kariyer-alt {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    margin-top: auto; padding-top: 14px; border-top: 1px solid var(--bg-alt);
}
.hb-kariyer-kart:hover .hb-kart-ok { background: var(--secondary); color: var(--altin-uzeri-metin, #1B3A5C); }

/* Kariyer boş hâli: çift CTA kartı */
.hb-kariyer-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.hb-cta-kart {
    display: flex; align-items: center; gap: 20px;
    background: var(--white); border: 1px solid var(--border);
    border-radius: var(--radius-xl); padding: 28px;
    box-shadow: var(--shadow-sm); transition: all var(--transition-fast);
}
.hb-cta-kart:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); border-color: var(--secondary); }
.hb-cta-ikon {
    width: 62px; height: 62px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 16px; background: var(--bg-alt); color: var(--primary); font-size: 24px;
    transition: all var(--transition-fast);
}
.hb-cta-kart:hover .hb-cta-ikon { background: var(--secondary); color: var(--altin-uzeri-metin, #1B3A5C); }
.hb-cta-govde { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.hb-cta-govde strong {
    font-family: var(--font-heading); font-size: 20px; color: var(--primary); line-height: 1.2;
}
/* DENETİM: 4.34:1 → 4.97:1 (açık gri zeminli bölümde de geçerli) */
.hb-cta-govde > span { font-size: 14px; color: var(--metin-soluk, #5B6B7F); line-height: 1.55; }
.hb-cta-rozet {
    display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
    margin-top: 8px; padding: 5px 13px; border-radius: 999px;
    /* DENETİM: krem rozet zemininde 3.02:1 → 4.95:1 */
    background: rgba(200, 162, 60, .14); color: var(--metin-altin, #806515);
    font-size: 12.5px; font-weight: 700;
}
.hb-cta-ok {
    margin-inline-start: auto; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 50%;
    background: var(--bg-alt); color: var(--primary); font-size: 15px;
    transition: all var(--transition-fast);
}
.hb-cta-kart:hover .hb-cta-ok { background: var(--primary); color: #fff; }

/* İşveren kartı: lacivert vurgulu varyant */
.hb-cta-kart-koyu { background: linear-gradient(150deg, var(--primary-dark) 0%, var(--primary) 70%, #24507F 100%); border-color: var(--primary); }
.hb-cta-kart-koyu .hb-cta-ikon { background: rgba(255, 255, 255, .12); color: var(--secondary-light); }
.hb-cta-kart-koyu .hb-cta-govde strong { color: #fff; }
.hb-cta-kart-koyu .hb-cta-govde > span { color: rgba(255, 255, 255, .78); }
.hb-cta-kart-koyu .hb-cta-rozet { background: rgba(200, 162, 60, .22); color: var(--secondary-light); }
.hb-cta-kart-koyu .hb-cta-ok { background: rgba(255, 255, 255, .12); color: #fff; }
.hb-cta-kart-koyu:hover .hb-cta-ikon,
.hb-cta-kart-koyu:hover .hb-cta-ok { background: var(--secondary); color: var(--altin-uzeri-metin, #1B3A5C); }

/* ============================================================
   3) İşlem Süreçleri — lacivert şerit (proje-serit ile uyumlu)
   ============================================================ */
.hb-surec {
    position: relative; overflow: hidden;
    background: linear-gradient(150deg, var(--primary-dark) 0%, var(--primary) 65%, #24507F 100%);
}
.hb-surec .hb-baslik h2 { color: #fff; }
.hb-surec-sag { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.hb-surec-toplam {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 16px; border-radius: 999px;
    background: rgba(200, 162, 60, .18); color: var(--secondary-light);
    font-size: 13px; font-weight: 700; white-space: nowrap;
}
.hb-tumu-acik { background: transparent; border-color: rgba(255, 255, 255, .28); color: rgba(255, 255, 255, .88); }
.hb-tumu-acik:hover { background: var(--secondary); border-color: var(--secondary); color: var(--altin-uzeri-metin, #1B3A5C); }

.hb-surec-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.hb-surec-kart {
    display: flex; flex-direction: column; gap: 12px;
    background: var(--white); border-radius: var(--radius-lg); padding: 20px;
    box-shadow: 0 6px 18px rgba(10, 22, 38, .22);
    transition: all var(--transition-fast);
}
.hb-surec-kart:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(10, 22, 38, .32); }
.hb-surec-ust { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hb-surec-ikon {
    width: 46px; height: 46px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 12px; background: var(--primary); color: var(--secondary-light);
    font-size: 18px; transition: all var(--transition-fast);
}
.hb-surec-kart:hover .hb-surec-ikon { background: var(--secondary); color: var(--altin-uzeri-metin, #1B3A5C); }
.hb-surec-kat {
    font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    /* DENETİM: 3.37:1 → 5.54:1 */
    color: var(--metin-altin, #806515); text-align: end;
}
.hb-surec-ad {
    font-size: 15px; font-weight: 700; color: var(--text); line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; min-height: 2.7em;
}
.hb-surec-kart:hover .hb-surec-ad { color: var(--primary); }
.hb-surec-alt {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    margin-top: auto; padding-top: 13px; border-top: 1px solid var(--bg-alt);
}
.hb-surec-kart:hover .hb-kart-ok { background: var(--secondary); color: var(--altin-uzeri-metin, #1B3A5C); }

/* ============================================================
   Duyarlılık
   ============================================================ */
@media (max-width: 1024px) {
    .hb-iskur-grid { grid-template-columns: repeat(2, 1fr); }
    .hb-kariyer-grid { grid-template-columns: repeat(2, 1fr); }
    .hb-surec-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .hb-bolum { padding: 52px 0; }
    .hb-baslik h2 { font-size: 26px; }
    .hb-iskur-ozet { grid-template-columns: 1fr; gap: 10px; }
    .hb-iskur-sayi { padding: 14px 16px; }
    .hb-kariyer-cta { grid-template-columns: 1fr; }
    .hb-cta-kart { padding: 22px; gap: 16px; }
    .hb-cta-govde strong { font-size: 18px; }
}

@media (max-width: 480px) {
    .hb-iskur-grid, .hb-kariyer-grid, .hb-surec-grid { grid-template-columns: 1fr; }
    .hb-iskur-meslek, .hb-kariyer-baslik, .hb-surec-ad { min-height: 0; }
    .hb-bas { align-items: flex-start; flex-direction: column; }
    .hb-surec-sag { width: 100%; justify-content: space-between; }
    .hb-cta-ok { display: none; }
}

/* Gövde metin boyutu ve dokunma hedefleri mobil kurallara uyar:
   kart bağlantıları blok düzeyinde (≥44px), rozet metinleri bilgi amaçlı. */

@media (prefers-reduced-motion: reduce) {
    .hb-iskur-kart, .hb-kariyer-kart, .hb-cta-kart, .hb-surec-kart,
    .hb-tumu, .hb-kart-ok, .hb-cta-ikon, .hb-cta-ok, .hb-surec-ikon {
        transition: none;
    }
    .hb-iskur-kart:hover, .hb-kariyer-kart:hover, .hb-cta-kart:hover, .hb-surec-kart:hover {
        transform: none;
    }
}