/* Form parçaları: bütün formlarda ve pencerelerde ortak (başvuru, giriş, kayıt, plaket, iletişim, destek sihirbazı…).
   Alanlar çerçevesiz ve çok hafif gri, odakta orman; seçimler oval kutu ya da düğme. Düz çizgili "form gibi" görünüm yoktur. */

/* Seçim düğmeleri: Evet / Hayır, tutarlar */
.secim-dugmeleri {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.secim-dugmesi {
  min-height: 48px;
  padding: 0 20px;
  border: 2px solid transparent;
  border-radius: var(--yaricap-buyuk);
  background: var(--renk-gri);
  font-weight: 600;
  color: var(--renk-murekkep);
  transition: background-color 0.15s, border-color 0.15s;
}

.secim-dugmesi:not(:disabled):hover {
  background: var(--renk-gri-koyu);
}

.secim-dugmesi[aria-pressed="true"] {
  border-color: var(--renk-orman);
  background: var(--renk-orman-acik);
  color: var(--renk-orman-koyu);
}

.secim-dugmesi:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.secim-dugmeleri--tutar .secim-dugmesi {
  flex: 1;
  font-size: 1.0625rem;
  font-variant-numeric: tabular-nums;
}


.onay-kutusu {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: var(--renk-murekkep);
  cursor: pointer;
}

.onay-kutusu input,
.secenek input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--renk-orman);
}


/* Form alanları: hafif gri zemin, çerçevesiz; odakta orman */
.form-izgarasi {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.alan-etiketi {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--renk-murekkep);
}

.alan-etiketi small {
  font-weight: 500;
  color: var(--renk-soluk);
}

.alan-etiketi input,
.alan-etiketi select,
.alan-etiketi textarea {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: var(--yaricap);
  background: var(--renk-gri);
  font-size: 1rem;
  font-weight: 500;
  transition: border-color 0.15s, background-color 0.15s;
}

.alan-etiketi textarea {
  padding: 12px 14px;
  resize: vertical;
  font-family: inherit;
}

.alan-etiketi input:focus,
.alan-etiketi select:focus,
.alan-etiketi textarea:focus {
  border-color: var(--renk-orman);
  background: var(--renk-zemin);
  outline: none;
}

.alan-etiketi input[readonly] {
  color: var(--renk-soluk);
}

.dosya-alani {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--yaricap-buyuk);
  background: var(--renk-yaprak-acik);
  cursor: pointer;
}

.dosya-alani .ikon-rozeti {
  color: var(--renk-yaprak);
}

.dosya-alani__metin {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.35;
}

.dosya-alani__metin strong {
  overflow: hidden;
  color: var(--renk-yaprak-koyu);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dosya-alani__metin small {
  font-size: 0.8125rem;
  color: var(--renk-metin);
}

.dosya-alani input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.dosya-alani:focus-within {
  outline: 2px solid var(--renk-orman);
  outline-offset: 2px;
}

/* Fotoğraf ve video yükleme (js/moduller/medya-yukleme.js): iki düğme, altında davet cümlesi, seçilenler kart kart */
.medya-yukleme {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  border-radius: var(--yaricap-buyuk);
  background: var(--renk-gri);
}

.medya-yukleme__baslik {
  font-family: var(--yazi-baslik);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--renk-murekkep);
}

.medya-yukleme__dugmeler {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.medya-dugmesi {
  position: relative;
  flex: 1 1 220px;
  justify-content: flex-start;
  min-height: 64px;
  padding: 10px 18px 10px 12px;
  text-align: left;
  cursor: pointer;
}

.medya-dugmesi .ikon-rozeti {
  color: var(--renk-orman);
}

/* Video düğmesi ikincil düğmelerin bal renginde */
.dugme--ikincil.medya-dugmesi .ikon-rozeti {
  background: var(--renk-bal-acik);
  box-shadow: none;
}

.medya-dugmesi__metin {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.medya-dugmesi__metin small {
  font-size: 0.8125rem;
  font-weight: 500;
  opacity: 0.85;
}

.medya-dugmesi input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.medya-dugmesi:focus-within {
  outline: 2px solid var(--renk-orman);
  outline-offset: 2px;
}

.medya-dugmesi--dolu {
  opacity: 0.55;
  cursor: not-allowed;
}

.medya-dugmesi--dolu:hover {
  transform: none;
}

.medya-dugmesi--dolu input {
  cursor: not-allowed;
}

.medya-yukleme__davet {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--renk-murekkep);
}

.medya-listesi {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 12px;
}

.medya-ogesi {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 6px 6px 10px;
  border-radius: var(--yaricap);
  background: var(--renk-zemin);
  box-shadow: var(--golge-kart);
}

.medya-ogesi img,
.medya-ogesi__simge {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--yaricap-kucuk);
  object-fit: cover;
}

