/* ============================================================================
   ÇARŞIBAŞI BELEDİYESPOR — Üyelik Başvuru Formu
   Bu dosya YALNIZ belediyespor-basvuru.asp tarafından kullanılır.
   Css/turnuva-forms-modern.css (4 turnuva formunun ortak dosyası) YÜKLENMEZ;
   bu yüzden burada gereken her şey kendi kendine yeter (bootstrap + font-awesome hariç).

   Palet: lacivert #0d1b3e · mavi #c8102e · altın #c8102e
          zemin #fff6f6→#e8f0fc · kart #fff · metin #0d1b3e / #5a6478
   Not: Js/belediyespor-forms.js'in ürettiği sınıflar (.file-item, .alert*,
        .bs-basarili ailesi, .error-message, .kopyalandi) burada TANIMLI olmak
        zorunda — JS'e dokunulmadan görünüm değişebilsin diye sözleşme korunur.
   ========================================================================= */

/* ---------- Temel ---------- */
/* Bu sayfa bootstrap YÜKLEMİYOR (standalone + hafif kalsın diye). Bootstrap'in
   sağladığı border-box ve img/temel sıfırlamalar bu yüzden burada tanımlanır —
   aksi hâlde width:100% + padding olan alanlar kapsayıcıyı taşırır. */
