/* Register Page Styles */

#register-page .register-right-side {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 40px;
    background: transparent;
    min-height: 100vh;
}

#register-page .register-form-container {
    width: 100%;
    max-width: 800px;
}

#register-page .field-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

#register-page .field-wrap .field-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #aaa;
    font-size: 0.95rem;
    pointer-events: none;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

#register-page .field-wrap input,
#register-page .field-wrap select {
    padding-left: 42px !important;
    border: 1.5px solid #e8e8e8 !important;
    border-radius: 10px !important;
    background: #fafafa !important;
    font-size: 0.95rem;
    transition: all 0.25s;
    height: 48px;
    width: 100%;
}

#register-page .field-wrap textarea {
    padding-left: 42px !important;
    border: 1.5px solid #e8e8e8 !important;
    border-radius: 10px !important;
    background: #fafafa !important;
    font-size: 0.95rem;
    transition: all 0.25s;
    font-family: inherit;
}

#register-page .field-wrap input:focus,
#register-page .field-wrap select:focus,
#register-page .field-wrap textarea:focus {
    border-color: #028e65 !important;
    background: #fff !important;
    box-shadow: 0 0 0 4px rgba(2, 142, 101, 0.08) !important;
    outline: none;
}

#register-page .account-type-card {
    border: 1.5px solid #e8e8e8;
    border-radius: 12px;
    padding: 14px 16px;
    cursor: pointer;
    transition: all 0.25s;
    background: #fafafa;
    display: flex;
    align-items: center;
    gap: 12px;
}

#register-page .account-type-card:hover {
    border-color: #cbd5e1;
}

#register-page .account-type-card:has(input:checked) {
    border-color: #028e65;
    background: #f0faf6;
    box-shadow: 0 2px 10px rgba(2, 142, 101, 0.12);
}

#register-page .card-icon-wrapper {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #eef1f0;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
    transition: all 0.25s;
}

#register-page .account-type-card:has(input:checked) .card-icon-wrapper {
    background: #028e65;
    color: #ffffff;
}

#register-page .card-content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

#register-page .card-title {
    font-weight: 700;
    color: #1e293b;
    font-size: 0.95rem;
}

#register-page .card-description {
    font-size: 0.8rem;
    color: #64748b;
    line-height: 1.3;
}

#register-page .upload-area {
    border: 1.5px dashed #d1d5db;
    border-radius: 10px;
    background: #fafafa;
    padding: 0 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.25s;
    height: 48px;
    position: relative;
}

#register-page .upload-area:hover {
    border-color: #028e65;
    background: #f0faf6;
}

#register-page .btn-register {
    background-color: #028e65;
    color: white;
    border: none;
    transition: all 0.3s;
    letter-spacing: 0.5px;
}

#register-page .btn-register:hover {
    background-color: #026b4d;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(2, 142, 101, 0.25);
    color: white;
}

@media (max-width: 991px) {
    #register-page .register-left-side {
        display: none !important;
    }

    #register-page .register-right-side {
        padding: 40px 20px;
    }

    #register-page .register-main-wrapper {
        margin: 15px !important;
        border-radius: 15px !important;
    }
}

#register-page .register-main-wrapper {
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}

#register-page.register-bg-overlay {
    background-color: #f8fafc;
}

/* ========== SELECT2 MULTIPLE CUSTOM STYLING ========== */

/* Select2 container wrapper */
#register-page .select2-container--default {
    width: 100% !important;
    font-size: 0.95rem;
}

/* Açılma durumunda yuvarlaklık */
#register-page .select2-container--default.select2-container--open .select2-selection--multiple {
    border-radius: 10px 10px 0 0 !important;
}

/* Multiple selection kutusu - birden fazla seçimde alta doğru büyür (satır kaymaz/kesilmez).
   Etiketler VE arama kutusu ayni flex-wrap satirinda tek grup olarak akar (bkz. .select2-selection__rendered
   altindaki display:contents notu) - boylece etiketler kendi satirina "sikismiyor". */
#register-page .select2-container--default .select2-selection--multiple {
    border: 1.5px solid #e8e8e8 !important;
    border-radius: 10px !important;
    min-height: 48px !important;
    padding: 7px 8px 7px 42px !important;
    background: #fafafa !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
}

/* Hover ve focus state'i */
#register-page .select2-container--default .select2-selection--multiple:hover {
    border-color: #ddd !important;
}

