/* ==========================================================================
   Firma & Personel Ağı — Tasarım Sistemi v3
   "Modern iş ilanı portalı" teması: açık zemin, temiz kart tasarımı, güçlü
   arama odağı — büyük iş ilanı sitelerinin (kariyer.net vb.) tanıdık ve
   güvenilir dilini konuşur. Turuncu vurgu rengi enerjiyi ve "Acil Vardiya"
   özelliğinin aciliyetini taşırken, koyu lacivert başlıklar profesyonel bir
   ağırlık katar.
   ========================================================================== */
@media (min-width: 900px) {
    .search-float-card.mb-4 .p-3.p-md-4 {
        display: flex;
        flex-direction: row;
    }

    .navbar-nav.align-items-lg-center.gap-lg-2 {
        justify-content: right;
        max-width: 320px;
    }

    #navMenu {
        justify-content: right;
    }
}

.navbar-toggler {
    background-color: #ff6a3d;
}

/* NOT: Bu bölümdeki özel navbar kuralları BİLEREK "@media (min-width: 992px)"
   içine alındı (992px = Bootstrap'ın "navbar-expand-lg" kullandığı kırılım -
   menünün zaten hep açık/yatay göründüğü masaüstü genişliği). Önceki halinde
   bu kurallar medya sorgusu OLMADAN yazılmıştı; ".navbar-nav..." ve "#navMenu"
   gibi seçiciler mobilde de geçerli olduğu için Bootstrap'ın kendi aç/kapa
   (collapse) mekanizmasıyla çakışıyor, mobil menü ya hep açık kalıyor ya da
   açıldığında sıkışık/yatay görünüyordu. 992px korumasıyla: mobilde Bootstrap
   kendi normal collapse davranışını sürdürür, masaüstünde ise istediğin
   yatay/70-genişlik/20px-boşluk görünüm aynen uygulanır.

   Ayrıca eski ".navbar-collapse.collapse.show{ display:flex; }" kuralı
   TAMAMEN KALDIRILDI: ".show" sınıfı sadece MOBİLDE, menü JS ile açıldığında
   eklenir (masaüstünde navbar-expand-lg menüyü zaten "show" sınıfına hiç
   ihtiyaç duymadan kendiliğinden flex gösterir). Yani bu kural pratikte
   SADECE mobil açık menüde devreye giriyor ve normal dikey liste yerine
   menüyü sıkışık bir yatay satıra zorluyordu - masaüstünde zaten gereksizdi,
   mobilde ise zararlıydı. */
/* v2 düzeltme: Meğerse istenen, masaüstünde DEĞİL, MOBİLDE de menü açıldığında
   öğelerin YATAY (Bootstrap'ın varsayılan dikey liste yerine) dizilmesiymiş.
   Bunu, menünün aç/kapa mekanizmasını BOZMADAN yapmanın doğru yolu: kuralı
   sadece menü GERÇEKTEN AÇIKKEN (".show" sınıfı - hamburger'a tıklanınca JS
   tarafından eklenir) uygulamak. Böylece:
   - Menü kapalıyken Bootstrap'ın "display:none" kuralı bozulmadan çalışır
     (aç/kapa düzgün işler - önceki sorunun kaynağı buydu).
   - Menü açıldığında "İlanlar / Personel Girişi / Firma Girişi" yan yana,
     sarmalanabilir (taşırsa alt satıra düşen) yatay bir sıra halinde görünür. */
@media (max-width: 991.98px) {
    .dropdown-menu.dropdown-menu-end.bildirim-menu {
        position: absolute;
        right: -160%;
    }

    .dropdown-menu.dropdown-menu-end {
        position: absolute;
    }

    #navMenu.show {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding-top: .75rem;
    }

        #navMenu.show .navbar-nav {
            flex-direction: row !important;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            gap: 10px;
            width: auto;
            margin: 0 !important;
            padding: 0 !important;
        }

        #navMenu.show .nav-item {
            margin: 0;
        }
}

@media (min-width: 992px) {
    .navbar-nav.align-items-lg-center.gap-lg-2 {
        display: flex !important;
        width: 70%;
        gap: 20px;
        flex-direction: row;
    }

    #navMenu {
        align-items: center;
    }

        #navMenu .navbar-nav.me-auto.mb-2.mb-lg-0 {
            padding: 0 !important;
            margin: 0 !important;
        }
}

