/* Reyhan Kültür Vakfı — burs başvurusu
   Önce telefon. Vakıf logosunun renkleri, Nunito yazı tipi. */

/* Yazı tipleri sunucudan verilir (Google'a istek gitmez) */
@font-face { font-family: 'Nunito'; font-weight: 400; font-display: swap; src: url(/fonts/nunito/nunito-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212; }
@font-face { font-family: 'Nunito'; font-weight: 400; font-display: swap; src: url(/fonts/nunito/nunito-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Nunito'; font-weight: 600; font-display: swap; src: url(/fonts/nunito/nunito-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212; }
@font-face { font-family: 'Nunito'; font-weight: 600; font-display: swap; src: url(/fonts/nunito/nunito-latin-ext-600-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Nunito'; font-weight: 700; font-display: swap; src: url(/fonts/nunito/nunito-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212; }
@font-face { font-family: 'Nunito'; font-weight: 700; font-display: swap; src: url(/fonts/nunito/nunito-latin-ext-700-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Nunito'; font-weight: 800; font-display: swap; src: url(/fonts/nunito/nunito-latin-800-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212; }
@font-face { font-family: 'Nunito'; font-weight: 800; font-display: swap; src: url(/fonts/nunito/nunito-latin-ext-800-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF; }

:root {
  /* Vakıf logosundaki renkler: açık turkuaz #4ABCC8, siyah, beyaz.
     Açık turkuaz beyaz yazıyla okunmadığı için düğmelerde aynı tonun koyusu kullanılır (kontrast 5:1). */
  --logo: #4abcc8;
  --turkuaz: #187985;
  --turkuaz-koyu: #0f5b64;
  --turkuaz-acik: #e3f4f6;
  --krem: #f3f8f9;
  --krem-koyu: #e4eef0;
  --beyaz: #ffffff;
  --metin: #1b1f23;
  --metin-soluk: #5b6770;
  --cizgi: #d3e2e5;
  --hata: #b3261e;
  --hata-zemin: #fbeceb;
  --uyari-zemin: #fdf3dc;
  --basari: #2f7a3e;

  --radius: 6px;
  --sans: 'Nunito', 'Segoe UI', Roboto, Arial, sans-serif;
  /* Başlıklar da Nunito, daha kalın */
  --serif: 'Nunito', 'Segoe UI', Roboto, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--krem);
  color: var(--metin);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.55;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main { flex: 1; padding-bottom: 3rem; }

.wrap { width: 100%; max-width: 40rem; margin: 0 auto; padding: 0 1rem; }
.wrap-wide { max-width: 72rem; }

h1, h2, h3 { font-family: var(--serif); font-weight: 800; line-height: 1.25; color: var(--metin); letter-spacing: -0.01em; }
h1 { font-size: 1.65rem; margin: 1.25rem 0 0.75rem; }
h2 { font-size: 1.3rem; margin: 1.5rem 0 0.5rem; }
h3 { font-size: 1.1rem; margin: 1.25rem 0 0.5rem; }

a { color: var(--turkuaz-koyu); text-underline-offset: 2px; }
a:hover { color: var(--metin); }

:focus-visible { outline: 3px solid #f0b429; outline-offset: 2px; }

/* ---------- Üst ve alt bilgi ---------- */

.site-header { background: var(--beyaz); border-bottom: 4px solid var(--logo); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 0.75rem; padding-bottom: 0.75rem; }
.brand { text-decoration: none; color: var(--metin); display: flex; flex-direction: column; }
.brand-name { font-family: var(--serif); font-weight: 700; font-size: 1.15rem; color: var(--turkuaz-koyu); }
.brand-sub { font-size: 0.9rem; color: var(--metin-soluk); }
.header-action { display: flex; align-items: center; gap: 0.75rem; margin: 0; }
.header-user { font-size: 0.9rem; color: var(--metin-soluk); }

.site-footer { border-top: 1px solid var(--cizgi); padding: 1.25rem 0; font-size: 0.875rem; color: var(--metin-soluk); }
.site-footer p { margin: 0.25rem 0; }

/* ---------- Genel kutular ---------- */

.intro { margin-top: 1rem; }
.lead { font-size: 1.125rem; }

.card {
  background: var(--beyaz);
  border: 1px solid var(--cizgi);
  border-radius: var(--radius);
  padding: 1.25rem 1rem;
  margin: 1.25rem 0;
}
.card > h1:first-child, .card > h2:first-child { margin-top: 0; }
.narrow { max-width: 28rem; margin-left: auto; margin-right: auto; }

.plain-list { padding-left: 1.2rem; margin: 0.5rem 0; }
.plain-list li { margin: 0.4rem 0; }

.alert { border-radius: var(--radius); padding: 0.75rem 1rem; margin: 1rem 0; border-left: 4px solid; }
.alert p { margin: 0.25rem 0; }
.alert ul { margin: 0.5rem 0 0.25rem; padding-left: 1.2rem; }
.alert-error { background: var(--hata-zemin); border-color: var(--hata); }
.alert-error a { color: var(--hata); }
.alert-info { background: var(--turkuaz-acik); border-color: var(--turkuaz); }
.alert-warn { background: var(--uyari-zemin); border-color: #c98a12; }

.muted { color: var(--metin-soluk); font-size: 0.925rem; }
.placeholder-note { background: var(--uyari-zemin); padding: 0.5rem 0.75rem; border-radius: var(--radius); }
.empty { padding: 2rem 0; color: var(--metin-soluk); }

/* ---------- Düğmeler ---------- */

.button {
  display: inline-block;
  font: inherit;
  font-weight: 700;
  background: var(--turkuaz);
  color: #fff;
  border: 2px solid var(--turkuaz);
  border-radius: var(--radius);
  padding: 0.7rem 1.25rem;
  text-decoration: none;
  cursor: pointer;
  text-align: center;
  min-height: 48px;
}
.button:hover { background: var(--turkuaz-koyu); border-color: var(--turkuaz-koyu); color: #fff; }
.button-secondary { background: transparent; color: var(--turkuaz-koyu); }
.button-secondary:hover { background: var(--turkuaz-acik); color: var(--turkuaz-koyu); }
.button-small { padding: 0.45rem 0.9rem; min-height: 40px; font-size: 0.95rem; }
.button[disabled] { opacity: 0.6; cursor: wait; }

.link-button {
  font: inherit;
  background: none;
  border: 0;
  padding: 0.25rem 0;
  color: var(--turkuaz-koyu);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.link-danger { color: var(--hata); }

.form-actions { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 2rem; }
.secondary-actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem; margin-top: 1.25rem; font-size: 0.95rem; }
.secondary-actions form { margin: 0; }

/* ---------- Form alanları ---------- */

.stack > * + * { margin-top: 1rem; }

.field { margin: 0 0 1.25rem; border: 0; padding: 0; min-width: 0; }
.field label, .field legend { display: block; font-weight: 700; margin-bottom: 0.3rem; padding: 0; }
.optional { font-weight: 400; color: var(--metin-soluk); font-size: 0.925rem; }
.hint { color: var(--metin-soluk); font-size: 0.95rem; margin: 0 0 0.4rem; }
.error { color: var(--hata); font-weight: 700; margin: 0 0 0.4rem; }

input[type='text'], input[type='email'], input[type='tel'], input[type='date'], input[type='search'],
input[type='password'], select, textarea {
  width: 100%;
  font: inherit;
  color: var(--metin);
  background: #fff;
  border: 1px solid #b9ad94;
  border-radius: var(--radius);
  padding: 0.6rem 0.7rem;
  min-height: 48px;
}
textarea { min-height: 7rem; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--turkuaz); outline: 2px solid var(--turkuaz); outline-offset: 0; }
.has-error input, .has-error textarea, .has-error select { border-color: var(--hata); border-width: 2px; }
.has-error { border-left: 3px solid var(--hata); padding-left: 0.75rem; }

.input-code { font-size: 1.5rem; letter-spacing: 0.3em; max-width: 12rem; text-align: center; }

.choices { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.field .choice {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 400;
  background: #fff;
  border: 1px solid #b9ad94;
  border-radius: var(--radius);
  padding: 0.55rem 0.9rem;
  min-height: 48px;
  margin: 0;
  cursor: pointer;
}
.choice:has(input:checked) { border-color: var(--turkuaz); background: var(--turkuaz-acik); }
.choice input { width: 1.2rem; height: 1.2rem; margin: 0; accent-color: var(--turkuaz); }

.field .checkbox { display: flex; gap: 0.75rem; align-items: flex-start; font-weight: 400; margin: 0; cursor: pointer; }
.checkbox input { width: 1.4rem; height: 1.4rem; margin: 0.15rem 0 0; flex-shrink: 0; accent-color: var(--turkuaz); }
.consent { background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: var(--radius); padding: 0.9rem; }
.consent.has-error { border-left: 3px solid var(--hata); }

.field-heading { font-size: 1.15rem; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--cizgi); }
.step-form > .field-heading:first-of-type, .step-form > .rows:first-of-type .field-heading { border-top: 0; padding-top: 0; margin-top: 0.5rem; }

.rows .row-group {
  border: 1px solid var(--cizgi);
  border-radius: var(--radius);
  background: var(--beyaz);
  padding: 0.75rem 0.9rem 0.25rem;
  margin: 0 0 1rem;
}
.rows .row-group > legend { font-family: var(--serif); font-weight: 700; padding: 0 0.35rem; }
.js .row-group[data-extra] { display: none; }
.add-row { margin-bottom: 1rem; }

.autosave-status { font-size: 0.875rem; color: var(--metin-soluk); min-height: 1.3em; margin-top: 0.75rem; }

/* ---------- İlerleme ---------- */

.progress { margin-top: 1.25rem; }
.progress-text { margin: 0 0 0.35rem; font-size: 0.9rem; color: var(--metin-soluk); }
.progress progress {
  width: 100%;
  height: 6px;
  border: 0;
  border-radius: 3px;
  background: var(--krem-koyu);
  appearance: none;
  display: block;
}
.progress progress::-webkit-progress-bar { background: var(--krem-koyu); border-radius: 3px; }
.progress progress::-webkit-progress-value { background: var(--turkuaz); border-radius: 3px; }
.progress progress::-moz-progress-bar { background: var(--turkuaz); border-radius: 3px; }

/* Başvuru özeti: bölüm listesi */
.step-list { list-style: none; padding: 0; margin: 1rem 0 1.5rem; border: 1px solid var(--cizgi); border-radius: var(--radius); background: var(--beyaz); }
.step-item + .step-item { border-top: 1px solid var(--cizgi); }
.step-item a { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.9rem 1rem; text-decoration: none; color: var(--metin); }
.step-item a:hover { background: var(--turkuaz-acik); }
.step-title { font-weight: 700; }
.step-state { font-size: 0.9rem; color: var(--metin-soluk); white-space: nowrap; }
.step-item.is-complete .step-state { color: var(--basari); }
.step-item.is-complete .step-state::before { content: '✓ '; }
.step-item.is-missing .step-state { color: var(--hata); font-weight: 700; }

/* ---------- Belgeler ---------- */

.doc-card { background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: var(--radius); padding: 1rem; margin: 1rem 0; }
.doc-card.is-uploaded { border-left: 4px solid var(--basari); }
.doc-card.has-error { border-left: 4px solid var(--hata); }
.doc-head h2 { margin: 0 0 0.2rem; font-size: 1.15rem; }
.doc-file { margin: 0.5rem 0 0.75rem; word-break: break-word; }
.doc-ok { color: var(--basari); font-weight: 700; }
.doc-size { color: var(--metin-soluk); font-size: 0.9rem; }
.upload-form { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 0.5rem; }
.file-label { display: block; flex: 1 1 14rem; }
.file-label span { display: none; }
.file-label input { width: 100%; font: inherit; font-size: 0.95rem; }
.delete-form { margin: 0.5rem 0 0; }

/* ---------- Onay ---------- */

.signature { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; margin: 1.5rem 0 0.5rem; }
.signature dt { font-size: 0.9rem; color: var(--metin-soluk); }
.signature dd { margin: 0; font-weight: 700; }
.legal-text { white-space: pre-line; max-height: 18rem; overflow: auto; font-size: 0.95rem; border: 1px solid var(--cizgi); border-radius: var(--radius); padding: 0.75rem; background: #fff; }
.legal-page { white-space: pre-line; }

.done { text-align: left; }
.application-number { font-family: var(--serif); font-size: 2rem; font-weight: 700; color: var(--turkuaz-koyu); margin: 0.25rem 0 1rem; }

/* ---------- Panel ---------- */

.panel-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.panel-counts { color: var(--metin-soluk); margin: 0; }

.filters { display: grid; grid-template-columns: 1fr; gap: 0 1rem; background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: var(--radius); padding: 1rem; margin: 1rem 0; }
.filters .field { margin-bottom: 0.75rem; }
.filters label { font-size: 0.9rem; }
.filter-actions { display: flex; align-items: center; gap: 1rem; }

.list-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 1rem 0 0.5rem; }
.list-bar p { margin: 0; color: var(--metin-soluk); }

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--cizgi); border-radius: var(--radius); background: var(--beyaz); }
.list-table, .detail-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.list-table th, .list-table td, .detail-table th, .detail-table td { text-align: left; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--cizgi); vertical-align: top; }
.list-table th, .detail-table th { background: var(--krem-koyu); font-weight: 700; white-space: nowrap; }
.list-table tbody tr:hover { background: var(--turkuaz-acik); }
.list-table tr:last-child td, .detail-table tr:last-child td { border-bottom: 0; }

.pagination { display: flex; gap: 1.25rem; justify-content: center; align-items: center; margin: 1.25rem 0; }

.back-link { margin: 1rem 0 0; }
.detail-head h1 { margin-bottom: 0.5rem; }
.meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; margin: 0 0 1rem; }
.meta dt { font-size: 0.85rem; color: var(--metin-soluk); }
.meta dd { margin: 0; font-weight: 700; }

.detail-nav { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; padding: 0.75rem 0; border-top: 1px solid var(--cizgi); border-bottom: 1px solid var(--cizgi); font-size: 0.95rem; position: sticky; top: 0; background: var(--krem); z-index: 1; }

.detail-section { background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: var(--radius); padding: 0.5rem 1rem 1rem; margin: 1.25rem 0; scroll-margin-top: 4rem; }
.detail-list { margin: 0; display: grid; grid-template-columns: 1fr; }
.detail-list > div { padding: 0.5rem 0; border-bottom: 1px solid var(--krem-koyu); }
.detail-list dt { font-size: 0.875rem; color: var(--metin-soluk); }
.detail-list dd { margin: 0; white-space: pre-line; word-break: break-word; }
.detail-list .is-sensitive dt::after { content: ' · gizli'; color: #a0601a; font-size: 0.8rem; }

.doc-view { padding: 0.25rem 0 1rem; border-bottom: 1px solid var(--krem-koyu); }
.doc-view:last-child { border-bottom: 0; }
.doc-frame { width: 100%; height: 75vh; border: 1px solid var(--cizgi); border-radius: var(--radius); background: #fff; }
.doc-image { max-width: 100%; max-height: 75vh; border: 1px solid var(--cizgi); border-radius: var(--radius); display: block; }

.consent-list { list-style: none; padding: 0; margin: 0; }
.consent-list li { padding: 0.6rem 0; border-bottom: 1px solid var(--krem-koyu); }
.consent-list li p { margin: 0.25rem 0 0; font-size: 0.95rem; }
.consent-list .is-yes strong { color: var(--basari); }
.consent-list .is-no strong { color: var(--hata); }

/* ---------- Geniş ekranlar ---------- */

@media (min-width: 40rem) {
  h1 { font-size: 2rem; }
  .card { padding: 1.5rem; }
  .form-actions { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .form-actions .button:first-child { order: 2; }
  .form-actions .button-secondary { order: 1; }
  .form-actions .link-button { order: 3; margin-left: auto; }
  .filters { grid-template-columns: repeat(2, 1fr); }
  .filters .field-search { grid-column: 1 / -1; }
  .detail-list { grid-template-columns: repeat(2, 1fr); column-gap: 2rem; }
}

@media (min-width: 64rem) {
  .filters { grid-template-columns: repeat(4, 1fr); align-items: end; }
  .filters .field-search { grid-column: span 2; }
  .detail-list { grid-template-columns: repeat(3, 1fr); }
}

@media print {
  .site-header, .site-footer, .detail-nav, .back-link, .doc-frame { display: none; }
  body { background: #fff; }
}

/* Deneme yayını uyarısı (TEST_KULLANICI / TEST_SIFRE doluyken) */
.test-banner { background: #c98a12; color: #fff; text-align: center; font-weight: 700; font-size: 0.9rem; padding: 0.4rem 1rem; }

/* Başvuru sayfalarının üstündeki vakıf logosu */
.brand-logo-link { display: block; flex: 1 1 auto; max-width: 560px; }
.brand-logo { display: block; width: 100%; height: auto; }
.header-logo { align-items: flex-start; padding-top: 0.5rem; padding-bottom: 0.5rem; }
.header-logo .header-action { padding-top: 0.25rem; }

/* İmza alanı */
.signature-pad {
  display: block; width: 100%; max-width: 600px; aspect-ratio: 3 / 1; height: auto;
  background: #fff; border: 2px dashed var(--logo); border-radius: var(--radius);
  touch-action: none; cursor: crosshair;
}
.signature-saved { display: block; max-width: 300px; width: 100%; border: 1px solid var(--cizgi); border-radius: var(--radius); margin-bottom: 0.5rem; background: #fff; }
.signature-field [data-signature-clear] { margin-top: 0.4rem; }
.signature-view { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; padding: 0.5rem 0 1rem; border-bottom: 1px solid var(--krem-koyu); }
.signature-view img { max-width: 320px; width: 100%; border: 1px solid var(--cizgi); border-radius: var(--radius); background: #fff; }

/* Açılır listeler */
select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--turkuaz) 50%), linear-gradient(135deg, var(--turkuaz) 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 12px) 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.2rem;
}

/* Panel: formdaki bilgilere göre ayrıntılı filtre */
.adv-filters { grid-column: 1 / -1; border-top: 1px solid var(--cizgi); margin-top: 0.5rem; padding-top: 0.75rem; }
.adv-filters > summary { cursor: pointer; font-weight: 700; color: var(--turkuaz-koyu); margin-bottom: 0.5rem; }
.badge { display: inline-block; background: var(--turkuaz); color: #fff; border-radius: 999px; padding: 0 0.55rem; font-size: 0.8rem; margin-left: 0.25rem; }
.adv-group { border: 0; padding: 0; margin: 0.75rem 0 0; min-width: 0; }
.adv-group > legend { font-family: var(--serif); font-weight: 700; padding: 0; margin-bottom: 0.4rem; }
.adv-grid { display: grid; grid-template-columns: 1fr; gap: 0 1rem; }
.adv-grid .field { margin-bottom: 0.6rem; }
.adv-grid .field.is-active select { border-color: var(--turkuaz); border-width: 2px; background-color: var(--turkuaz-acik); }
.active-filters { list-style: none; padding: 0; margin: 0.25rem 0 0.5rem; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.active-filters li { background: var(--turkuaz-acik); border: 1px solid var(--logo); border-radius: 999px; padding: 0.2rem 0.4rem 0.2rem 0.75rem; font-size: 0.9rem; }
.active-filters a { text-decoration: none; font-weight: 700; padding: 0 0.4rem; color: var(--turkuaz-koyu); }
@media (min-width: 40rem) { .adv-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .adv-grid { grid-template-columns: repeat(4, 1fr); } }