/* =========================================================
   TASARIM AYARLARI — renkler, yazı tipi, köşeler buradan değişir
   ========================================================= */
:root {
  --renk-ana: #1f4e79;          /* butonlar, başlıklar, vurgu */
  --renk-ana-koyu: #163a5a;     /* buton üzerine gelince */
  --renk-ana-acik: #e8f0f8;     /* seçili kart, rozet arka planı */
  --renk-vurgu: #e07a1f;        /* uyarılar, küçük vurgular */
  --renk-arka: #f6f7f9;         /* sayfa arka planı */
  --renk-kart: #ffffff;         /* kart arka planı */
  --renk-yazi: #1d2330;         /* ana yazı */
  --renk-yazi-soluk: #5b6474;   /* açıklama yazıları */
  --renk-cizgi: #dfe3ea;        /* kenarlıklar */
  --renk-uyari-arka: #fff4e8;
  --renk-bilgi-arka: #eef5ff;

  --yazi-tipi: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --kose: 12px;
  --golge: 0 1px 3px rgba(20, 30, 50, .08), 0 4px 16px rgba(20, 30, 50, .05);
  --genislik: 960px;
}

/* ========================================================= */

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--yazi-tipi);
  background: var(--renk-arka);
  color: var(--renk-yazi);
  line-height: 1.55;
}

a { color: var(--renk-ana); }

.container {
  max-width: var(--genislik);
  margin: 0 auto;
  padding: 0 16px;
}

/* Üst bar */
.site-header {
  background: var(--renk-kart);
  border-bottom: 1px solid var(--renk-cizgi);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
}
.logo {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
  white-space: nowrap;
  text-decoration: none;
  color: var(--renk-ana);
}
.logo-ad {
  font-weight: 800;
  font-size: 1.45rem;
  letter-spacing: -.02em;
}
.logo-i { color: var(--renk-vurgu); }
.logo-slogan {
  font-size: .72rem;
  color: var(--renk-yazi-soluk);
  letter-spacing: .02em;
}
.isim-hikaye { margin-top: 12px; }
.header-nav a {
  white-space: nowrap;
  margin-left: 20px;
  text-decoration: none;
  color: var(--renk-yazi-soluk);
  font-size: .95rem;
}
.header-nav a:hover { color: var(--renk-ana); }
.nav-btn {
  font: inherit;
  font-size: .95rem;
  background: none;
  border: 1px solid var(--renk-cizgi);
  border-radius: 999px;
  padding: 6px 12px;
  color: var(--renk-yazi-soluk);
  cursor: pointer;
  white-space: nowrap;
}
.nav-btn:hover { color: var(--renk-ana); border-color: var(--renk-ana); }
.header-nav { display: flex; align-items: center; gap: 8px; }
.header-nav a.nav-btn { margin-left: 0; text-decoration: none; display: inline-block; font-size: .95rem; }
.header-nav .nav-btn { line-height: 1.3; }
@media (max-width: 420px) {
  .header-nav { gap: 6px; }
  .header-nav .nav-btn, .header-nav a.nav-btn { font-size: .82rem; padding: 5px 9px; }
}

/* Sonuç sayfasındaki görüş kutusu */
.gorus-kutu {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  background: var(--renk-kart);
  border: 1px dashed var(--renk-cizgi);
}
.gorus-kutu span { color: var(--renk-yazi-soluk); font-size: .92rem; }
.gorus-kutu .btn { text-decoration: none; margin-top: 4px; }

/* "Nasıl çalışır?" penceresi */
.pencere {
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: auto;
  border: none;
  border-radius: var(--kose);
  padding: 22px;
  background: var(--renk-kart);
  color: var(--renk-yazi);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
}
.pencere::backdrop { background: rgba(15, 25, 40, .45); }
.pencere-ust { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.pencere-ust h2 { margin: 0; color: var(--renk-ana); }
.pencere-kapat {
  border: none;
  background: var(--renk-arka);
  width: 34px; height: 34px;
  border-radius: 50%;
  font-size: 1rem;
  cursor: pointer;
  color: var(--renk-yazi-soluk);
  flex-shrink: 0;
}
.pencere-adimlar { list-style: none; padding: 0; margin: 0 0 14px; counter-reset: p; }
.pencere-adimlar li {
  position: relative;
  padding: 0 0 12px 42px;
  counter-increment: p;
}
.pencere-adimlar li::before {
  content: counter(p);
  position: absolute; left: 0; top: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--renk-ana);
  color: #fff;
  font-weight: 700;
  font-size: .9rem;
  display: grid; place-items: center;
}
.pencere-adimlar strong { display: block; }
.pencere-adimlar span { color: var(--renk-yazi-soluk); font-size: .93rem; }
.pencere-notlar {
  list-style: none;
  margin: 0 0 16px;
  padding: 12px 14px;
  background: var(--renk-arka);
  border-radius: 8px;
  font-size: .9rem;
}
.pencere-notlar li { margin-bottom: 6px; }
.pencere-notlar li:last-child { margin-bottom: 0; }
.pencere-tamam { width: 100%; }