:root {
    /* Zemin / yüzeyler */
    --bg: #f6f7fb;
    --surface: #ffffff;
    --surface-2: #fbfbfd;
    --border: #e6e8f0;
    --border-strong: #d7dae5;
    /* Marka renkleri */
    --navy: #131a3d;
    --navy-soft: #2a3266;
    --orange: #ff6a3d;
    --orange-dark: #e85a2c;
    --orange-soft: #fff1eb;
    --teal: #0ea5a0;
    --teal-soft: #e6fbf9;
    --text: #171a2b;
    --text-muted: #6b7085;
    --text-faint: #9498a8;
    --success: #1caa6b;
    --success-soft: #e6f8ef;
    --warning: #ff6a3d;
    --danger: #e5484d;
    --danger-soft: #fdecec;
    --info: #2f6fed;
    --radius-sm: 8px;
    --radius: 14px;
    --radius-lg: 20px;
    --shadow-sm: 0 1px 2px rgba(23, 26, 43, 0.06);
    --shadow-soft: 0 4px 16px rgba(23, 26, 43, 0.07);
    --shadow-lift: 0 16px 40px -12px rgba(23, 26, 43, 0.18);
    --shadow-orange: 0 10px 24px -8px rgba(255, 106, 61, 0.45);
    --font-display: 'Plus Jakarta Sans', 'Segoe UI', sans-serif;
    --font-body: 'Inter', 'Segoe UI', Tahoma, sans-serif;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
}

.main-content {
    flex: 1;
}

/* ---- Başlıklar / tipografi ---- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    color: var(--navy);
    font-weight: 700;
    letter-spacing: -0.015em;
}

.display-title {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: -0.025em;
}

.eyebrow {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--orange);
}

p {
    color: var(--text);
}

.text-muted {
    color: var(--text-muted) !important;
}

small, .small {
    color: var(--text-faint);
}

a {
    color: var(--orange-dark);
    text-decoration: none;
    transition: color .15s ease;
}

    a:hover {
        color: var(--orange);
    }

/* ---- Navbar ---- */
.navbar {
    background: var(--surface) !important;
    border-bottom: 1px solid var(--border);
    padding-top: .85rem;
    padding-bottom: .85rem;
    box-shadow: var(--shadow-sm);
}

.navbar-brand {
    font-family: var(--font-display);
    color: var(--navy) !important;
    font-weight: 800;
    font-size: 1.35rem;
    letter-spacing: -0.02em;
}

    .navbar-brand i {
        color: var(--orange);
        margin-right: .35rem;
    }

.navbar .nav-link {
    color: var(--text) !important;
    font-weight: 600;
    font-size: 0.94rem;
    padding: .5rem .9rem !important;
    border-radius: var(--radius-sm);
    transition: all .15s ease;
}

    .navbar .nav-link:hover {
        color: var(--orange-dark) !important;
        background: var(--orange-soft);
    }

/* Rol bazlı giriş butonları (Personel / Firma) */
.btn-role {
    font-weight: 700;
    font-size: 0.88rem;
    padding: .5rem 1.15rem;
    border-radius: 999px;
    border: 1.5px solid var(--border-strong);
    color: var(--navy);
    background: transparent;
    transition: all .18s ease;
    white-space: nowrap;
}

    .btn-role:hover {
        border-color: var(--orange);
        color: var(--orange-dark);
        background: var(--orange-soft);
    }

.btn-role-primary {
    background: var(--orange);
    border-color: transparent;
    color: #fff;
}

    .btn-role-primary:hover {
        color: #fff;
        background: var(--orange-dark);
        box-shadow: var(--shadow-orange);
    }

/* ---- Butonlar (genel) ---- */
.btn {
    border-radius: var(--radius-sm);
    font-weight: 700;
    padding: .6rem 1.25rem;
    transition: all .18s ease;
    border-width: 1.5px;
}

.btn-primary {
    background: var(--orange);
    border-color: var(--orange);
}

    .btn-primary:hover, .btn-primary:focus {
        background: var(--orange-dark);
        border-color: var(--orange-dark);
        box-shadow: var(--shadow-orange);
        transform: translateY(-1px);
    }

