/* =========================================================
   JobAdvertisement.css
   - Font: inherit (kalın font yok)
   - Responsive: mobil uyumlu
   - Temiz, modern, sade görünüm
   ========================================================= */

:root {
    --hr-bg: #ffffff;
    --hr-surface: #ffffff;
    --hr-surface-2: #f6f8fb;
    --hr-border: rgba(15, 23, 42, .10);
    --hr-border-2: rgba(15, 23, 42, .14);
    --hr-text: #0f172a;
    --hr-muted: rgba(15, 23, 42, .68);
    --hr-primary: #2563eb;
    --hr-primary-2: #1d4ed8;
    --hr-danger: #dc2626;
    --hr-radius: 14px;
    --hr-radius-sm: 10px;
    --hr-shadow: 0 10px 30px rgba(2, 6, 23, .08);
    --hr-shadow-sm: 0 6px 18px rgba(2, 6, 23, .08);
    --hr-focus: 0 0 0 4px rgba(37, 99, 235, .18);
}


/* =========================================================
   FORM WRAPPER / SECTIONS
   ========================================================= */

#message-form {
    max-width: 1200px;
    margin: 0 auto 36px;
    padding: 18px 0 30px;
}

    #message-form h5 {
        margin: 26px 0 14px;
        text-align: center;
        font-weight: normal; /* kalın yok */
        color: var(--hr-text);
        font-size: 18px;
    }

        #message-form h5 + br {
            display: none; /* boşlukları CSS ile yönetiyoruz */
        }

    #message-form .row {
        --bs-gutter-x: 18px;
        --bs-gutter-y: 18px;
    }

    /* =========================================================
   TOP IMAGE + UPLOAD AREA
   ========================================================= */

    #message-form > div:first-child {
        margin-bottom: 18px;
    }

    #message-form .left-content,
    #message-form .right-content {
        background: var(--hr-surface);
     
        padding: 18px;
    }

    #message-form .left-content {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 140px;
    }

        #message-form .left-content img {
            max-width: 100%;
            height: auto;
            object-fit: contain;
        }

    #message-form .right-content .form-group {
        margin-bottom: 14px;
    }

#resim-yukle {
    width: 100%;
}

/* "Resim Yüklendi" */
#resim-mesaj {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(16, 185, 129, .10);
    border: 1px solid rgba(16, 185, 129, .25);
    color: rgba(15, 23, 42, .86);
}

#yuklenen-resim {
    width: 100% !important;
    height: auto !important;
    max-height: 420px;
    object-fit: contain;
    border-radius: var(--hr-radius);
    border: 1px dashed var(--hr-border-2);
    background: var(--hr-surface-2);
    padding: 10px;
}

/* =========================================================
   FORM CONTROLS
   ========================================================= */

.form-group {
    margin-bottom: 14px;
}

.form-label,
label {
    display: inline-block;
    margin-bottom: 8px;
    font-size: 14px;
    color: var(--hr-muted);
    font-weight: normal; /* kalın yok */
}

.form-control,
.form-control-file,
select.form-control,
textarea.form-control {
    width: 100%;
    border-radius: 12px;
    border: 1px solid var(--hr-border);
    background: var(--hr-surface);
    color: var(--hr-text);
    padding: 11px 12px;
    font-size: 15px;
    outline: none;
    transition: box-shadow .15s ease, border-color .15s ease, transform .05s ease;
    font-weight: normal;
}

    .form-control:focus,
    select.form-control:focus,
    textarea.form-control:focus {
        border-color: rgba(37, 99, 235, .55);
        box-shadow: var(--hr-focus);
    }

textarea.form-control {
    min-height: 120px;
}

.form-control::placeholder {
    color: rgba(15, 23, 42, .38);
}

/* Validation message */
.form-validation,
.field-validation-error {
    display: block;
    margin-top: 6px;
    color: var(--hr-danger);
    font-size: 13px;
}

/* Date input better tap target on mobile */
input[type="date"].form-control {
    padding-right: 10px;
}

/* =========================================================
   TABLE AREAS (Mesleki hedef / Diğer bilgiler)
   ========================================================= */