main { padding: 20px 16px 40px; }

/* Giriş bölümü */
.hero { text-align: center; padding: 8px 0 20px; }
.hero h1 {
  font-size: clamp(1.35rem, 3.5vw, 2rem);
  line-height: 1.2;
  margin: 0 0 8px;
}
.hero p {
  color: var(--renk-yazi-soluk);
  font-size: .98rem;
  max-width: 560px;
  margin: 0 auto;
}

h2, .sayfa-baslik { font-size: 1.35rem; margin: 0 0 16px; line-height: 1.3; }
h3 { font-size: 1.1rem; margin: 0 0 8px; }

/* Sorun kartları */
.kategori-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 8px;
}
/* Geniş ekranda 7 sütun: 14 kart iki tam satıra oturur, son satırda tek başına kart kalmaz */
@media (min-width: 900px) {
  .kategori-grid { grid-template-columns: repeat(7, 1fr); }
  .kategori-kart { flex-direction: column; text-align: center; padding: 14px 8px; }
  .kategori-kart .ikon { font-size: 1.6rem; }
}
.kategori-kart {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--renk-kart);
  border: 1px solid var(--renk-cizgi);
  border-radius: var(--kose);
  padding: 10px;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: border-color .15s, background .15s;
}
.kategori-kart:hover {
  border-color: var(--renk-ana);
  background: var(--renk-ana-acik);
}
.kategori-kart .ikon { font-size: 1.4rem; flex-shrink: 0; }
.kategori-kart strong { font-size: .92rem; line-height: 1.25; min-width: 0; }
@media (max-width: 400px) {
  .kategori-kart { padding: 10px 8px; gap: 6px; }
  .kategori-kart .ikon { font-size: 1.25rem; }
}
.kategori-kart small { display: none; }

/* Sorununu anlat kutusu */
.anlat { margin-top: 24px; }
.anlat-baslik { display: block; font-size: .95rem; font-weight: 600; margin-bottom: 8px; color: var(--renk-yazi-soluk); }
.anlat-satir { display: flex; gap: 8px; }
.anlat-satir input {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  font: inherit;
  border: 1px solid var(--renk-cizgi);
  border-radius: 8px;
  background: var(--renk-kart);
  color: var(--renk-yazi);
}
.anlat-satir input:focus { outline: 2px solid var(--renk-ana); outline-offset: 1px; border-color: transparent; }
.anlat-satir .btn { padding: 10px 16px; }
.anlat textarea {
  width: 100%;
  min-height: 110px;
  padding: 12px 14px;
  font: inherit;
  font-size: 1.02rem;
  border: 1px solid var(--renk-cizgi);
  border-radius: 8px;
  resize: vertical;
  background: var(--renk-kart);
  color: var(--renk-yazi);
}
.anlat textarea:focus { outline: 2px solid var(--renk-ana); outline-offset: 1px; border-color: transparent; }
.anlat-alt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.anlat-alt .ipucu { color: var(--renk-yazi-soluk); font-size: .87rem; flex: 1; min-width: 200px; }

.oneri-baslik { font-weight: 600; margin: 20px 0 10px; }
.oneri-liste { display: grid; gap: 8px; }
.oneri {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  background: var(--renk-kart);
  border: 1px solid var(--renk-cizgi);
  border-radius: var(--kose);
  padding: 12px 16px;
  cursor: pointer;
}
.oneri:hover { border-color: var(--renk-ana); }
.oneri-ilk { border-color: var(--renk-ana); background: var(--renk-ana-acik); }
.oneri .ikon { font-size: 1.6rem; }
.oneri strong { display: block; }
.oneri small { color: var(--renk-yazi-soluk); }
.oneri .ok { margin-left: auto; color: var(--renk-ana); font-weight: 700; }
.oneri-diger {
  justify-self: start;
  font: inherit;
  font-size: .92rem;
  background: none;
  border: none;
  color: var(--renk-ana);
  cursor: pointer;
  padding: 4px 0;
  text-decoration: underline;
}