.btn-warning {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
}

    .btn-warning:hover {
        background: var(--navy-soft);
        border-color: var(--navy-soft);
        color: #fff;
        transform: translateY(-1px);
    }

.btn-success {
    background-color: var(--success);
    border-color: var(--success);
}

.btn-outline-light {
    border-color: var(--border-strong);
    color: var(--text);
    background: var(--surface);
}

    .btn-outline-light:hover {
        background: var(--surface-2);
        border-color: var(--navy);
        color: var(--navy);
    }

.btn-outline-danger {
    border-color: var(--danger);
    color: var(--danger);
}

    .btn-outline-danger:hover {
        background: var(--danger);
        color: #fff;
    }

.btn-outline-warning {
    border-color: var(--orange);
    color: var(--orange-dark);
}

    .btn-outline-warning:hover {
        background: var(--orange);
        color: #fff;
    }

.btn-lg {
    padding: .85rem 1.9rem;
    font-size: 1.02rem;
    border-radius: var(--radius-sm);
}

/* ---- Kartlar ---- */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    box-shadow: var(--shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

    .card:hover {
        transform: translateY(-3px);
        box-shadow: var(--shadow-lift);
        border-color: var(--border-strong);
    }

.card-header {
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    color: var(--navy);
    font-family: var(--font-display);
    font-weight: 700;
    border-radius: var(--radius) var(--radius) 0 0 !important;
    padding: .95rem 1.25rem;
}

.card-body {
    padding: 1.4rem;
}

/* ---- Formlar ---- */
label {
    color: var(--text);
    font-weight: 600;
    font-size: .92rem;
    margin-bottom: .35rem;
}

.form-control, .form-select {
    background-color: var(--surface);
    border: 1.5px solid var(--border-strong);
    color: var(--text);
    border-radius: var(--radius-sm);
    padding: .65rem .9rem;
    transition: all .15s ease;
}

    .form-control:focus, .form-select:focus {
        background-color: var(--surface);
        border-color: var(--orange);
        color: var(--text);
        box-shadow: 0 0 0 3px rgba(255, 106, 61, 0.15);
    }

    .form-control::placeholder {
        color: var(--text-faint);
    }

.form-check-input {
    background-color: var(--surface);
    border-color: var(--border-strong);
}

    .form-check-input:checked {
        background-color: var(--orange);
        border-color: var(--orange);
    }

    .form-check-input:focus {
        box-shadow: 0 0 0 3px rgba(255, 106, 61, 0.15);
    }

.input-group-text {
    background: var(--surface-2);
    border: 1.5px solid var(--border-strong);
    color: var(--text-muted);
    font-weight: 600;
}

/* ---- Bildirim zili / dropdown ---- */
.bell-icon {
    color: var(--navy);
    font-size: 19px;
    position: relative;
}

    .bell-icon .badge {
        position: relative;
        top: -8px;
        left: -4px;
        font-size: 10px;
        background: var(--orange) !important;
    }

.bildirim-menu {
    background: var(--surface);
    border: 1px solid var(--border);
    min-width: 320px;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-lift);
}

    .bildirim-menu .dropdown-item {
        color: var(--text);
        white-space: normal;
        padding: .7rem 1rem;
    }

        .bildirim-menu .dropdown-item:hover {
            background: var(--orange-soft);
            color: var(--orange-dark);
        }

.dropdown-menu {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lift);
}

.dropdown-item {
    color: var(--text);
    font-weight: 500;
}

    .dropdown-item:hover {
        background: var(--orange-soft);
        color: var(--orange-dark);
    }

.dropdown-divider {
    border-color: var(--border);
}

/* ---- Rozetler ---- */
.badge {
    font-weight: 700;
    letter-spacing: .01em;
    padding: .42em .75em;
    border-radius: 999px;
}

.badge-hizli {
    background: var(--orange);
    color: #fff;
    position: relative;
    animation: pulse-glow 1.8s ease-in-out infinite;
}

    .badge-hizli::before {
        content: "";
        display: inline-block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #fff;
        margin-right: 5px;
        animation: pulse-dot 1.8s ease-in-out infinite;
    }

@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(255, 106, 61, 0.45);
    }

    50% {
        box-shadow: 0 0 0 7px rgba(255, 106, 61, 0);
    }
}

@keyframes pulse-dot {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: .35;
    }
}