.medya-ogesi__simge {
  display: grid;
  place-items: center;
  background: var(--renk-orman-acik);
  color: var(--renk-orman);
}

.medya-ogesi--video .medya-ogesi__simge {
  background: var(--renk-bal-acik);
  color: var(--renk-bal);
}

.medya-ogesi__simge .ikon {
  width: 32px;
  height: 32px;
}

.medya-ogesi__ad {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0 4px;
  font-size: 0.875rem;
  line-height: 1.3;
}

.medya-ogesi__ad strong {
  overflow: hidden;
  font-weight: 600;
  color: var(--renk-murekkep);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.medya-ogesi__ad small {
  font-size: 0.8125rem;
  color: var(--renk-soluk);
}

/* Sunucu işleyemediyse (v0.12): öğe mercan tonda, iletisi okunur */
.medya-ogesi--hata {
  background: var(--renk-mercan-acik);
}

.medya-ogesi__ad .medya-ogesi__hata {
  color: var(--renk-mercan-koyu);
}

.medya-ogesi__sil {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--renk-beyaz-perde);
  box-shadow: var(--golge-kart);
  color: var(--renk-murekkep);
  cursor: pointer;
}

.medya-ogesi__sil:hover {
  background: var(--renk-mercan-acik);
  color: var(--renk-mercan-koyu);
}

/* Yüz seçeneği (karar 86): eklemeden önce iki kutu, öğede durum rozetleri ve "Bulanıklaştır" */
.yuz-secimi {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
}

.yuz-secimi .onay-kutusu span {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.yuz-secimi .onay-kutusu small {
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--renk-soluk);
}

.yuz-rozetleri {
  padding: 0 4px;
}

.rozet.yuz-rozeti {
  background: var(--ton-acik);
  color: var(--ton-koyu);
}

.medya-ogesi__bulaniklastir.dugme--kucuk {
  gap: 6px;
  min-height: 36px;
  margin: 0 4px;
  padding: 0 10px;
  font-size: 0.8125rem;
}

.medya-yukleme__uyarilar {
  display: grid;
  gap: 4px;
  padding: 10px 14px;
  border-radius: var(--yaricap);
  background: var(--renk-mercan-zemin);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--renk-mercan-koyu);
  list-style: none;
}

/* Sonuç ekranı */
.sonuc {
  display: grid;
  place-items: center;
  gap: 10px;
  padding: 8px 0 4px;
  text-align: center;
}

.sonuc h3 {
  font-size: 1.625rem;
}

.sonuc p {
  max-width: 30rem;
  color: var(--renk-metin);
}


/* Küçük pencereler: sıralı açıklama ve seçenekler */
.sira-listesi {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sira-listesi li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.9375rem;
  line-height: 1.45;
}

.sira-listesi strong {
  color: var(--renk-murekkep);
}

.sira-listesi__no {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--renk-gul);
  color: var(--renk-mercan-koyu);
  font-size: 0.875rem;
  font-weight: 700;
}

.secenekler {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

.secenekler legend {
  margin-bottom: 8px;
  padding: 0;
  font-weight: 700;
  color: var(--renk-murekkep);
}

.secenek {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--yaricap-buyuk);
  background: var(--renk-gri);
  font-size: 0.9375rem;
  cursor: pointer;
}

.secenek:has(input:checked) {
  background: var(--renk-orman-acik);
  color: var(--renk-orman-koyu);
  font-weight: 600;
}

@media (max-width: 640px) {
  .form-izgarasi {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Form kartı: sayfa içindeki form (iletişim, sponsor, memur kaydı, şüpheli bildir, plaket). Beyaz, gölgeli, oval köşeli. */
.form-karti {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(22px, 3vw, 32px);
  border-radius: var(--yaricap-kocaman);
  background: var(--renk-zemin);
  box-shadow: var(--golge-yumusak);
}

.form-karti__bas {
  display: flex;
  align-items: center;
  gap: 14px;
}

.form-karti__bas h2,
.form-karti__bas h3 {
  font-size: 1.375rem;
}

.form-karti__bas p {
  margin-top: 2px;
  font-size: 0.9375rem;
  color: var(--renk-soluk);
}

.form-karti__alt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}

.form-karti .dugme:disabled,
.form-adimi .dugme:disabled {
  background: var(--renk-gri-koyu);
  box-shadow: none;
  color: var(--renk-soluk);
  cursor: not-allowed;
  transform: none;
}

/* Alanın altındaki kısa yardım ya da hata yazısı */
.alan-yardim {
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--renk-soluk);
}