/* Nasıl çalışır */
.nasil {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px 20px;
}
.nasil-adim {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 10px;
  align-items: start;
}
.nasil-adim .no {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--renk-ana);
  color: #fff;
  font-weight: 700;
  font-size: .85rem;
}
.nasil-adim h3 { font-size: .95rem; margin: 2px 0 2px; }
.nasil-adim p { margin: 0; color: var(--renk-yazi-soluk); font-size: .87rem; }

/* İlerleme çubuğu */
.ilerleme {
  display: flex;
  gap: 6px;
  margin-bottom: 24px;
}
.ilerleme span {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: var(--renk-cizgi);
}
.ilerleme span.aktif { background: var(--renk-ana); }

/* Form */
.panel {
  background: var(--renk-kart);
  border: 1px solid var(--renk-cizgi);
  border-radius: var(--kose);
  padding: 24px;
  box-shadow: var(--golge);
}
.panel + .panel { margin-top: 16px; }
.panel-ust { color: var(--renk-yazi-soluk); margin: -8px 0 20px; }

.alan { margin-bottom: 18px; }
.alan label.etiket {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
}
.alan .ipucu {
  display: block;
  color: var(--renk-yazi-soluk);
  font-size: .87rem;
  margin-top: 4px;
}
.alan input[type=text],
.alan input[type=number],
.alan input[type=date],
.alan input[type=email],
.alan input[type=tel],
.alan select,
.alan textarea {
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  border: 1px solid var(--renk-cizgi);
  border-radius: 8px;
  background: var(--renk-kart);
  color: var(--renk-yazi);
}
.alan textarea { min-height: 90px; resize: vertical; }
.alan input:focus, .alan select:focus, .alan textarea:focus {
  outline: 2px solid var(--renk-ana);
  outline-offset: 1px;
  border-color: transparent;
}
.alan.hata input, .alan.hata select, .alan.hata textarea { border-color: #c0392b; }
.alan .hata-mesaj { color: #c0392b; font-size: .87rem; display: none; margin-top: 4px; }
.alan.hata .hata-mesaj { display: block; }
.zorunlu { color: var(--renk-vurgu); }

.secenekler { display: flex; flex-wrap: wrap; gap: 8px; }
.secenekler label {
  display: flex; align-items: center; gap: 6px;
  border: 1px solid var(--renk-cizgi);
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
}
.secenekler label:has(input:checked) {
  border-color: var(--renk-ana);
  background: var(--renk-ana-acik);
}

.iki-sutun {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}
@media (max-width: 600px) { .iki-sutun { grid-template-columns: 1fr; } }

/* Butonlar */
.butonlar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 24px;
  flex-wrap: wrap;
}
.btn {
  font: inherit;
  font-weight: 600;
  padding: 11px 20px;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
}
.btn-ana { background: var(--renk-ana); color: #fff; }
.btn-ana:hover { background: var(--renk-ana-koyu); }
.btn-ikincil { background: transparent; border-color: var(--renk-cizgi); color: var(--renk-yazi); }
.btn-ikincil:hover { border-color: var(--renk-ana); }
.btn-kucuk { padding: 7px 12px; font-size: .9rem; }

/* Sonuç sayfası */
.ozet {
  background: var(--renk-ana);
  color: #fff;
  border-radius: var(--kose);
  padding: 22px 24px;
  margin-bottom: 16px;
}
.ozet .sayfa-baslik { margin-bottom: 6px; }
.ozet p { margin: 0; opacity: .92; }

.yol { list-style: none; padding: 0; margin: 0; counter-reset: yol; }
.yol > li {
  position: relative;
  padding: 0 0 24px 46px;
  counter-increment: yol;
}
.yol > li::before {
  content: counter(yol);
  position: absolute; left: 0; top: 0;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--renk-ana-acik);
  color: var(--renk-ana);
  font-weight: 700;
  display: grid; place-items: center;
}
.yol > li:not(:last-child)::after {
  content: "";
  position: absolute; left: 14px; top: 34px; bottom: 4px;
  width: 2px;
  background: var(--renk-cizgi);
}
.yol .merci {
  display: inline-block;
  background: var(--renk-ana-acik);
  color: var(--renk-ana);
  font-size: .8rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  margin-bottom: 4px;
}
.yol p { margin: 4px 0 0; color: var(--renk-yazi-soluk); }

/* Adım altındaki "Nasıl başvurulur?" ve başvuru düğmeleri */
.nasil-kutu {
  margin-top: 10px;
  background: var(--renk-arka);
  border: 1px solid var(--renk-cizgi);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: .93rem;
  overflow-wrap: anywhere;
}
@media (max-width: 480px) {
  .yol > li { padding-left: 38px; }
  .nasil-kutu { padding: 10px; }
  .nasil-kutu ol { padding-left: 18px; }
}
.nasil-kutu strong { display: block; margin-bottom: 4px; color: var(--renk-ana); }
.nasil-kutu ol { margin: 0; padding-left: 20px; }
.nasil-kutu li { margin-bottom: 4px; }
.adim-linkler { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.basvuru-btn {
  display: inline-block;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--renk-ana);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: .9rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.basvuru-btn:hover { background: var(--renk-ana-koyu); }
.basvuru-btn.tel { background: var(--renk-kart); color: var(--renk-ana); border: 1px solid var(--renk-ana); }
.basvuru-btn.tel:hover { background: var(--renk-ana-acik); }

.kutu {
  border-radius: var(--kose);
  padding: 14px 18px;
  margin-top: 12px;
}
.kutu-uyari { background: var(--renk-uyari-arka); border-left: 4px solid var(--renk-vurgu); }
.kutu-bilgi { background: var(--renk-bilgi-arka); border-left: 4px solid var(--renk-ana); }
.kutu ul { margin: 6px 0 0; padding-left: 20px; }

.belge-liste { margin: 0; padding-left: 20px; }
.belge-liste li { margin-bottom: 4px; }

/* Dilekçe */
.sekmeler { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.sekme {
  font: inherit;
  padding: 8px 14px;
  border-radius: 8px 8px 0 0;
  border: 1px solid var(--renk-cizgi);
  border-bottom: none;
  background: var(--renk-arka);
  cursor: pointer;
  color: var(--renk-yazi-soluk);
}
.sekme.aktif { background: var(--renk-kart); color: var(--renk-ana); font-weight: 600; }
.dilekce {
  width: 100%;
  min-height: 460px;
  font-family: "Times New Roman", Georgia, serif;
  font-size: 1rem;
  line-height: 1.6;
  padding: 20px;
  border: 1px solid var(--renk-cizgi);
  border-radius: 8px;
  background: #fffefb;
  color: #1d2330;
  resize: vertical;
}
.dilekce-arac { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; align-items: center; }
.dilekce-arac .not { color: var(--renk-yazi-soluk); font-size: .87rem; }

.saklama-notu { margin-top: 16px; font-size: .9rem; }
.link-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--renk-ana);
  text-decoration: underline;
  cursor: pointer;
}

/* Gizlilik vb. metin sayfaları */
.metin-sayfa { padding-top: 24px; padding-bottom: 40px; }
.metin-sayfa h1 { font-size: clamp(1.4rem, 3.5vw, 1.9rem); margin: 0 0 4px; }
.metin-sayfa .guncelleme { color: var(--renk-yazi-soluk); font-size: .87rem; margin: 0 0 16px; }
.metin-sayfa .panel { margin-top: 16px; }
.metin-sayfa h3 { margin-top: 18px; }
.metin-sayfa li { margin-bottom: 6px; }
.bulunamadi { margin-top: 24px; text-align: center; }
.bulunamadi h1 { font-size: 1.6rem; margin: 0 0 8px; }
.bulunamadi p { color: var(--renk-yazi-soluk); margin: 0 0 20px; }
.bulunamadi .btn { display: inline-block; text-decoration: none; }
.icindekiler { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .92rem; }

/* Alt bilgi */
.footer-linkler a { color: var(--renk-yazi-soluk); margin-right: 14px; }
.site-footer {
  border-top: 1px solid var(--renk-cizgi);
  background: var(--renk-kart);
  color: var(--renk-yazi-soluk);
  font-size: .87rem;
  padding: 20px 0;
}
.site-footer p { margin: 6px 0; }

/* Yazdırırken sadece dilekçe */
@media print {
  body * { visibility: hidden; }
  #yazdir-alani, #yazdir-alani * { visibility: visible; }
  #yazdir-alani {
    position: absolute; left: 0; top: 0; width: 100%;
    white-space: pre-wrap;
    font-family: "Times New Roman", serif;
    font-size: 12pt;
  }
}
#yazdir-alani { display: none; }
@media print { #yazdir-alani { display: block; } }