.badge-one-cikan {
    background: var(--navy);
    color: #fff;
}

.badge-plus {
    background: var(--info);
    color: #fff;
}

.badge-premium {
    background: var(--navy);
    color: #fff;
}

.bg-success {
    background-color: var(--success) !important;
}

.bg-danger {
    background-color: var(--danger) !important;
}

.bg-warning {
    background-color: var(--orange) !important;
    color: #fff !important;
}

.bg-secondary {
    background-color: #aeb2c2 !important;
}

.bg-info {
    background-color: var(--info) !important;
}

/* ---- Tablolar ---- */
.table {
    color: var(--text);
}

    .table > :not(caption) > * > * {
        background-color: transparent;
        color: var(--text);
        border-color: var(--border);
    }

    .table thead th {
        color: var(--navy);
        font-weight: 700;
        border-bottom-width: 2px;
        font-size: .82rem;
        text-transform: uppercase;
        letter-spacing: .04em;
    }

/* ---- Footer ---- */
.site-footer {
    background: var(--navy);
    border-top: none;
    color: #b7bad6;
    margin-top: auto;
    padding: 2rem 0;
}

    .site-footer a {
        color: #d7d9ec;
    }

        .site-footer a:hover {
            color: var(--orange);
        }

/* ---- Footer bağlantıları (Yardım Merkezi / Blog / Instagram) ---- */
.footer-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .5rem 1.75rem;
    margin-bottom: 1.1rem;
    padding-bottom: 1.1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

    .footer-links .footer-link {
        display: inline-flex;
        align-items: center;
        gap: .45rem;
        color: #d7d9ec;
        font-weight: 700;
        font-size: .88rem;
        letter-spacing: -0.005em;
        transition: color .15s ease;
    }

        .footer-links .footer-link i {
            font-size: .95rem;
            color: var(--orange);
        }

        .footer-links .footer-link:hover {
            color: var(--orange);
        }

/* ---- Çerez bilgilendirme kutusu (ilk ziyaret) ----------------------------
   Site.master'daki #cerezBanner için. Varsayılan olarak ekranın altına
   kaydırılmış (transform), Assets/js/site.js localStorage'ı kontrol edip
   uygunsa ".show" sınıfını ekleyince yukarı kayarak görünür. */
.cerez-banner {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1080; /* navbar (sticky-top) ve Bootstrap modal'ların (1055) üzerinde */
    background: rgba(31,44,105,0.95);
    box-shadow: 0 -8px 24px rgba(19, 26, 61, .25);
    padding: 1rem 1.25rem;
    transform: translateY(110%);
    transition: transform .35s ease;
}

    .cerez-banner.show {
        transform: translateY(0);
    }

.cerez-banner-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.cerez-banner-icon {
    font-size: 1.4rem;
    color: var(--orange);
    flex-shrink: 0;
}

.cerez-banner-text {
    flex: 1 1;
    margin: 0;
    font-size: .9rem;
    color: #d7d9ec;
}

    .cerez-banner-text a {
        color: #fff;
        font-weight: 700;
        text-decoration: underline;
    }

        .cerez-banner-text a:hover {
            color: var(--orange);
        }

.cerez-banner-btn {
    flex-shrink: 0;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .cerez-banner-inner {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .cerez-banner-btn {
        width: 100%;
    }
}

/* ---- Harita ---- */
#harita {
    width: 100%;
    height: 420px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-soft);
}

/* ---- Sayfalama ---- */
.pagination .page-link {
    background-color: var(--surface);
    border-color: var(--border);
    color: var(--text);
}

.pagination .page-item.active .page-link {
    background: var(--orange);
    border-color: var(--orange);
    color: #fff;
}

/* ---- Uyarılar ---- */
.alert {
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
}

.alert-success {
    background: var(--success-soft);
    border-color: #b9ecd2;
    color: #0d7a49;
}

.alert-danger {
    background: var(--danger-soft);
    border-color: #f6c3c5;
    color: #b8262b;
}

.alert-dark-bar {
    background: var(--orange-soft);
    border-color: var(--orange);
    color: var(--orange-dark);
}