.alan-yardim--hata {
  color: var(--renk-mercan-koyu);
}

.alan-yardim--tamam {
  color: var(--renk-yaprak-koyu);
}

/* Büyük seçim kartları (tek seçim): "Kim başvuruyor?", rol seçimi. Gizli radyo düğmesi + ikonlu kart. */
.secim-kartlari {
  display: grid;
  grid-template-columns: repeat(var(--sutun, 3), minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  border: 0;
}

.secim-kartlari--2 {
  --sutun: 2;
}

.secim-kartlari--1 {
  --sutun: 1;
}

.secim-karti {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 20px;
  border: 2px solid transparent;
  border-radius: var(--yaricap-buyuk);
  background: var(--renk-gri);
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, transform 0.15s;
}

.secim-karti:hover {
  background: var(--renk-gri-koyu);
}

.secim-karti input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.secim-karti .ikon-rozeti {
  margin-bottom: 6px;
  background: var(--renk-zemin);
}

.secim-karti strong {
  font-size: 1.0625rem;
  line-height: 1.3;
  color: var(--renk-murekkep);
}

.secim-karti small {
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--renk-metin);
}

.secim-karti:has(input:checked) {
  border-color: var(--renk-orman);
  background: var(--renk-orman-acik);
}

.secim-karti:has(input:focus-visible) {
  outline: 2px solid var(--renk-orman);
  outline-offset: 2px;
}

/* Seçilemeyen kart (ör. yüz yüze ihtiyaç varken "görüşme istemiyorum") */
.secim-karti--kapali {
  opacity: 0.55;
  cursor: not-allowed;
}

.secim-karti--kapali:hover {
  background: var(--renk-gri);
}

/* Seçilince sağ üstte tik */
.secim-karti::after {
  content: "";
  position: absolute;
  top: 16px;
  right: 16px;
  width: 22px;
  height: 22px;
  border: 2px solid var(--renk-cizgi-koyu);
  border-radius: 50%;
  background: var(--renk-zemin);
}

.secim-karti:has(input:checked)::after {
  border: 6px solid var(--renk-orman);
}

/* Yatay seçim kartı (ikon solda) */
.secim-karti--yatay {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 14px;
  align-items: center;
  padding-right: 52px;
}

.secim-karti--yatay .ikon-rozeti {
  grid-row: span 2;
  margin: 0;
}

/* İkonlu seçim hapları (çoklu seçim): ihtiyaçlar, etiketler */
.hap-secimi {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
}

.hap-secimi legend {
  margin-bottom: 10px;
  padding: 0;
  font-weight: 700;
  color: var(--renk-murekkep);
}

.hap-secenek {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 16px 0 8px;
  border: 2px solid transparent;
  border-radius: 999px;
  background: var(--renk-gri);
  font-weight: 600;
  color: var(--renk-murekkep);
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}

.hap-secenek:hover {
  background: var(--renk-gri-koyu);
}

.hap-secenek input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.hap-secenek .ikon-rozeti {
  width: 34px;
  height: 34px;
  background: var(--renk-zemin);
}

.hap-secenek .ikon-rozeti .ikon--renkli {
  width: 18px;
  height: 18px;
}

.hap-secenek:has(input:checked) {
  border-color: var(--renk-orman);
  background: var(--renk-orman-acik);
  color: var(--renk-orman-koyu);
}

.hap-secenek:has(input:focus-visible) {
  outline: 2px solid var(--renk-orman);
  outline-offset: 2px;
}

.hap-secenek--sade {
  padding-left: 16px;
}

/* Telefon alanı: solda sabit +90 */
.telefon-alani {
  display: flex;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: var(--yaricap);
  background: var(--renk-gri);
  transition: border-color 0.15s, background-color 0.15s;
}

.telefon-alani:focus-within {
  border-color: var(--renk-orman);
  background: var(--renk-zemin);
}

.telefon-alani__on {
  display: grid;
  place-items: center;
  padding: 0 4px 0 16px;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--renk-soluk);
}

.alan-etiketi .telefon-alani input {
  flex: 1;
  min-width: 0;
  min-height: 56px;
  border: 0;
  background: transparent;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

.alan-etiketi .telefon-alani input:focus {
  background: transparent;
}

/* 6 haneli SMS kodu: tek alan, geniş harf aralığı */
.alan-etiketi .kod-girdisi {
  max-width: 260px;
  min-height: 64px;
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: 0.4em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Sayı seçici: − 3 + (etiket sütununda tam genişliğe yayılmaz) */
.sayi-secici {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border-radius: 999px;
  background: var(--renk-gri);
}

.sayi-secici button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--renk-zemin);
  box-shadow: var(--golge-kart);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
  color: var(--renk-orman);
}

