/* assets/css/formlar.css: sitedeki formlar (form.php), İletişim ve Katıl sayfaları (includes/formlar.php) */

.fb-sayfa { max-width: 760px; }
.fb-sayfa.genis { max-width: none; }
.fb-sayfa h1 em { font-style: italic; color: var(--vurgu); }
.fb-giris { max-width: 62ch; color: var(--silik); font-size: 1.06rem; margin: 0 0 28px; }

/* Kartlar (İletişim / Katıl) */
.fb-kartlar { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 16px; margin: 8px 0 36px; }
.fb-kart { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: start; padding: 22px 22px 22px 20px; border-radius: var(--yaricap);
  background: var(--kart); border: 1px solid var(--cizgi); color: var(--yazi); text-decoration: none; box-shadow: var(--golge);
  transition: transform .25s var(--egri), border-color .2s, box-shadow .25s; }
.fb-kart:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--vurgu) 45%, var(--cizgi)); }
.fb-kart-simge { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--vurgu-acik); color: var(--vurgu); }
.fb-kart-simge svg { width: 23px; height: 23px; }
.fb-kart-ic { display: flex; flex-direction: column; gap: 4px; }
.fb-kart-ic b { font-family: var(--baslik-tipi); font-size: 1.28rem; font-weight: 600; line-height: 1.25; }
.fb-kart-ic span { color: var(--silik); font-size: 15px; line-height: 1.55; }
.fb-kart-ok { color: var(--vurgu); font-size: 1.3rem; transition: transform .25s var(--egri); }
.fb-kart:hover .fb-kart-ok { transform: translateX(4px); }
.fb-iletisim-alt { display: flex; flex-wrap: wrap; gap: 14px 40px; padding-top: 22px; border-top: 1px solid var(--cizgi); }
.fb-iletisim-alt p { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.fb-iletisim-alt .silik { font-size: 13px; }
.fb-iletisim-alt a { font-weight: 700; color: var(--vurgu); }
.fb-sosyal { display: flex; gap: 14px; flex-wrap: wrap; }

/* Form */
.fb-form { display: flex; flex-direction: column; gap: 22px; padding: 30px; background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--yaricap); box-shadow: var(--golge); }
.fb-alan { display: flex; flex-direction: column; gap: 7px; border: 0; padding: 0; margin: 0; min-width: 0; }
.fb-alan[hidden], .fb-bilgi[hidden] { display: none; }
.fb-alan > label, .fb-alan legend { font-weight: 700; font-size: 15.5px; padding: 0; }
.fb-alan legend { margin-bottom: 4px; }
.fb-etiket small { font-weight: 500; color: var(--silik); }
.fb-aciklama { color: var(--silik); font-size: 13.5px; margin-top: -3px; }
.fb-hata { color: var(--hata); font-weight: 600; font-size: 13.5px; }
.fb-alan.hatali input, .fb-alan.hatali select, .fb-alan.hatali textarea { border-color: var(--hata); }
.fb-secenekler { display: flex; flex-wrap: wrap; gap: 8px; }
.fb-secenek { position: relative; }
.fb-secenek input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fb-secenek span { display: inline-block; padding: 9px 15px; border: 1px solid var(--cizgi); border-radius: 999px; background: var(--zemin); font-size: 14.5px; font-weight: 500; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.fb-secenek input:checked + span { background: var(--vurgu); border-color: var(--vurgu); color: var(--zemin); }
.fb-secenek input:focus-visible + span { box-shadow: 0 0 0 4px color-mix(in srgb, var(--vurgu) 22%, transparent); }
.fb-onay { display: flex; gap: 10px; align-items: flex-start; font-weight: 500 !important; }
.fb-onay input { width: auto; margin-top: 4px; }
.fb-bilgi { padding: 14px 16px; border-radius: 12px; background: var(--vurgu-acik); color: var(--yazi); font-size: 14.5px; }
.fb-bilgi p { margin: 0; }
.fb-bilgi:not([data-kosul-alan]) { background: transparent; padding: 10px 0 0; border-top: 1px solid var(--cizgi); font-family: var(--baslik-tipi); font-size: 1.2rem; font-weight: 600; border-radius: 0; }
.fb-kvkk { color: var(--silik); font-size: 13.5px; margin: 0; }
.fb-gonder .dugme { min-width: 160px; }

/* Bitti */
.fb-bitti { text-align: center; padding: 44px 26px; background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--yaricap); box-shadow: var(--golge); }
.fb-bitti svg { width: 64px; height: 64px; fill: var(--ok-zemin); stroke: var(--ok); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.fb-bitti h2 { font-family: var(--baslik-tipi); margin: 10px 0 6px; }
.fb-bitti p { max-width: 52ch; margin: 0 auto 14px; color: var(--silik); }
.fb-takip b { font-family: var(--baslik-tipi); letter-spacing: .08em; color: var(--yazi); font-size: 1.15rem; }

@media (max-width: 600px) {
  .fb-form { padding: 20px 16px; }
  .fb-kart { padding: 18px 16px; gap: 12px; }
}

/* Kulüplerimiz (kulupler.php) ve etkinlikte ortak kulüp */
.kl-sayilar { font-size: 1.05rem; color: var(--silik); margin: 0 0 12px; }
.kl-sayilar b { font-family: var(--baslik-tipi); font-size: 1.6rem; color: var(--vurgu); font-weight: 600; }
.kl-harita { max-width: 920px; margin: 0 auto 36px; }
.kl-harita .il.d0 { fill: color-mix(in srgb, var(--cizgi) 70%, var(--zemin)); }
.kl-kartlar { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; margin-bottom: 36px; }
.kl-pkart { display: flex; gap: 16px; align-items: flex-start; padding: 20px; background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--yaricap); box-shadow: var(--golge); }
.kl-pkart h2 { font-size: 1.2rem; margin: 0 0 2px; }
.kl-pkart p { margin: 4px 0 0; font-size: 15px; }
.kl-pkart a { color: var(--vurgu); font-weight: 600; overflow-wrap: anywhere; }
.kl-plogo, .ek-ortak-logo { flex: none; width: 58px; height: 58px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--vurgu-acik); color: var(--vurgu);
  font-family: var(--baslik-tipi); font-size: 1.6rem; font-weight: 600; border: 1px solid var(--cizgi); }
.kl-plogo img, .ek-ortak-logo img { width: 100%; height: 100%; object-fit: cover; }
.kl-cagri { display: flex; gap: 16px 24px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 26px 28px; border-radius: var(--yaricap);
  background: var(--koyu-zemin); color: var(--koyu-yazi); }
.kl-cagri h2 { margin: 0 0 4px; color: inherit; }
.kl-cagri p { margin: 0; opacity: .85; max-width: 60ch; }
.kl-cagri .dugme { background: var(--koyu-yazi); color: var(--koyu-zemin); border-color: var(--koyu-yazi); }