#register-page .select2-container--default .select2-selection--multiple:focus,
#register-page .select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: #028e65 !important;
    background: #fff !important;
    box-shadow: 0 0 0 4px rgba(2, 142, 101, 0.08) !important;
    outline: none !important;
}

/* Selection rendered alanı - bu sarmalayıcıyı layout'tan kaldırır (display:contents), böylece
   içindeki her etiket ve arama kutusu doğrudan üstteki .select2-selection--multiple'ın flex-wrap
   akışına katılır. Aksi halde etiketler ile arama kutusu iki ayrı iç içe flex kutusu olarak
   birbiriyle genişlik yarışına giriyor, bu da etiketlerin tek tek alt satıra düşmesine ve boşken
   placeholder'ın sağa kaymasına yol açıyordu. */
#register-page .select2-selection__rendered {
    display: contents !important;
}

/* Her seçilen öğe (Chip) - FLEX layout, çarpı butonu sağda */
#register-page .select2-selection__choice {
    display: inline-flex !important;
    align-items: center !important;
    padding: 4px 8px !important;
    margin: 0 !important;
    background-color: #e8f5e9 !important;
    border: 1px solid #028e65 !important;
    border-radius: 6px !important;
    white-space: nowrap !important;
    font-size: 0.85rem !important;
    color: #028e65 !important;
    flex-shrink: 0 !important;
    gap: 6px !important;
    position: relative !important;
}

/* Çip içinde yazı (label) */
#register-page .select2-selection__choice {
    font-weight: 500 !important;
}

#register-page button.select2-selection__choice__remove,
#register-page .select2-selection__choice__remove {
    display: none !important;
}

#register-page .select2-selection__choice__display {
    padding: 0 4px !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
}

/* Çarpı butonu hover state */
#register-page .select2-selection__choice__remove:hover {
    color: #016b4d !important;
    transform: scale(1.2) !important;
}

/* Arama input alanı - INLINE, FLEX */
#register-page .select2-search.select2-search--inline {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    flex: 0 1 auto !important;
    min-width: 80px !important;
}

/* Arama input field */
#register-page .select2-search__field {
    margin: 0 !important;
    height: auto !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    min-width: 60px !important;
    font-size: 0.95rem !important;
    color: #333 !important;
    font-family: inherit !important;
    line-height: inherit !important;
}

#register-page .select2-search__field::placeholder {
    color: #999 !important;
}

#register-page .select2-search__field:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* ========== DROPDOWN MENU STYLING ========== */

/* Açılır dropdown menü */
#register-page .select2-container--default .select2-dropdown {
    border: 1.5px solid #e8e8e8 !important;
    border-radius: 0 0 10px 10px !important;
    background: white !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    margin-top: -2px !important;
}

#register-page .select2-container--default .select2-dropdown--above {
    border-radius: 10px 10px 0 0 !important;
    margin-top: 2px !important;
}

/* Dropdown içindeki sonuçlar liste */
#register-page .select2-container--default .select2-results__options {
    max-height: 200px !important;
    overflow-y: auto !important;
}

/* Her bir sonuç öğesi */
#register-page .select2-container--default .select2-results__option {
    padding: 10px 12px !important;
    font-size: 0.95rem !important;
    color: #333 !important;
}

#register-page .select2-container--default .select2-results__option:hover {
    background-color: #f0faf6 !important;
    color: #028e65 !important;
}

#register-page .select2-container--default .select2-results__option--highlighted {
    background-color: #028e65 !important;
    color: white !important;
}

#register-page .select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #e8f5e9 !important;
    color: #028e65 !important;
}

/* ========== SINGLE SELECT COMPATIBILITY ========== */

#register-page .select2-container--default .select2-selection--single {
    border: 1.5px solid #e8e8e8 !important;
    border-radius: 10px !important;
    height: 48px !important;
    padding: 0 12px 0 42px !important;
    background: #fafafa !important;
    display: flex !important;
    align-items: center !important;
}

#register-page .select2-container--default .select2-selection--single:focus {
    border-color: #028e65 !important;
    background: #fff !important;
    box-shadow: 0 0 0 4px rgba(2, 142, 101, 0.08) !important;
}

#register-page .select2-selection__arrow {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

#register-page .select2-selection__arrow b {
    border-color: #028e65 transparent transparent transparent !important;
}



/* ========== FIELD-WRAP LAYOUT FIX ========== */

#register-page .field-wrap {
    position: relative !important;
    display: block !important;
}