/* ---- Sekmeler (nav-tabs) ---- */
.nav-tabs {
    border-bottom: 1px solid var(--border);
    gap: .25rem;
}

    .nav-tabs .nav-link {
        color: var(--text-muted);
        border: none;
        border-radius: var(--radius-sm) var(--radius-sm) 0 0;
        padding: .65rem 1.25rem;
        font-weight: 700;
        font-size: .92rem;
        background: transparent;
        transition: all .15s ease;
    }

        .nav-tabs .nav-link:hover {
            color: var(--orange-dark);
            border-color: transparent;
        }

        .nav-tabs .nav-link.active {
            color: var(--orange-dark);
            background: var(--surface);
            border-bottom: 2px solid var(--orange);
        }

/* ---- Auth (Giriş/Kayıt) sayfaları — imza tasarım ---- */
.auth-wrap {
    min-height: calc(100vh - 220px);
    display: flex;
    align-items: center;
    padding: 3rem 0;
}

.auth-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lift);
    overflow: hidden;
    position: relative;
}

    .auth-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: var(--orange);
    }

    .auth-card .auth-body {
        padding: 2.5rem;
    }

.auth-icon-badge {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--orange-soft);
    font-size: 1.4rem;
    color: var(--orange);
    margin-bottom: 1.1rem;
}

.auth-switch-link {
    display: block;
    text-align: center;
    padding: 1rem 2.5rem;
    background: var(--surface-2);
    border-top: 1px solid var(--border);
    font-size: .92rem;
    color: var(--text-muted);
}

    .auth-switch-link a {
        color: var(--orange-dark);
        font-weight: 700;
    }

/* ---- Hero (Ana Sayfa) — büyük arama odaklı, iş ilanı portalı üslubu ---- */
.hero-section {
    position: relative;
    border-radius: var(--radius-lg);
    padding: 3.5rem 3rem;
    overflow: hidden;
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-soft) 100%);
    box-shadow: var(--shadow-lift);
    color: #fff;
}

    .hero-section::after {
        content: "";
        position: absolute;
        top: -40%;
        right: -10%;
        width: 420px;
        height: 420px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(255,106,61,0.35), transparent 70%);
        pointer-events: none;
    }

    .hero-section h1, .hero-section .display-title {
        color: #fff;
    }

    .hero-section .eyebrow {
        color: #ffb494;
    }

    .hero-section .lead {
        color: #c7cae3;
        font-size: 1.12rem;
        max-width: 640px;
    }

    .hero-section .btn-outline-light {
        background: transparent;
        border-color: rgba(255,255,255,0.35);
        color: #fff;
    }

        .hero-section .btn-outline-light:hover {
            background: rgba(255,255,255,0.12);
            border-color: #fff;
            color: #fff;
        }

/* Hero'nun alt kenarına taşan büyük arama kartı - iş ilanı portalı imza öğesi */
.search-float-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lift);
    margin-top: -2.75rem;
    position: relative;
    z-index: 2;
    padding: .5rem;
}

@media (max-width: 767px) {
    .search-float-card {
        margin-top: -1.5rem;
    }
}

/* ---- Liste Satırları (Firmalar / İlanlar - kart-grid yerine satır satır görünüm) ---- */
.list-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    margin-bottom: .75rem;
    color: var(--text);
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

a.list-row:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-soft);
    border-color: var(--border-strong);
    color: var(--text);
}

.list-row-logo {
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--surface-2);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-faint);
    font-size: 1.3rem;
    flex-shrink: 0;
}

.list-row-main {
    flex: 1 1 auto;
    min-width: 0;
}

    .list-row-main h5 {
        margin-bottom: .2rem;
    }

.list-row-meta {
    color: var(--text-muted);
    font-size: .87rem;
    margin-bottom: 0;
}

.list-row-side {
    flex-shrink: 0;
    text-align: right;
}

@media (max-width: 575.98px) {
    .list-row {
        padding: .9rem 1rem;
    }

    .list-row-side {
    }
}

/* ---- Yardımcılar ---- */
.badge-kvkk-required::after {
    content: " *";
    color: var(--danger);
}

.text-gold {
    color: var(--orange) !important;
}

@media (max-width: 767px) {
    .hero-section {
        padding: 2.5rem 1.5rem;
    }

    .auth-card .auth-body {
        padding: 1.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }
}

/* ==========================================================================
   MOBİL UYUMLULUK — genel düzeltmeler
   ========================================================================== */