.table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 10px;
    margin: 0;
}

    .table tbody tr td {
        vertical-align: top;
    }

    .table tbody tr {
        background: transparent;
    }

        .table tbody tr td:first-child {
            width: 44px;
            color: var(--hr-muted);
            font-size: 14px;
            padding-top: 14px;
        }

    .table textarea.form-control {
        background: var(--hr-surface);
    }

    /* Make the long Q/A blocks look like cards */
    .table tbody tr td[colspan],
    .table tbody tr td:last-child {
        border-radius: 14px;
    }

    .table tbody tr td:nth-child(2) {
        padding: 10px 12px;
        border: 1px solid var(--hr-border);
        border-radius: 14px;
        background: var(--hr-surface);
    }

        .table tbody tr td:nth-child(2):has(textarea) {
            padding: 0;
            border: none;
            background: transparent;
        }

        .table tbody tr td:nth-child(2) textarea {
            border: 1px solid var(--hr-border);
            border-radius: 14px;
            box-shadow: var(--hr-shadow-sm);
        }

/* =========================================================
   ACCORDION (Bootstrap collapse)
   ========================================================= */

.accordion {
    border-radius: var(--hr-radius);
}

.card {
    border: 1px solid var(--hr-border) !important;
    border-radius: var(--hr-radius) !important;
    overflow: hidden;
    box-shadow: var(--hr-shadow-sm);
    background: var(--hr-surface);
}

    .card + .card {
        margin-top: 14px;
    }

.card-header {
    background: linear-gradient(180deg, rgba(2, 6, 23, .02), transparent 55%), var(--hr-surface);
    border-bottom: 1px solid var(--hr-border);
    padding: 0;
}

    .card-header h2 {
        margin: 0;
    }

    .card-header .btn {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 14px 16px;
        color: var(--hr-text);
        text-decoration: none;
        background: transparent;
        border: 0;
        font-size: 15px;
        font-weight: normal; /* kalın yok */
    }

        .card-header .btn:hover {
            background: rgba(37, 99, 235, .06);
        }

        .card-header .btn:focus {
            outline: none;
            box-shadow: var(--hr-focus);
            border-radius: 0;
        }

        .card-header .btn i {
            transition: transform .2s ease;
            opacity: .75;
        }

        .card-header .btn[aria-expanded="true"] i {
            transform: rotate(180deg);
        }

.card-body {
    padding: 14px 16px 18px;
}

/* =========================================================
   BUTTONS
   ========================================================= */

.offset-md {
    display: flex;
    justify-content: center;
    margin-top: 18px;
}

.btn {
    font-weight: normal !important; /* senin istediğin */
}

    .btn.btn-primary,
    .btn.btn-lg.btn-primary {
        background: #003B71;
        border-color: var(--gc-brand);
        border-radius: 14px;
        padding: 12px 22px;
        font-size: 15px;
        box-shadow: 0 10px 18px rgba(37, 99, 235, .18);
        transition: transform .06s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
    }

        .btn.btn-primary:hover,
        .btn.btn-lg.btn-primary:hover {
            background: #003B71;
            border-color: #003B71;
            box-shadow: 0 14px 22px rgba(37, 99, 235, .22);
        }

        .btn.btn-primary:active {
            transform: translateY(1px);
        }

/* =========================================================
   RESPONSIVE TWEAKS
   ========================================================= */

@media (max-width: 768px) {
    #message-form {
        padding-left: 12px;
        padding-right: 12px;
    }

        #message-form .left-content,
        #message-form .right-content {
            padding: 14px;
        }

    .card-header .btn {
        padding: 12px 14px;
        font-size: 14.5px;
    }

    .card-body {
        padding: 12px 14px 16px;
    }

    #message-form h5 {
        font-size: 21px;
        margin-top: 22px;
    }

    .table tbody tr td:first-child {
        width: 34px;
    }
}

@media (max-width: 480px) {
    .split-hero-left {
        padding: 22px 16px;
    }

    .breadcrumb {
        font-size: 13px;
    }

    .form-control,
    select.form-control,
    textarea.form-control {
        font-size: 14.5px;
        padding: 10px 11px;
    }

    .btn.btn-primary {
        width: 100%;
    }
}

/* =========================================================
   SMALL FIXES / QUALITY
   ========================================================= */

/* Remove the weird "container max-width:3000px" feeling in your inline <style> */
.container {
    max-width: 1200px;
}

/* If your theme defines .bg-default etc. keep it compatible */
.bg-default {
    background: var(--hr-surface) !important;
}

/* Images inside form */
#message-form img {
    border-radius: 10px;
}