/* Select2 container'ı field-wrap içinde doğru konumlandırma */
#register-page .field-wrap .select2-container {
    position: relative !important;
    width: 100% !important;
    display: block !important;
}

#register-page .field-wrap + .select2-container {
    position: relative !important;
    width: 100% !important;
    display: block !important;
}

/* Select2'nin açılı halinde z-index fix */
#register-page .select2-container--open {
    z-index: 100 !important;
}

/* İkon her zaman görünür kalsın - Select2 açıldığında kendi kapsayıcısına 100 z-index veriyor,
   ikon bundan düşük kalırsa (öncesinde 3'tü) alan odaklanınca/seçim yapılırken ikon açılan
   kutunun arkasında kalıp görünmez oluyordu. */
#register-page .field-wrap > .field-icon {
    z-index: 101 !important;
}

/* Input ve Select'in doğru padding'i */
#register-page .field-wrap > input,
#register-page .field-wrap > select,
#register-page .field-wrap > textarea {
    padding-left: 42px !important;
}

/* Select2 seçim kutusu icon'un önüne gelmemesi için */
#register-page .select2-container--default .select2-selection--single {
    padding-left: 42px !important;
    position: relative !important;
    z-index: 2 !important;
}

/* Textarea içindeki ikonun ilk satıra göre hizalanması */
#register-page .field-wrap:has(textarea) .field-icon {
    top: 16px !important;
    transform: none !important;
}

/* Sektör (çoklu seçim) kutusu birden fazla satıra taştığında ikon üstte sabit kalsın */
#register-page .field-wrap:has(.js-example-basic-multiple) .field-icon {
    top: 16px !important;
    transform: none !important;
}

/* Göz (şifre göster/gizle) ikonu konumlandırması */
#register-page .field-wrap .toggle-password {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #aaa;
    cursor: pointer;
    z-index: 4;
    transition: color 0.2s;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}

#register-page .field-wrap .toggle-password:hover {
    color: #333;
}

#register-page .field-wrap:has(.toggle-password) input {
    padding-right: 42px !important;
}

/* Harita Arama Sonuç Listesi */
#register-page .map-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #fff !important;
    border: 1.5px solid #e8e8e8 !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
    z-index: 1000 !important;
    max-height: 220px !important;
    overflow-y: auto !important;
    display: none;
    margin-top: 6px;
    padding: 6px 0 !important;
}

#register-page .map-search-results.active {
    display: block !important;
}

#register-page .map-search-result-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    padding: 12px 16px !important;
    cursor: pointer !important;
    border-bottom: 1px solid #f1f5f9 !important;
    transition: all 0.2s ease !important;
    text-align: left !important;
}

#register-page .map-search-result-item:last-child {
    border-bottom: none !important;
}

#register-page .map-search-result-item strong {
    font-size: 0.9rem !important;
    color: #334155 !important;
    font-weight: 600 !important;
    display: block !important;
    line-height: 1.3 !important;
}

#register-page .map-search-result-item small {
    font-size: 0.75rem !important;
    color: #64748b !important;
    display: block !important;
    line-height: 1.4 !important;
    white-space: normal !important;
    word-break: break-word !important;
}

#register-page .map-search-result-item:hover {
    background: #f1f8f5 !important;
}

#register-page .map-search-result-item:hover strong {
    color: #028e65 !important;
}

/* Select2 Multiple Search Field (Sektörleri Seçin) Reset */
#register-page .select2-container--default .select2-search--inline,
#register-page .select2-selection--multiple > span {
    flex-grow: 1 !important;
    display: inline-flex !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
}

#register-page .select2-container--default .select2-search--inline .select2-search__field,
#register-page .select2-container--default .select2-selection--multiple .select2-search__field,
#register-page .select2-container--default .select2-selection--multiple textarea.select2-search__field {
    border: none !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0 !important;
    margin: 0 !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    width: 100% !important;
    min-width: 120px !important;
    text-align: left !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    resize: none !important;
    line-height: 32px !important;
}

/* Select2 Multiple Placeholder'ı Sola Yaslama ve Sabitleme */
#register-page .select2-container--default .select2-selection--multiple .select2-selection__placeholder {
    position: absolute !important;
    left: 42px !important; /* Gri etiket ikonunun hemen sağı */
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #aaa !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
    font-size: 0.95rem !important;
    z-index: 1 !important;
    display: block !important;
    line-height: 1 !important;
}