@media (max-width: 767.98px) {
    .row > [class*="col-md-"],
    .row > [class*="col-lg-"],
    .row > [class*="col-xl-"] {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }
}
/* NOT: "col-sm-*" için kasıtlı olarak genel bir toptan kural EKLEMİYORUZ -
   projede "col-8 col-sm-4" gibi BİLEREK yazılmış (taban class'ı zaten var)
   satırlar da mevcut; onlarla çakışmaması için gerçekten taban class'ı
   eksik olan yerler (dt/dd etiket-değer listeleri) aşağıda tek tek,
   ilgili sayfaların markup'ında col-12 eklenerek düzeltildi. */

/* Genel taşma güvenliği: tek bir öğe (uzun kelime, geniş tablo vb.) yatay
   scrollbar'a / sayfanın yana kaymasına neden olmasın. */
html, body {
    overflow-x: hidden;
}

/* Uzun pozisyon adı, adres, e-posta gibi metinler dar ekranlarda kartın
   dışına taşmasın.
   NOT (düzeltme): Bu kural ÖNCEDEN ".table td, .table th" için de
   uygulanıyordu - bu YANLIŞTI. "word-break: break-word" bir tabloda
   sığdıracak yer bulamayınca kelimeleri değil, TEK TEK HARFLERİ alt alta
   dizmeye zorluyordu (mobilde "POZİSYON(LAR)" gibi başlıkların harf harf
   dikey akması bundandı). Tablolar zaten ".table-responsive" ile
   sarmalanıp yatay kaydırma ile çözülüyor - onlara ayrıca break-word
   uygulamaya hiç gerek yok, sadece zarar veriyordu. */
.card-body {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Tablo hücreleri: kelimeleri/harfleri kırıp alt alta dizmek yerine tek
   satırda tutulur - sığmazsa üstteki ".table-responsive" sarmalayıcı zaten
   yatay kaydırma sağlıyor (parmakla sağa/sola kaydır). */
.table td, .table th {
    white-space: nowrap;
}

/* Dokunma hedefleri: küçük ikon butonları (satır kaldır, vs.) telefonda
   rahat basılabilecek minimum boyutta olsun. */
.btn-sm {
    min-height: 32px;
}

@media (max-width: 575.98px) {
    .btn {
        min-height: 44px;
    }

    .btn-sm {
        min-height: 38px;
    }
}

/* Başlıklar mobilde orantısız büyük durmasın. */
@media (max-width: 575.98px) {
    .display-title {
        font-size: 1.75rem;
    }

    h1 {
        font-size: 1.6rem;
    }

    h2 {
        font-size: 1.35rem;
    }

    h3 {
        font-size: 1.15rem;
    }

    .auth-icon-badge {
        width: 48px;
        height: 48px;
        font-size: 1.2rem;
    }
}

/* Bildirim menüsü / dropdown'lar dar ekranda ekran dışına taşmasın. */
@media (max-width: 575.98px) {
    .bildirim-menu {
        min-width: 0;
        width: calc(100vw - 2rem);
    }

    .dropdown-menu-end {
        right: 0;
        left: auto;
    }
}

/* Google Haritalar mobilde daha kısa dursun (parmakla kaydırmayı engellemesin). */
@media (max-width: 575.98px) {
    #harita {
        height: 260px;
    }
}

/* Tablolar: mobilde okunabilirlik için biraz daha küçük yazı. */
@media (max-width: 575.98px) {
    .table {
        font-size: 0.86rem;
    }

        .table thead th {
            font-size: 0.72rem;
        }
}

/* "İlanlarım" başlığı + butonlar, kart başlığı + rozet/aksiyon butonu gibi
   ".d-flex.justify-content-between" kalıpları projede çok kullanılmış; metin
   veya buton(lar) uzun olduğunda dar ekranda taşabiliyordu. Sarmalanabilir
   yapmak, tek satıra sığmadığında zarifçe alt satıra düşmesini sağlar -
   var olan hiçbir görünümü bozmaz, sadece dar ekranda taşmayı önler. */
.d-flex.justify-content-between {
    flex-wrap: wrap;
    row-gap: .5rem;
}