*,*::before,*::after{box-sizing:border-box}
img{max-width:100%;height:auto}
button,input,textarea,select{font-family:inherit;font-size:inherit}
h1,h2,h3,p,dl,dd{margin:0}
.bsf-page{
    background:linear-gradient(160deg,#f6f7fa 0%,#eef0f5 55%,#e9ecf2 100%);
    color:#0d1b3e;
    font-family:"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    min-height:100vh;
    margin:0;
    position:relative;
    overflow-x:hidden;
}
/* Dekor: çok soluk saha çizgisi + diyagonal desen. Okunabilirliğe katkısı
   olmayan hiçbir öğe eklenmedi; mobilde tamamen kapatılır. */
.bsf-page:before{
    content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
    background:
        repeating-linear-gradient(115deg,rgba(13,27,62,.03) 0 1px,transparent 1px 62px),
        radial-gradient(circle at 12% 42%,rgba(200,16,46,.035) 0 240px,transparent 241px),
        radial-gradient(circle at 88% 8%,rgba(13,27,62,.035) 0 200px,transparent 201px);
}
.bsf-page>*{position:relative;z-index:1}

/* ---------- Üst şerit ---------- */
.bsf-ust{background:#fff;color:#0d1b3e;padding:11px 0;border-bottom:3px solid #c8102e;box-shadow:0 2px 10px rgba(13,27,62,.06)}
.bsf-ust .bsf-in{display:flex;align-items:center;gap:14px}
.bsf-ust img{height:38px;width:auto;flex:0 0 auto}
.bsf-kurum{font-size:15px;font-weight:700;letter-spacing:.3px;line-height:1.25}
.bsf-kurum small{display:block;font-size:11px;font-weight:400;color:#6b7a94;letter-spacing:1.4px;text-transform:uppercase}
.bsf-ust .bsf-anasayfa{
    margin-left:auto;color:#fff;background:#c8102e;text-decoration:none;font-size:13px;font-weight:700;
    padding:8px 16px;border:1px solid #c8102e;border-radius:7px;transition:all .18s ease;
}
.bsf-ust .bsf-anasayfa:hover,.bsf-ust .bsf-anasayfa:focus{background:#9e0b22;border-color:#9e0b22;color:#fff;text-decoration:none}

/* ---------- Breadcrumb ---------- */
.bsf-yol{padding:14px 0 6px;font-size:13px;color:#5f6f8c}
.bsf-yol a{color:#c8102e;text-decoration:none}
.bsf-yol a:hover{text-decoration:underline}
.bsf-yol span{color:#7e8ca6;margin:0 7px}
.bsf-yol b{color:#0d1b3e;font-weight:600}

/* ---------- Kabuk ---------- */
.bsf-in{max-width:1160px;margin:0 auto;padding:0 18px}
.bsf-panel{background:#fff;border-radius:16px;box-shadow:0 10px 40px rgba(13,27,62,.09);
           padding:30px 32px 34px;margin-bottom:26px}

/* ---------- KVKK metni (belediyespor-kvkk.asp, CMS içeriği) ---------- */
.bsf-metin{color:#2b3a55;font-size:15px;line-height:1.75;max-width:900px}
.bsf-metin p{margin:0 0 14px}
.bsf-metin strong,.bsf-metin b{color:#0d1b3e}
.bsf-metin h1,.bsf-metin h2,.bsf-metin h3,.bsf-metin h4{color:#0d1b3e;margin:22px 0 10px;line-height:1.3}
.bsf-metin h2{font-size:20px}.bsf-metin h3{font-size:17px}.bsf-metin h4{font-size:15.5px}
.bsf-metin ul,.bsf-metin ol{margin:0 0 14px 22px;padding:0}
.bsf-metin li{margin-bottom:6px}
.bsf-metin a{color:#c8102e;text-decoration:underline}
.bsf-metin img{max-width:100%;height:auto}
.bsf-metin table{max-width:100%;border-collapse:collapse}
.bsf-metin td,.bsf-metin th{border:1px solid #f6c7cc;padding:6px 10px}
.bsf-metin span[style*="text-align"]{display:block}

/* ---------- Başlık bloğu ---------- */
.bsf-baslik{position:relative;overflow:hidden;display:flex;align-items:center;gap:24px;
            padding:26px 28px;margin:-8px -10px 26px;border-radius:13px;
            background:linear-gradient(104deg,#fff 0 60%,#e5202f 60%,#b30f26 100%)}
/* gorsel varsa (yonetim > Basvuru Formu Baslik Gorseli): sagda, uzerine beyaz->seffaf maske */
.bsf-baslik-gorselli{background-size:cover;background-position:right center;background-repeat:no-repeat;background-color:#fff}
.bsf-baslik-gorselli:before{content:"";position:absolute;inset:0;pointer-events:none;
            background:linear-gradient(100deg,#fff 0 52%,rgba(255,255,255,.94) 61%,rgba(255,255,255,0) 74%)}
.bsf-baslik>*{position:relative;z-index:1}
.bsf-arma{flex:0 0 auto;line-height:0}
.bsf-arma img{height:110px;width:auto;filter:drop-shadow(0 4px 10px rgba(0,0,0,.18))}
.bsf-baslik-metin{flex:1 1 auto;min-width:0;max-width:600px;border-left:3px solid #c8102e;padding-left:22px}
.bsf-baslik-metin h1 em{color:#c8102e;font-style:italic}
.bsf-etiket{color:#c8102e;font-size:12px;font-weight:700;letter-spacing:2.6px;text-transform:uppercase}
.bsf-baslik-metin h1{color:#0d1b3e;font-size:31px;font-weight:800;margin:5px 0 7px;line-height:1.15}
.bsf-baslik-metin p{color:#6b7a94;font-size:14.5px;margin:0 0 15px}
.bsf-rozetler{display:flex;flex-wrap:wrap;gap:10px}
.bsf-rozet{display:inline-flex;align-items:center;gap:8px;padding:8px 15px;border-radius:8px;
           font-size:13px;font-weight:600;background:#fff;color:#9e0b22;border:1px solid #f0b7be}
.bsf-rozet.koyu{background:#c8102e;color:#fff;border-color:#c8102e}
.bsf-rozet .fa{opacity:.85}

/* ---------- Adım şeridi ---------- */
.bsf-adimlar{display:flex;gap:10px;flex-wrap:wrap;list-style:none;margin:0 0 20px;padding:0}
.bsf-adimlar li{display:inline-flex;align-items:center;gap:9px;padding:7px 14px 7px 7px;border-radius:999px;
                background:#fff;border:1px solid #e3e7ef;color:#3d4c67;font-size:13px;font-weight:600}
.bsf-adimlar li b{width:24px;height:24px;line-height:24px;border-radius:50%;text-align:center;background:#c8102e;color:#fff;font-size:12px}

/* ---------- Bölüm kartları ---------- */
.form-section{background:#fff;border:1px solid #e3e7ef;border-radius:13px;
              padding:22px 24px 24px;margin-bottom:18px}
.form-section h3{display:flex;align-items:center;gap:11px;color:#0d1b3e;font-size:19px;font-weight:700;
                 margin:0 0 20px;padding:0;flex-wrap:wrap}
.form-section h3 .fa{width:34px;height:34px;line-height:34px;text-align:center;border-radius:9px;
                     background:#fff1f2;color:#c8102e;font-size:16px;flex:0 0 auto}

/* ---------- Alanlar ---------- */
.bsf-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.form-group{margin:0}
.form-group label{display:block;color:#3d4c67;font-size:13.5px;font-weight:600;margin-bottom:7px}
.required{color:#c0392b}
.bsf-input{position:relative}
.bsf-input .fa{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:#9aa3b5;font-size:15px;pointer-events:none}
.form-control{
    width:100%;height:46px;padding:10px 14px 10px 40px;
    border:1px solid #d5dae4;border-radius:9px;background:#fff;
    color:#0d1b3e;font-size:14.5px;font-family:inherit;
    transition:border-color .16s ease,box-shadow .16s ease;box-shadow:none;
}
.form-control::placeholder{color:#65728a}
.form-control:focus{outline:none;border-color:#c8102e;box-shadow:0 0 0 3px rgba(200,16,46,.11)}
.form-control.error{border-color:#c0392b;box-shadow:0 0 0 3px rgba(192,57,43,.09)}
/* select: native ok kaldırılır, sağa kendi oku çizilir; yükseklik input ile aynı */
select.form-control{-webkit-appearance:none;appearance:none;padding-right:38px;cursor:pointer;
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235f6f8c' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 14px center}
select.form-control:invalid,select.form-control option[value=""]{color:#65728a}
select.form-control option{color:#0d1b3e}
/* textarea: çok satırlı; ikon üstte hizalanır */
textarea.form-control{height:auto;min-height:92px;padding-top:12px;line-height:1.5;resize:vertical;display:block}
.bsf-input-uzun .fa{top:16px;transform:none}
.bsf-tam{grid-column:1/-1}
.bsf-grid>*,.bsf-input{min-width:0}
/* Doğum tarihi (flatpickr): hata durumunda görünen alt input kırmızı çerçeve alır */
.bsf-input.error .form-control{border-color:#c0392b;box-shadow:0 0 0 3px rgba(192,57,43,.09)}
/* flatpickr takvimi — kulüp teması (kırmızı), sayfanın yazı tipi. Kap içinde açılır. */
.bsf-input .flatpickr-calendar{z-index:60;top:calc(100% + 6px)!important;left:0!important}
.flatpickr-calendar{font-family:inherit;border-radius:12px;border:1px solid #e3e7ef;box-shadow:0 12px 36px rgba(13,27,62,.16)}
.flatpickr-calendar.arrowTop:before,.flatpickr-calendar.arrowTop:after{border-bottom-color:#e3e7ef}
.flatpickr-months .flatpickr-month,.flatpickr-current-month .flatpickr-monthDropdown-months{color:#0d1b3e;font-weight:700}
.flatpickr-current-month input.cur-year{font-weight:700;color:#0d1b3e}
.flatpickr-months .flatpickr-prev-month:hover svg,.flatpickr-months .flatpickr-next-month:hover svg{fill:#c8102e}
span.flatpickr-weekday{color:#6b7a94;font-weight:700}
.flatpickr-day{color:#0d1b3e;border-radius:8px}
.flatpickr-day:hover,.flatpickr-day.prevMonthDay:hover,.flatpickr-day.nextMonthDay:hover{background:#fff1f2;border-color:#fff1f2;color:#c8102e}
.flatpickr-day.today{border-color:#c8102e;color:#c8102e;font-weight:700}
.flatpickr-day.today:hover{background:#c8102e;color:#fff}
.flatpickr-day.selected,.flatpickr-day.selected:hover,.flatpickr-day.selected:focus{background:#c8102e;border-color:#c8102e;color:#fff}
.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover{color:#c5cbd6}
.error-message{color:#c0392b;font-size:12.5px;margin-top:6px;font-weight:600}
.file-upload-area.error{border-color:#c0392b;background:#fff6f5}
.bsf-zorunlu-not{margin:-8px 0 14px;font-size:12.5px;color:#5f6f8c}
.bsf-zorunlu-not .required{color:#c0392b;font-weight:700}

/* ---------- Ödeme bilgileri ---------- */
.bsf-ikili{display:grid;grid-template-columns:1.35fr 1fr;gap:16px;align-items:stretch}
.bsf-iban{background:#fff7f8;border:1px solid #f3d3d7;border-radius:11px;padding:18px 20px}
.bsf-iban-ust{display:flex;align-items:center;gap:13px;margin-bottom:13px}
.bsf-iban-ust .fa{flex:0 0 auto;width:40px;height:40px;line-height:40px;text-align:center;border-radius:10px;background:#c8102e;color:#fff;font-size:18px}
.bsf-iban-alici{display:block;font-size:11.5px;letter-spacing:1.4px;text-transform:uppercase;color:#9e0b22;font-weight:700}
.bsf-iban-ust b{display:block;color:#0d1b3e;font-size:15.5px;font-weight:700}
.bsf-iban-no{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #f0b7be;border-radius:9px;padding:6px 6px 6px 16px}
.bsf-iban-no code{flex:1 1 auto;min-width:0;font-family:"Consolas","Courier New",monospace;font-size:16.5px;font-weight:700;letter-spacing:.6px;color:#0d1b3e;word-break:break-all}
.bsf-iban-not{margin-top:12px;font-size:13.5px;color:#5a6b88}
.bsf-iban-not b{color:#c8102e}
.iban-kopya{
    margin:0;display:inline-flex;align-items:center;gap:8px;padding:9px 15px;flex:0 0 auto;white-space:nowrap;
    background:#fff;color:#c8102e;border:1px solid #f0b7be;border-radius:8px;
    font-size:13.5px;font-weight:700;cursor:pointer;transition:all .16s ease;font-family:inherit;
}
.iban-kopya:hover{background:#c8102e;color:#fff;border-color:#c8102e}
.iban-kopya.kopyalandi{background:#1e7d45;color:#fff;border-color:#1e7d45}

/* Bilgi kutusu (ödeme + dekont yanında) */
.bsf-bilgi{display:flex;align-items:center;gap:13px;background:#fff5f6;border:1px solid #e3e7ef;border-radius:11px;padding:17px 18px}
.bsf-bilgi .fa{flex:0 0 auto;width:30px;height:30px;line-height:30px;text-align:center;border-radius:50%;
               background:#c8102e;color:#fff;font-size:15px}
.bsf-bilgi p{margin:0;color:#5a6b88;font-size:13.5px;line-height:1.62}

/* ---------- Dekont yükleme ---------- */
.file-upload-area{
    position:relative;
    border:2px dashed #cfd5e1;border-radius:11px;background:#fff;
    padding:30px 20px;text-align:center;cursor:pointer;transition:all .18s ease;
}
.file-upload-area:hover{border-color:#c8102e;background:#fff8f8}
/* Klavye: gizli input odak alınca alan halkalanır (display:none olsaydı odaklanamazdı) */
.file-upload-area:focus-within{border-color:#c8102e;background:#fff8f8;box-shadow:0 0 0 3px rgba(200,16,46,.25)}
.bsf-gizli{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.file-upload-area label.dosya-sec{display:inline;margin:0;font:inherit;font-weight:700;color:#c8102e;text-decoration:underline;cursor:pointer}
.file-upload-area.suruklu{border-color:#c8102e;background:#fff1f2;border-style:solid}
.file-upload-area .yukle-ikon{font-size:34px;color:#c8102e;margin-bottom:12px;display:block}
.file-upload-area p{margin:0 0 6px;color:#3d4c67;font-size:14.5px}
.file-upload-area .dosya-sec{color:#c8102e;font-weight:700;text-decoration:underline;cursor:pointer}
.file-upload-area small{display:block;color:#5f6f8c;font-size:12.5px}

.file-list{margin-top:12px}
.file-item{display:flex;align-items:center;gap:10px;background:#eef7f0;border:1px solid #cfe6d6;
           border-radius:9px;padding:11px 14px;color:#1e7d45;font-size:13.5px;font-weight:600}
.file-item.error{background:#fdecea;border-color:#f3c9c4;color:#c0392b}
.file-item .file-size{color:#7e8ca6;font-weight:400}
.file-item .file-remove{margin-left:auto;background:none;border:none;color:#c0392b;cursor:pointer;
                        font-size:15px;padding:2px 6px;line-height:1}

/* ---------- Onaylar ---------- */
.bsf-onay{display:flex;align-items:flex-start;gap:11px;margin-bottom:20px}
.bsf-onay input[type=checkbox]{width:19px;height:19px;margin:1px 0 0;flex:0 0 auto;cursor:pointer;accent-color:#c8102e}
.bsf-onay label{margin:0;color:#3d4c67;font-size:14.5px;font-weight:400;line-height:1.55;cursor:pointer}
.bsf-onay a{color:#c8102e;font-weight:700;text-decoration:underline}
.bsf-onay a:hover{color:#0d1b3e}
.bsf-captcha{display:flex;justify-content:center;margin-bottom:20px}

/* ---------- Gönder butonu ---------- */
.btn-submit{
    display:block;width:100%;padding:16px 24px;border:none;border-radius:11px;
    background:linear-gradient(135deg,#d9142f 0%,#b30f26 100%);color:#fff;
    font-size:16.5px;font-weight:800;font-family:inherit;cursor:pointer;
    transition:all .18s ease;box-shadow:0 5px 16px rgba(200,16,46,.32);
}
.btn-submit:hover:not(:disabled){background:linear-gradient(135deg,#e5202f 0%,#c8102e 100%);
                                 box-shadow:0 7px 20px rgba(200,16,46,.42)}
.btn-submit:disabled{opacity:.62;cursor:not-allowed;box-shadow:none}
.btn-submit .fa{margin-right:8px}

/* ---------- Uyarı kutuları (JS üretir) ---------- */
#alertContainer{margin-bottom:18px}
.alert{border-radius:10px;padding:15px 18px;font-size:14.5px;border:1px solid transparent;position:relative}
.alert .close{position:absolute;right:13px;top:11px;background:none;border:none;font-size:20px;
              line-height:1;opacity:.5;cursor:pointer;color:inherit}
.alert .close:hover{opacity:1}
.alert-danger{background:#fdecea;border-color:#f3c9c4;color:#a5281b}
.alert-success{background:#eef7f0;border-color:#cfe6d6;color:#1e7d45}
.alert-info{background:#eef3fc;border-color:#dbe5f5;color:#22437e}
.alert-warning{background:#fdf6e3;border-color:#f2e2b5;color:#8a6400}

/* ---------- Başarı ekranı (JS üretir — sınıf adları sabit) ---------- */
.bs-basarili{text-align:center;padding:34px 24px}
.bs-basarili .bs-tik{font-size:60px;color:#1e7d45;margin-bottom:16px}
.bs-basarili h2{color:#0d1b3e;font-size:25px;font-weight:800;margin:0 0 8px}
.bs-basarili p{color:#6b7a94;font-size:15px;margin:0 auto;max-width:520px;line-height:1.55}
.bs-basarili .bs-butonlar{display:flex;gap:11px;justify-content:center;flex-wrap:wrap;margin-top:26px}

/* ---------- Başvuru kapalı ---------- */
.bs-kapali{text-align:center;padding:44px 26px}
.bs-kapali>.fa{font-size:54px;color:#c8102e;margin-bottom:18px}
.bs-kapali h2{color:#0d1b3e;font-size:25px;font-weight:800;margin:0 0 11px}
.bs-kapali p{color:#6b7a94;font-size:15px;line-height:1.65;margin:0 0 24px}

/* ---------- Yardımcı buton (Yazdır / Ana Sayfa) ---------- */
.btn-download{display:inline-flex;align-items:center;gap:8px;padding:11px 21px;border-radius:9px;
              background:#c8102e;color:#fff;border:none;font-size:14px;font-weight:700;
              text-decoration:none;cursor:pointer;font-family:inherit;transition:background .16s ease}
.btn-download:hover,.btn-download:focus{background:#9e0b22;color:#fff;text-decoration:none}

.bsf-alt{background:linear-gradient(90deg,#9e0b22,#c8102e);color:#fbdfe3;padding:18px 0;font-size:13px}
.bsf-alt .bsf-in{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
.bsf-alt b{color:#fff;font-weight:700}

/* ============================ RESPONSIVE ============================ */
@media(max-width:1199px){
    .bsf-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:991px){
    .bsf-panel{padding:26px 22px 28px}
    .bsf-ikili{grid-template-columns:1fr}
    .bsf-uzun{display:none}
    .bsf-iban-no{flex-wrap:wrap;padding:10px 12px}
    .bsf-iban-no code{font-size:15px}
    .bsf-iban-no .iban-kopya{flex:1 1 100%;justify-content:center}
    /* Mobil: diyagonal yerine altta ince kırmızı şerit; içerik uzunluğundan bağımsız */
    .bsf-baslik{flex-direction:column;align-items:flex-start;margin:-6px -6px 22px;padding:22px 20px 30px;
                background:linear-gradient(180deg,#fff 0 calc(100% - 14px),#c8102e calc(100% - 14px),#b30f26 100%)}
    .bsf-baslik-gorselli:before{background:linear-gradient(180deg,#fff 0 calc(100% - 60px),rgba(255,255,255,.92) calc(100% - 30px),rgba(255,255,255,.6) 100%)}
    .bsf-baslik-metin{max-width:none}
    .bsf-arma img{height:72px}
    .bsf-baslik-metin h1{font-size:27px}
    .bsf-arma img{height:88px}
}
@media(max-width:767px){
    /* Dekor mobilde tamamen kapanır — okunabilirlik önceliklidir */
    .bsf-page:before{display:none}
    .bsf-in{padding:0 13px}
    .bsf-panel{padding:20px 16px 24px;border-radius:13px}
    .bsf-baslik{flex-direction:column;align-items:center;text-align:center;gap:16px}
    .bsf-baslik-metin{border-left:none;padding-left:0}
    .bsf-baslik-metin h1{font-size:23px}
    .bsf-rozetler{justify-content:center}
    .bsf-rozet{font-size:12.5px;padding:7px 13px}
    .bsf-grid{grid-template-columns:1fr;gap:14px}
    /* Telefon + doğum tarihi mobilde yan yana (mockup mobil karesi) */
    .bsf-grid .bsf-yarim{grid-column:span 1}
    .bsf-ikili-mobil{display:grid;grid-template-columns:1fr 1fr;gap:12px}
    .form-section{padding:18px 15px 20px}
    .form-section h3{font-size:17px;margin-bottom:16px}
    .bsf-alt .bsf-in{justify-content:center;text-align:center}
    .bsf-ust .bsf-anasayfa{padding:6px 11px;font-size:12px}
    .bsf-kurum{font-size:14px}
    .btn-submit{font-size:15.5px;padding:15px 18px}
}
@media(max-width:400px){
    .bsf-ikili-mobil{grid-template-columns:1fr}
    .bsf-iban dd{font-size:13.5px}
}

@media print{
    .bsf-ust,.bsf-yol,.bsf-alt,.bs-butonlar{display:none !important}
    .bsf-page{background:#fff}
    .bsf-page:before{display:none}
    .bsf-panel{box-shadow:none}
}