/* ==========================================================================
   Public başvuru formu — sayfa düzeni.
   Input component'leri components.css'ten gelir (Apple Form Template).
   ========================================================================== */
:root{ --accent:#0071e3; --field-bg:#ffffff; --radius:12px; }
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:#f5f5f7;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:#1d1d1f;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

/* ---- buttons ---- */
.btn{font-family:inherit;font-size:16px;font-weight:500;letter-spacing:-0.01em;padding:12px 24px;
  border-radius:var(--radius);border:none;cursor:pointer;transition:.18s ease}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{filter:brightness(1.06)}
.btn-primary:active{transform:scale(.985)}
.btn-secondary{background:#e8e8ed;color:#1d1d1f}
.btn-secondary:hover{background:#dedee3}

/* ---- layout ---- */
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#86868b}
.sec-label{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#86868b;margin:0 2px 2px}
.hair{height:1px;background:#e4e4e9;border:none;margin:0}
.form-page{min-height:100vh;padding:64px 20px 96px;display:flex;flex-direction:column;align-items:center}
.form-head{width:100%;max-width:900px;margin-bottom:22px}
.form-head h1{font-size:28px;font-weight:640;letter-spacing:-0.03em;margin:7px 0 5px;line-height:1.12}
.form-head p{font-size:15px;line-height:1.5;color:#6e6e73;margin:0;letter-spacing:-0.01em}
.form-card{width:100%;max-width:900px;background:#fff;border-radius:20px;
  box-shadow:0 1px 3px rgba(0,0,0,.04),0 12px 40px -18px rgba(0,0,0,.18);padding:32px 30px;
  display:flex;flex-direction:column;gap:26px}
/* Bölüm alanları: kısa alanlar 2'li ızgara, uzun alanlar (textarea/list/dosya/başlık) tam genişlik */
.form-section{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px;align-items:start}
.form-section .sec-label{grid-column:1/-1}
.form-section .ff-full{grid-column:1/-1}
@media (max-width:640px){ .form-section{grid-template-columns:1fr} }
.field-desc{font-size:15px;line-height:1.5;color:#3a3a3c;margin:0}
.form-err{background:color-mix(in srgb,#ff3b30 8%,#fff);color:#d13b30;font-size:14px;font-weight:500;
  border:1px solid color-mix(in srgb,#ff3b30 22%,#fff);border-radius:12px;padding:12px 15px}
.preview-banner{background:color-mix(in srgb,#ff9f0a 16%,#fff);color:#a5620a;font-size:13.5px;font-weight:550;
  border:1px solid color-mix(in srgb,#ff9f0a 30%,#fff);border-radius:12px;padding:10px 14px;margin-bottom:14px}
.btn[disabled]{opacity:.5;cursor:default}
.btn[disabled]:hover{filter:none}
.hidden{display:none !important}

/* Başlık (heading) ve Metin (paragraph) blokları — girdi değil, gösterim */
.ff-heading{grid-column:1/-1;margin:4px 0 2px}
.ff-h-title{font-size:16px;font-weight:640;letter-spacing:-0.01em;color:#1d1d1f}
.ff-h-desc{margin:7px 0 0}
.ff-para{grid-column:1/-1}
.ff-para .ff-p-lead{font-size:14px;font-weight:600;color:#1d1d1f;margin-bottom:5px}
/* Zengin içerik: paragraf + madde imli liste (Word içeriği birebir) */
.ff-h-desc .ff-rt-p,.ff-para .ff-rt-p{font-size:14px;line-height:1.6;color:#86868b;margin:0 0 9px;white-space:normal}
.ff-h-desc .ff-rt-p:last-child,.ff-para .ff-rt-p:last-child{margin-bottom:0}
.ff-ul{margin:7px 0 10px;padding-left:19px;display:flex;flex-direction:column;gap:6px}
.ff-ul:last-child{margin-bottom:0}
.ff-ul li{font-size:14px;line-height:1.55;color:#48484a}
.ff-ul li::marker{color:var(--accent,#0071e3)}

/* Resmi vakıf başlığı (word belgesindeki üst başlık) */
.form-org{font-size:13px;font-weight:600;letter-spacing:.01em;color:#6e6e73;margin-bottom:14px;line-height:1.4;max-width:560px}

/* Alan etiketi (ALT seviye) — açık gri, normal harf */
.field-label{display:block;font-size:13.5px;font-weight:550;color:#6e6e73;letter-spacing:-0.01em;margin:0 2px 9px}
.field-label .req{color:#ff3b30;margin-left:2px}
/* Telefon: ülke kodu seçici + maskeli numara (tek input görünümü) */
.ff-phone{position:relative}
.ff-phone .pb-label{position:absolute;left:15px;top:7px;font-size:11.5px;color:#86868b;z-index:2;
  letter-spacing:0;pointer-events:none;transition:color .18s ease}
.ff-phone .pb-label .req{color:#ff3b30;margin-left:2px}
.ff-phone:focus-within .pb-label{color:var(--accent,#0071e3)}
.phone-box{display:flex;align-items:stretch;background:var(--field-bg,#fff);border:1px solid #d2d2d7;
  border-radius:var(--radius,10px);transition:border-color .2s ease}
.phone-box:hover{border-color:#b0b0b8}
.ff-phone:focus-within .phone-box{border-color:var(--accent,#0071e3)}
.phone-box .pc-trigger{display:flex;align-items:center;gap:5px;border:none;background:none;outline:none;
  font-family:inherit;font-size:15px;color:#1d1d1f;padding:24px 2px 7px 14px;cursor:pointer;flex:none;
  letter-spacing:-0.01em;white-space:nowrap}
.phone-box .pc-trigger svg{color:#86868b;flex:none}
.pc-panel{width:300px;right:auto;padding-top:0;max-height:none;overflow:visible}
.pc-search{width:100%;border:none;border-bottom:1px solid #ececf1;background:none;outline:none;
  font-family:inherit;font-size:14.5px;letter-spacing:-0.01em;color:#1d1d1f;padding:11px 12px;margin-bottom:5px}
.pc-search::placeholder{color:#b8b8bd}
.pc-opts{max-height:216px;overflow-y:auto}
.pc-panel .combo-opt{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14.5px}
.pc-cc{color:#86868b;font-variant-numeric:tabular-nums;flex:none}
.phone-box .pc-sep{width:1px;background:#e4e4e9;margin:9px 9px 9px 7px;flex:none}
.phone-box .pc-num{border:none;background:none;outline:none;flex:1;min-width:0;font-family:inherit;
  font-size:16px;letter-spacing:-0.01em;color:#1d1d1f;padding:24px 14px 7px 0}
.phone-box .pc-num::placeholder{color:#c0c0c5}
.ff-invalid .phone-box,.ff-err .phone-box{border-color:#ff3b30}
/* Dosya alanı görünür açıklaması */
.file-note{font-size:13px;line-height:1.55;color:#86868b;margin:-3px 2px 11px}
/* Gruplu kontrol arkası (tekrarlı liste / seçenekler) — çok hafif gri, border yok */
.field-group{background:#fafafb;border:none;border-radius:14px;padding:15px}
.field-group--opts{padding:14px 15px 8px}
.field-group .field-label{margin:0 0 11px}
.field-group .radd{margin-top:8px;padding-left:0}
.field-group .rrow .rx{background:#fff;border:1px solid #e2e2e7}
.field-group .rrow .rx:hover{background:#f0f0f4;color:#1d1d1f}
/* Bölüm başlığı (ANA seviye) — koyu, belirgin */
.form-section > .sec-label{font-size:13px;font-weight:700;color:#1d1d1f;letter-spacing:.02em;margin-bottom:14px}

/* ---- Wizard (adım adım form) ---- */
/* Tek beyaz panel: solda adım menüsü (ayraçlı), sağda form içeriği */
.wiz-layout{width:100%;max-width:1180px;display:flex;align-items:stretch;background:#fff;border-radius:20px;
  box-shadow:0 1px 3px rgba(0,0,0,.04),0 12px 40px -18px rgba(0,0,0,.18)}
/* İçerik sütunu: açık gri zemin (yan menü beyaz kalır) */
.wiz-layout .form-card{flex:1;min-width:0;max-width:none;background:#f7f8fa;border-radius:20px;box-shadow:none;
  padding:30px 34px 0}
.wiz-side + .form-card{border-radius:0 20px 20px 0}
/* Gri zeminde beyaz bileşenler (mockup'taki gibi) */
.wiz-layout .field-group{background:#fff;border:1px solid #eceef2}
.wiz-layout .dz{background:#fff}
/* Footer: ayrı beyaz şerit */
.wiz-layout .form-card > .hair{display:none}
.wiz-layout .wiz-nav{background:#fff;border-top:1px solid #ececf1;margin:28px -34px 0;
  padding:16px 28px;border-radius:0 0 20px 20px}
.wiz-side + .form-card .wiz-nav{border-radius:0 0 20px 0}
.wiz-side{width:300px;flex:none;border-right:1px solid #ececf1;padding:18px 14px 18px 18px}
.wiz-side-inner{display:flex;flex-direction:column}
.ws-brand{font-size:15px;font-weight:750;letter-spacing:.045em;color:#14355f}
.ws-form{font-size:13.5px;color:#86868b;margin-top:3px;line-height:1.35}
.ws-progress{margin:13px 0 12px}
.ws-plabel{display:flex;align-items:baseline;justify-content:space-between;font-size:13.5px;font-weight:600;color:#3a3a3c;margin-bottom:8px}
.ws-pct{color:var(--accent);font-weight:700}
.ws-ptrack{height:5px;background:#e8e8ed;border-radius:999px;overflow:hidden}
.ws-pfill{height:100%;width:0;background:var(--accent);border-radius:999px;transition:width .35s cubic-bezier(.22,.61,.36,1)}
/* Adım satırları */
.wiz-side-item + .wiz-side-item{margin-top:5px}
.wiz-side-item{display:flex;align-items:flex-start;gap:11px;width:100%;text-align:left;border:none;background:none;
  font-family:inherit;font-size:13px;font-weight:550;letter-spacing:-0.01em;color:#a5a5aa;
  padding:7px 10px;border-radius:10px;cursor:pointer;transition:.15s ease}
.wiz-side-item:hover{color:#48484a;background:rgba(120,120,128,.07)}
.wiz-side-item .wsi-num{flex:none;width:23px;height:23px;border-radius:50%;background:none;margin-top:-2px;
  border:1.5px solid #d8d8dd;color:#a5a5aa;position:relative;
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:650;transition:.15s ease}
.wiz-side-item .wsi-check,.wiz-side-item .wsi-ex{display:none}
.wiz-side-item .wsi-ex{font-size:13px;font-weight:750;line-height:1}
.wiz-side-item .wsi-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.wiz-side-item .wsi-title{line-height:1.32}
.wiz-side-item .wsi-sub{display:none;font-size:12.5px;font-weight:600;color:#c26a00;line-height:1.2}
/* Aktif: mavi dolgu numara + açık mavi zemin */
.wiz-side-item.active{color:var(--accent);font-weight:650;background:color-mix(in srgb,var(--accent) 8%,#fff)}
.wiz-side-item.active .wsi-num{background:var(--accent);border-color:var(--accent);color:#fff}
/* Tamamlandı: yeşil dolgu ✓ + koyu metin */
.wiz-side-item.done{color:#1d1d1f}
.wiz-side-item.done .wsi-num{background:#28a24c;border-color:#28a24c;color:#fff}
.wiz-side-item.done .wsi-n{display:none}
.wiz-side-item.done .wsi-check{display:block}
/* Eksik: turuncu çerçeve ! + "N eksik alan" alt yazısı */
.wiz-side-item.warn{color:#1d1d1f}
.wiz-side-item.warn .wsi-num{border-color:#e8930c;color:#e8930c;background:#fff}
.wiz-side-item.warn .wsi-n{display:none}
.wiz-side-item.warn .wsi-ex{display:block}
.wiz-side-item.warn .wsi-sub{display:block}
/* App yerleşimi (masaüstü): sayfa viewport'a sığar — kompakt başlık + kalan alanı dolduran panel */
@media (min-width:901px){
  .form-page:has(.wiz-side){height:100vh;padding:20px 20px 22px}
  .form-page:has(.wiz-side) .form-head{max-width:1180px;margin-bottom:28px}
  .form-page:has(.wiz-side) .form-topbar{margin-bottom:8px}
  .form-page:has(.wiz-side) .form-topbar img{height:40px !important}
  .form-page:has(.wiz-side) .form-org{margin-bottom:8px}
  .form-page:has(.wiz-side) .form-head h1{font-size:23px;margin:4px 0 3px}
  .form-page:has(.wiz-side) .form-head p{font-size:14px}
  /* Panel yüksekliği sabit (forma göre değişmez); uzun içerik kendi içinde kayar */
  .wiz-layout:has(.wiz-side){flex:none;height:calc(100vh - 250px);min-height:480px}
  /* Kaydırılan gövdede tooltip yukarı açılınca kırpılmasın → aşağı açılır */
  .wiz-body .tip .bubble{bottom:auto;top:calc(100% + 9px)}
  .wiz-body .tip .bubble::after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:#1d1d1f}
  .wiz-side{overflow-y:auto}
  .wiz-side + .form-card{display:flex;flex-direction:column;gap:0;padding:0}
  .wiz-side + .form-card > .form-err,
  .wiz-side + .form-card > .preview-banner{margin:20px 34px 0}
  /* Adım başlığı: küçük sayaç + sade başlık + ince çizgi */
  .wiz-side + .form-card .wiz-head{padding:22px 34px 0;gap:7px}
  .wiz-side + .form-card .wiz-meta{flex-direction:column;align-items:flex-start;gap:5px}
  .wiz-side + .form-card .wiz-count{font-size:11px}
  .wiz-side + .form-card .wiz-title{font-size:18px;font-weight:650;letter-spacing:-0.015em;color:#1d1d1f;line-height:1.25}
  .wiz-side + .form-card .wiz-track{margin-top:2px;height:2px;background:#ececf1}
  .wiz-side + .form-card .wiz-step > .sec-label{display:none}
  /* Kaydırılabilir gövde */
  .wiz-side + .form-card .wiz-body{flex:1;min-height:0;overflow-y:auto;padding:16px 34px 22px}
  .wiz-side + .form-card .wiz-nav{margin:0;border-radius:0 0 20px 0}
}
@media (max-width:900px){ .wiz-side{display:none} .wiz-layout{display:block} }

/* Sabit satırlı metrik tablosu (Yayın Sayıları vb.) — köşeler net kalsın diye ayrık kenarlık */
.ftable{width:100%;border-collapse:separate;border-spacing:0;background:#fff;
  border:1px solid #e4e4e9;border-radius:11px;overflow:hidden}
.ftable th{background:#f5f5f7;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:#6e6e73;text-align:left;padding:10px 14px;border:0;border-bottom:1px solid #e4e4e9}
.ftable th+th{border-left:1px solid #e4e4e9}
.ftable td{border:0;border-bottom:1px solid #eceef2;padding:0;font-size:14.5px}
.ftable td+td{border-left:1px solid #eceef2}
.ftable tr:last-child td{border-bottom:0}
.ftable .ft-label{padding:11px 14px;color:#1d1d1f;font-weight:500;width:55%}
.ftable .ft-cell input{width:100%;border:none;outline:none;background:none;font-family:inherit;font-size:15px;
  color:#1d1d1f;padding:11px 14px}
.ftable .ft-cell input:focus{background:color-mix(in srgb,var(--accent) 5%,#fff)}

/* Liste içinde tam genişlik uzun alan (textarea) */
.rrow-cols .fl-long{grid-column:1/-1}
.rrow-cols .fl-long textarea{min-height:76px}

.form-card .wiz-step{display:none}
.form-card .wiz-step.wiz-active{display:grid}
.wiz-head{display:flex;flex-direction:column;gap:10px}
.wiz-meta{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.wiz-count{font-size:12.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);flex:none}
.wiz-count b{font-weight:700}
.wiz-title{font-size:13.5px;font-weight:600;color:#1d1d1f;letter-spacing:-0.01em}
.wiz-track{height:4px;background:#e8e8ed;border-radius:999px;overflow:hidden}
.wiz-fill{height:100%;width:0;background:var(--accent);border-radius:999px;transition:width .35s cubic-bezier(.22,.61,.36,1)}
.wiz-nav{display:flex;align-items:center;gap:12px}
.wiz-nav .btn{display:inline-flex;align-items:center;gap:6px}
.wiz-nav [data-wiz-prev]{background:none;border:none;color:#3a3a3c;font-weight:550;padding:12px 10px}
.wiz-nav [data-wiz-prev]:hover{background:rgba(120,120,128,.08);border-radius:10px}
.wiz-nav [data-wiz-next],.wiz-nav [data-wiz-submit]{margin-left:auto}
.wiz-note{flex:1;text-align:center;font-size:13.5px;font-weight:550;color:#d13b30}
.wiz-note.hidden{display:none}

/* Taslak geri yükleme bildirimi (draft.js) */
.draft-toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);z-index:1200;
  display:flex;align-items:center;gap:10px;background:#1d1d1f;color:#f5f5f7;
  font-size:13.5px;font-weight:500;letter-spacing:-0.01em;line-height:1.4;
  padding:12px 16px;border-radius:13px;box-shadow:0 12px 34px -10px rgba(0,0,0,.4);
  opacity:0;transition:opacity .35s ease,transform .35s ease;max-width:min(92vw,560px)}
.draft-toast.show{opacity:1;transform:translate(-50%,0)}
.draft-toast svg{flex:none;color:#8ec5ff}
.draft-toast .draft-reset{flex:none;font-family:inherit;font-size:12.5px;font-weight:600;color:#8ec5ff;
  background:none;border:1px solid rgba(142,197,255,.35);border-radius:8px;padding:5px 10px;cursor:pointer;transition:.15s}
.draft-toast .draft-reset:hover{background:rgba(142,197,255,.12)}
/* Adım başlığı wizard'da daha belirgin */
.wiz-step.wiz-active > .sec-label{font-size:15px}
/* Zorunlu alan hatası (istemci + sunucu) */
.ff-invalid .fl input,.ff-invalid .fl textarea,.ff-err .fl input,.ff-err .fl textarea{border-color:#ff3b30}
.ff-invalid .field-group,.ff-err .field-group{box-shadow:0 0 0 1.5px color-mix(in srgb,#ff3b30 55%,transparent)}
.ff-invalid .dz,.ff-err .dz{border-color:#ff3b30}

/* Logo + geri butonu üst satırı (logo solda, geri sağda) */
.form-topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}
/* Geri butonu — net, buton görünümlü */
.form-back{display:inline-flex;align-items:center;gap:5px;font-size:13.5px;font-weight:550;color:#6e6e73;flex:none;
  background:#fff;border:1px solid #e5e5ea;border-radius:9px;padding:7px 13px 7px 9px;text-decoration:none;
  transition:.15s ease;letter-spacing:-0.01em}
.form-back:hover{background:#f5f5f7;color:#1d1d1f;border-color:#d2d2d7;text-decoration:none}
.form-back svg{flex:none}
.form-head .eyebrow{display:block;color:var(--accent,#0071e3);margin-bottom:6px}