/* Navbar logosu (Site.master). İstenen genişlik 250px, ama navbar'da hamburger
   butonuyla aynı satırda dar telefonlarda (320-375px) sabit 250px taşmaya /
   sıkışmaya yol açar - bu yüzden "max-width" olarak uygulayıp mobilde daha da
   küçültüyoruz; masaüstünde görünüm istenen 250px ile birebir aynı. */
.navbar-logo {
    width: 250px;
    max-width: 60vw;
    height: auto;
}

@media (max-width: 575.98px) {
    .navbar-logo {
        max-width: 46vw;
    }
}

/* v3.22 - "Geri" oku: İlan/Firma/Personel detay sayfalarının sol üstünde,
   tarayıcı geçmişinde bir önceki sayfaya (arama/liste sonuçlarına) dönmek
   için. history.back() kullanır - bkz. Ilan/Detay.aspx, Firma/Detay.aspx,
   Firma/PersonelDetay.aspx üstündeki <a class="geri-btn">. */
.geri-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--navy);
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    margin-bottom: 1rem;
    transition: background .15s, box-shadow .15s, color .15s;
}

.geri-btn:hover {
    background: var(--orange-soft);
    border-color: var(--orange);
    color: var(--orange-dark);
    box-shadow: var(--shadow-soft);
}

/* v3.23 - Tek, öne çıkan birincil CTA'lar için (bkz. Default.aspx "İlanlarda
   Ara"). Normal .btn-primary'den (düz dolgu) daha parlak/belirgin: hafif
   gradyan + daha güçlü turuncu gölge + hover'da yukarı kalkma. Bilinçli
   olarak SADECE gerçekten tek bir birincil eylemin öne çıkması istenen
   yerlerde kullanılır - her yerde kullanılırsa ayırt ediciliğini kaybeder.
   Buna karşılık "Filtrele" (Ilan/Ara.aspx, Ilan/Liste.aspx) ve "Bütün
   İlanlara Git" (Default.aspx) gibi ikincil aksiyonlar bilinçli olarak
   .btn-outline-light'a (soluk) çevrildi. */
.btn-cta {
    background: linear-gradient(135deg, var(--orange) 0%, var(--orange-dark) 100%);
    border-color: var(--orange-dark);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 10px 24px -6px rgba(255, 106, 61, 0.55);
    transition: transform .15s ease, box-shadow .15s ease;
}

    .btn-cta:hover, .btn-cta:focus {
        background: linear-gradient(135deg, var(--orange-dark) 0%, var(--orange) 100%);
        border-color: var(--orange-dark);
        color: #fff;
        box-shadow: 0 14px 30px -6px rgba(255, 106, 61, 0.65);
        transform: translateY(-2px);
    }

/* v3.23 - Ana sayfadaki arama kutusunun ("Pozisyon" / "Anahtar Kelime")
   alanları, kartla (.search-float-card, beyaz) aynı beyaz zemine sahip
   olduğu için sadece ince bir kenarlıkla ayrılıyor ve kontrastı düşük
   kalıyordu. Alanların zeminini karttan biraz farklılaştırıp etiketleri
   koyulaştırarak daha net bir ayrım sağlıyoruz - sadece bu arama kutusuna
   özel (site genelindeki diğer formları etkilemez). Not: aynı .search-float-
   card sınıfı yardim-merkezi/Default.aspx'teki arama kutusunda da
   kullanıldığından, iyileştirme oraya da (istenmeden değil, tutarlılık için)
   yansır. */
.search-float-card label {
    color: var(--navy);
}

.search-float-card .form-control,
.search-float-card .form-select {
    background: var(--bg);
    border-color: var(--border-strong);
}

    .search-float-card .form-control:focus,
    .search-float-card .form-select:focus {
        background: var(--surface);
    }

/* v3.23 - Personel/Giris.aspx ve Firma/Giris.aspx'teki ortadaki form kartı
   (.auth-card), tek katmanlı yumuşak gölgenin (--shadow-lift) sayfa zemini
   (--bg) ile arasındaki ton farkı az olduğundan yeterince "öne çıkmıyordu".
   Var olan uzun/yumuşak gölgeye, kartın hemen altında ince/koyu bir "temas"
   gölgesi ekleyerek kenarları daha net kesinleştiriyoruz. */
.auth-card {
    box-shadow: 0 2px 10px rgba(23, 26, 43, 0.10), var(--shadow-lift);
}