.sayi-secici button:disabled {
  box-shadow: none;
  color: var(--renk-cizgi-koyu);
  cursor: not-allowed;
}

.sayi-secici output {
  min-width: 48px;
  font-family: var(--yazi-baslik);
  font-size: 1.625rem;
  font-weight: 650;
  text-align: center;
  color: var(--renk-murekkep);
  font-variant-numeric: tabular-nums;
}

/* Karakter sayacı: metin alanının sağ altında */
.karakter-sayaci {
  align-self: flex-end;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--renk-soluk);
  font-variant-numeric: tabular-nums;
}

.karakter-sayaci--dolu {
  color: var(--renk-mercan-koyu);
}

/* Telefon doğrulama (js/moduller/telefon-dogrulama.js): numara → SMS kodu → doğrulandı */
.telefon-dogrulama,
.telefon-dogrulama__numara,
.telefon-dogrulama__kod {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.telefon-dogrulama [hidden] {
  display: none;
}

.telefon-dogrulama__satir {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.telefon-dogrulama__satir .telefon-alani {
  flex: 1 1 240px;
}

.telefon-dogrulama__satir .telefon-alani input {
  flex: 1;
  min-width: 0;
  min-height: 56px;
  padding: 0 14px 0 6px;
  border: 0;
  background: transparent;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

.telefon-dogrulama__satir .telefon-alani input:focus {
  outline: none;
}

.telefon-dogrulama__satir .dugme {
  min-height: 58px;
}

/* E-posta doğrulamada adres alanı ([data-eposta-dogrulama]): telefon alanıyla aynı boyda */
.telefon-dogrulama__eposta {
  flex: 1 1 240px;
  min-width: 0;
  min-height: 58px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: var(--yaricap);
  background: var(--renk-gri);
  font-size: 1.125rem;
  font-weight: 600;
  transition: border-color 0.15s, background-color 0.15s;
}

.telefon-dogrulama__eposta:focus {
  border-color: var(--renk-orman);
  background: var(--renk-zemin);
  outline: none;
}

/* Şifre alanı: sağda "Göster" düğmesi (js/moduller/sifre-alani.js) */
.sifre-alani {
  display: flex;
  align-items: stretch;
  border: 1px solid transparent;
  border-radius: var(--yaricap);
  background: var(--renk-gri);
  transition: border-color 0.15s, background-color 0.15s;
}

.sifre-alani:focus-within {
  border-color: var(--renk-orman);
  background: var(--renk-zemin);
}

.alan-etiketi .sifre-alani input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
}

.alan-etiketi .sifre-alani input:focus {
  background: transparent;
}

.sifre-alani__goster {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--renk-orman);
}

.sifre-alani__goster .ikon {
  width: 18px;
  height: 18px;
}

.sifre-alani__goster[aria-pressed="true"] {
  color: var(--renk-murekkep);
}

.telefon-dogrulama__eylemler {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
}

.telefon-dogrulama__eylemler .metin-baglanti {
  font-size: 0.9375rem;
}

.telefon-dogrulama__eylemler .metin-baglanti:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.telefon-dogrulama__tamam {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--yaricap-buyuk);
  background: var(--renk-yaprak-acik);
  color: var(--renk-yaprak-koyu);
}

.telefon-dogrulama__tamam .ikon-rozeti {
  background: var(--renk-zemin);
}

.telefon-dogrulama__tamam strong {
  color: var(--renk-yaprak-koyu);
}

.telefon-dogrulama__tamam span {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Prototipte telefona gelecek SMS'in örneği: gri konuşma balonu */
.sms-onizleme {
  position: relative;
  max-width: 420px;
  padding: 12px 16px 12px;
  border-radius: var(--yaricap-buyuk) var(--yaricap-buyuk) var(--yaricap-buyuk) 6px;
  background: var(--renk-gri);
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--renk-metin);
}

.sms-onizleme__kimden {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--renk-soluk);
}

.sms-onizleme__kimden .ikon {
  width: 16px;
  height: 16px;
  color: var(--renk-orman);
}

.sms-onizleme strong {
  color: var(--renk-murekkep);
  letter-spacing: 0.06em;
}

.sms-onizleme small {
  display: block;
  margin-top: 6px;
  font-size: 0.75rem;
  color: var(--renk-soluk);
}

@media (max-width: 760px) {
  .secim-kartlari {
    --sutun: 1;
  }

  .secim-karti--yatay {
    padding-right: 48px;
  }
}