/* Token köprüsü (ik-token.css) Model'in $sayfaCss dizisinde bu dosyadan ÖNCE, ?v= damgalı yüklenir.
   Kaynaktaki `@import url('ik-token.css')` bu projede KALDIRILDI: damgasız @import üretimde
   1 yıl immutable önbelleğe düşer ve güncel damgalı sürümü ezerdi (TMA-01; 2026-09-27, TTA ile hizalı). */

/* ==========================================
   FORM.CSS — TEMA FORMLARI (ORTAK)
   ------------------------------------------
   Bu projede YALNIZ İK başvuru formu yükler: /insan-kaynaklari/{uuid}/basvuru ·
   /insan-kaynaklari/genel-basvuru (BasvuruFormModel-GET). Kaynak dosya (simyakoleji →
   bogazicivipkurs) orada /basvuru · /iletisim · kampüs formları içindi; o sayfalar bu
   projede YOK. Markup core/form-alan.php'den, davranış assets/tema/js/form.js'ten gelir.

   ⚠ main.css'e DOKUNULMAZ. Yalnız --c-* / --radius-* / --shadow-* / --fw-* değişkenleri
     kullanılır; bu projede ik-token.css köprüsü onları main.css :root paletine eşler.
   ⚠ Sabit hex YOK (yalnız nötr gri/kırmızı/yeşil geri bildirim tonları).
   ⚠ Sınıf dili BEM: .tema-form__<parça>--<durum>
   ========================================== */

/* ==========================================
   FORM KABUĞU
   ========================================== */
.tema-form {
  width: 100%;
}

/* 12 kolonluk ızgara — mobilde her alan tam genişlik */
.tema-form__izgara {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem 1rem;
}

.tema-form__alan {
  grid-column: span 12;
  min-width: 0;
}

/* Mobilde TÜM alanlar tam genişlik; --3/--4/--6 kırılımları aşağıdaki
   medya sorgularında devreye girer. --12 her zaman tam satırdır. */
.tema-form__alan--12 {
  grid-column: span 12;
}

/* Form içi bölüm başlığı (Öğrenci / Veli / Görüşme …) */
.tema-form__bolum {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: .5rem 0 -.25rem;
  padding-bottom: .625rem;
  border-bottom: 1px solid var(--c-gray-light);
  font-size: .875rem;
  font-weight: var(--fw-bold);
  color: var(--c-primary-dark);
  letter-spacing: .01em;
}

.tema-form__bolum:first-child {
  margin-top: 0;
}

.tema-form__bolum i {
  color: var(--c-accent);
  font-size: .9375rem;
}

.tema-form__bolum-not {
  font-size: .75rem;
  font-weight: var(--fw-normal);
  color: var(--c-gray);
}

/* ==========================================
   ETİKET + GİRDİ
   ========================================== */
.tema-form__etiket {
  display: block;
  font-size: .8125rem;
  font-weight: var(--fw-semibold);
  color: var(--c-dark);
  margin-bottom: .375rem;
  letter-spacing: .01em;
}

.tema-form__yildiz {
  color: var(--c-danger);
  font-weight: var(--fw-bold);
}

.tema-form__girdi {
  display: block;
  width: 100%;
  font-family: inherit;
  font-size: .9375rem;
  font-weight: var(--fw-normal);
  color: var(--c-text);
  background: var(--c-white);
  border: 1.5px solid var(--c-gray-light);
  border-radius: var(--radius-md);
  padding: .6875rem .875rem;
  line-height: 1.45;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
  -webkit-appearance: none;
  appearance: none;
}

.tema-form__girdi::placeholder {
  color: var(--c-gray);
  opacity: .75;
}

.tema-form__girdi:hover:not(:disabled) {
  border-color: var(--c-gray);
}

.tema-form__girdi:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .18);                         /* fallback (tema --primary-rgb) */
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-primary) 18%, transparent); /* tema paletiyle uyumlu */
}

.tema-form__girdi:disabled {
  background: var(--c-light);
  color: var(--c-gray);
  cursor: not-allowed;
}

/* Seçim kutusu — yerel ok işareti (harici varlık YOK, inline SVG) */
.tema-form__secim {
  padding-right: 2.25rem;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2364748b'%3E%3Cpath d='M8 11.5 3.5 7h9z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  background-size: 14px 14px;
  cursor: pointer;
}

.tema-form__metin {
  min-height: 7rem;
  resize: vertical;
  line-height: 1.6;
}

/* Tarih girdisi — mobilde iOS'un kendi yüksekliğini kırpmasını engelle */
.tema-form__girdi[type="date"] {
  min-height: 2.875rem;
}

/* ==========================================
   İPUCU + ALAN HATASI
   ========================================== */
.tema-form__ipucu {
  margin: .375rem 0 0;
  font-size: .75rem;
  line-height: 1.5;
  color: var(--c-gray);
}

.tema-form__hata {
  margin: .375rem 0 0;
  font-size: .75rem;
  line-height: 1.5;
  font-weight: var(--fw-medium);
  color: var(--c-danger);
}

.tema-form__hata[hidden] {
  display: none;
}

.tema-form__alan--hatali .tema-form__girdi {
  border-color: var(--c-danger);
  background: var(--c-danger-bg);
}

.tema-form__alan--hatali .tema-form__girdi:focus {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, .16);
}

.tema-form__alan--hatali .tema-form__etiket,
.tema-form__alan--hatali .tema-form__onay-metin {
  color: var(--c-danger-dark);
}

/* ==========================================
   ONAY KUTUSU (KVKK)
   ========================================== */
.tema-form__alan--onay {
  margin-top: .25rem;
}

.tema-form__onay {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  cursor: pointer;
  user-select: none;
}

.tema-form__kutu {
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: .1875rem;
  accent-color: var(--c-primary);
  cursor: pointer;
}

.tema-form__onay-metin {
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--c-gray);
}

.tema-form__onay-metin a {
  color: var(--c-primary);
  font-weight: var(--fw-semibold);
  text-decoration: underline !important;
  text-underline-offset: 2px;
}

.tema-form__onay-metin a:hover {
  color: var(--c-primary-dark);
}

/* ==========================================
   BAL KÜPÜ (HONEYPOT) — GÖRÜNMEZ
   ------------------------------------------
   display:none KULLANILMAZ: bazı botlar gizli alanı atlamak için
   computed style'a bakar. Ekran dışına taşınır + erişilebilirlik
   ağacından çıkarılır (aria-hidden + tabindex=-1 markup'ta).
   ========================================== */
.tema-form__kupu {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ==========================================
   GÜVENLİK DOĞRULAMASI (CLOUDFLARE TURNSTILE)
   ------------------------------------------
   İşaretleme: core/form-alan.php → formTurnstile()
   Widget'ın kendisi Cloudflare'in <iframe>'idir; ÖLÇÜSÜNE KARIŞILMAZ
   (yeniden boyutlandırma denemeleri iframe'i kırpar). Yapılan tek şey
   çevresine tema diliyle bir plaka koymak ve TAŞMAYI ENGELLEMEK.
   ========================================== */
.tema-form__guvenlik {
  margin-top: 1.25rem;
  padding: .875rem 1rem 1rem;
  border: 1px solid var(--c-gray-light);
  border-radius: var(--radius-md);
  background: var(--c-light);
  min-width: 0;
}

.tema-form__guvenlik-baslik {
  display: flex;
  align-items: center;
  gap: .4375rem;
  margin: 0 0 .625rem;
  font-size: .8125rem;
  font-weight: var(--fw-semibold);
  color: var(--c-dark);
  letter-spacing: .01em;
}

.tema-form__guvenlik-baslik i {
  color: var(--c-primary);
  font-size: .875rem;
}

/* data-size="flexible" widget'ı kapsayıcı genişliğini alır ama 300px'in ALTINA
   İNEMEZ (Cloudflare'in alt sınırı). Emniyet kemeri: kapsayıcı 300px'ten darsa
   taşma WIDGET'IN İÇİNDE kaydırılır — sayfa gövdesi asla yana kaymaz. */
.tema-form__guvenlik .cf-turnstile {
  max-width: 100%;
  overflow-x: auto;
}

.tema-form__guvenlik .cf-turnstile iframe {
  max-width: 100%;
}

/* 390px'lik telefonda ÖLÇÜLDÜ (2026-07-28): plakanın iç genişliği 282px kalıyordu,
   widget 300px istiyordu → içeride kaydırma çubuğu çıkıyor ve Cloudflare logosu
   kırpılıyordu. Çözüm PLAKAYI genişletmektir, widget'ı değil: Turnstile çizim
   ANINDA kapsayıcının genişliğini ölçüp .cf-turnstile'a SATIR İÇİ width yazar —
   sonradan verilen bir margin/width kuralı o inline değeri yenemez. Plaka kartın
   iç boşluğuna hafifçe taşar (kart 20px, taşma 8px → hâlâ 12px kenar boşluğu). */
@media (max-width: 420px) {
  .tema-form__guvenlik {
    margin-left: -.5rem;
    margin-right: -.5rem;
    padding-left: .75rem;
    padding-right: .75rem;
  }
}

/* Hata durumunda plaka kırmızıya döner — widget iframe'ine dokunulmadan
   alanın hatalı olduğu görülür (form.js .tema-form__alan--hatali ekler). */
.tema-form__guvenlik.tema-form__alan--hatali {
  border-color: var(--c-danger);
  background: var(--c-danger-bg);
}

.tema-form__guvenlik.tema-form__alan--hatali .tema-form__guvenlik-baslik,
.tema-form__guvenlik.tema-form__alan--hatali .tema-form__guvenlik-baslik i {
  color: var(--c-danger-dark);
}

/* Koyu tema tercihi: widget data-theme="auto" ile kendini koyultur. Plaka da
   koyulmazsa beyaz kartın ortasında yamalı bir kutu kalırdı. Sitenin geri
   kalanı açık kalır — bu blok bilinçli bir "koyu iç panel"dir. */
@media (prefers-color-scheme: dark) {
  .tema-form__guvenlik {
    border-color: var(--c-text);
    background: var(--c-dark);
  }

  .tema-form__guvenlik-baslik {
    color: var(--c-light);
  }

  .tema-form__guvenlik .tema-form__ipucu {
    color: var(--c-gray);
  }

  .tema-form__guvenlik.tema-form__alan--hatali {
    border-color: var(--c-danger-border);
    background: var(--c-danger-bg-koyu);
  }

  .tema-form__guvenlik.tema-form__alan--hatali .tema-form__guvenlik-baslik,
  .tema-form__guvenlik.tema-form__alan--hatali .tema-form__guvenlik-baslik i {
    color: var(--c-danger-light);
  }

  .tema-form__guvenlik .tema-form__hata {
    color: var(--c-danger-light);
  }
}

/* ==========================================
   DURUM KUTUSU
   ========================================== */
.tema-form__durum {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  margin-top: 1rem;
  padding: .875rem 1rem;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-size: .875rem;
  line-height: 1.55;
}

.tema-form__durum[hidden] {
  display: none;
}

.tema-form__durum i {
  flex-shrink: 0;
  margin-top: .1875rem;
  font-size: 1rem;
}

.tema-form__durum div {
  display: flex;
  flex-direction: column;
  gap: .125rem;
  min-width: 0;
}

.tema-form__durum strong {
  font-weight: var(--fw-semibold);
}

.tema-form__durum--basari {
  background: var(--c-success-bg);
  border-color: var(--c-success-cerceve);
  color: var(--c-success-metin);
}

.tema-form__durum--hata {
  background: var(--c-danger-bg);
  border-color: var(--c-danger-cerceve);
  color: var(--c-danger-metin);
}

.tema-form__durum--bilgi {
  background: var(--c-primary-light);
  border-color: rgba(var(--primary-rgb), .25);                         /* fallback (tema --primary-rgb) */
  border-color: color-mix(in srgb, var(--c-primary) 25%, transparent); /* tema paletiyle uyumlu */
  color: var(--c-primary-dark);
}

/* ==========================================
   AKSİYON (GÖNDER)
   ========================================== */
.tema-form__aksiyon {
  margin-top: 1.25rem;
}

.tema-form__gonder {
  width: 100%;
  justify-content: center;
  gap: .5rem;
}

.tema-form__gonder:disabled {
  opacity: .6;
  cursor: progress;
}

.tema-form__gonder--calisiyor i {
  animation: temaFormDon 1s linear infinite;
}

@keyframes temaFormDon {
  to { transform: rotate(360deg); }
}

.tema-form__not {
  margin: .625rem 0 0;
  font-size: .75rem;
  line-height: 1.55;
  color: var(--c-gray);
  text-align: center;
}

/* ==========================================
   FORM KARTI (sayfa yerleşiminde kullanılan kabuk)
   ========================================== */
.form-kart {
  background: var(--c-white);
  border: 1px solid var(--c-gray-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 1.25rem;
}

.form-kart__baslik {
  font-size: 1.125rem;
  font-weight: var(--fw-extrabold);
  color: var(--c-dark);
  margin-bottom: .25rem;
}

.form-kart__ozet {
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--c-gray);
  margin-bottom: 1.25rem;
}

/* ==========================================
   SAYFA YERLEŞİMİ — form sayfaları (bu projede İK başvuru formu)
   ------------------------------------------
   ⚠ .page-hero kuralları BU DOSYADA YOK: kaynakta sayfa-hero.css'e taşınmıştı
     (2026-07-28); bu projede sayfa-hero.css portlanmadı, hero temanın main.css
     `.page-hero` stilini kullanır (bkz. ik-token.css başlığı).
   ========================================== */
.form-sayfa {
  padding: 2rem 0 3rem;
  background: var(--c-light);
}

.form-sayfa__izgara {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.form-sayfa__ana {
  min-width: 0;
}

.form-sayfa__yan {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

/* ---------- Yan sütun kartları ---------- */
.form-yan-kart {
  background: var(--c-white);
  border: 1px solid var(--c-gray-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 1.25rem;
}

.form-yan-kart--vurgu {
  background: var(--c-primary-light);
  border-color: transparent;
}

.form-yan-kart__baslik {
  font-size: 1rem;
  font-weight: var(--fw-extrabold);
  color: var(--c-dark);
  margin-bottom: .5rem;
}

.form-yan-kart__ozet {
  font-size: .8125rem;
  line-height: 1.65;
  color: var(--c-gray);
  margin-bottom: 1rem;
}

.form-yan-kart .btn {
  width: 100%;
  justify-content: center;
}

/* ---------- Süreç adımları ---------- */
.adim-listesi {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: adim;
}

.adim-listesi__oge {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
}

.adim-listesi__no {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--c-primary);
  color: var(--c-white);
  font-size: .8125rem;
  font-weight: var(--fw-bold);
}

.adim-listesi__baslik {
  display: block;
  font-size: .875rem;
  font-weight: var(--fw-semibold);
  color: var(--c-dark);
  margin-bottom: .125rem;
}

.adim-listesi__metin {
  margin: 0;
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--c-gray);
}

/* ---------- İletişim satırları (yan sütun) ---------- */
.iletisim-satirlari {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.iletisim-satirlari li {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  font-size: .875rem;
  line-height: 1.55;
  color: var(--c-text);
}

.iletisim-satirlari i {
  flex-shrink: 0;
  margin-top: .1875rem;
  width: 1rem;
  text-align: center;
  color: var(--c-primary);
}

.iletisim-satirlari a {
  color: var(--c-text);
  font-weight: var(--fw-medium);
  word-break: break-word;
}

.iletisim-satirlari a:hover {
  color: var(--c-primary);
}

/* ---------- İletişim bilgi şeridi ----------
   Kaynaktan (simyakoleji kampüs iletişim sayfası) gelen blok; bu projede
   `.iletisim-serit` basan sayfa YOK (kural etkisiz, gövde birebirliği için duruyor). */
.iletisim-serit {
  padding: 1.75rem 0 .5rem;
  background: var(--c-white);
}

.iletisim-serit__izgara {
  display: grid;
  grid-template-columns: 1fr;
  gap: .875rem;
}

/* Sağ sütundaki "Genel Merkez" kartında DAİMA tek sütun: aşağıdaki medya
   sorguları şeridi 2 ve 4 sütuna çıkarıyor; 20.5rem'lik kolonda bu, kartları
   okunamayacak kadar daraltırdı. İki sınıflı seçici tek sınıflı medya
   kurallarını özgüllükle yener. */
.iletisim-yan-ust .iletisim-serit__izgara {
  grid-template-columns: 1fr;
  gap: .625rem;
}

.iletisim-kart {
  display: flex;
  align-items: flex-start;
  gap: .875rem;
  padding: 1rem;
  border: 1px solid var(--c-gray-light);
  border-radius: var(--radius-md);
  background: var(--c-white);
  transition: box-shadow var(--transition), border-color var(--transition);
}

.iletisim-kart:hover {
  border-color: var(--c-primary);
  box-shadow: var(--shadow-md);
}

.iletisim-kart__ikon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-md);
  background: var(--c-primary-light);
  color: var(--c-primary);
  font-size: 1rem;
}

.iletisim-kart__govde {
  min-width: 0;
}

.iletisim-kart__baslik {
  display: block;
  font-size: .75rem;
  font-weight: var(--fw-semibold);
  color: var(--c-gray);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: .1875rem;
}

.iletisim-kart__metin {
  display: block;
  font-size: .875rem;
  line-height: 1.55;
  font-weight: var(--fw-medium);
  color: var(--c-dark);
  word-break: break-word;
}

a.iletisim-kart__metin:hover {
  color: var(--c-primary);
}

/* ---------- Sosyal şerit ---------- */
.sosyal-serit {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.sosyal-serit__baglanti {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--c-primary-light);
  color: var(--c-primary);
  font-size: .9375rem;
  transition: background var(--transition), color var(--transition), transform var(--transition);
}

.sosyal-serit__baglanti:hover {
  background: var(--c-primary);
  color: var(--c-white);
  transform: translateY(-2px);
}

/* ==========================================
   TABLET / MASAÜSTÜ
   ========================================== */
@media (min-width: 768px) {
  .tema-form__izgara {
    gap: 1.125rem 1.25rem;
  }

  .iletisim-serit__izgara {
    grid-template-columns: repeat(2, 1fr);
  }

  .form-sayfa {
    padding: 2.5rem 0 3.5rem;
  }

  .tema-form__alan--3 { grid-column: span 6; }
  .tema-form__alan--4 { grid-column: span 6; }
  .tema-form__alan--6 { grid-column: span 6; }

  .tema-form__gonder {
    width: auto;
    min-width: 15rem;
  }

  .tema-form__not {
    text-align: left;
  }

  .form-kart {
    padding: 1.75rem;
  }

  .form-kart__baslik {
    font-size: 1.25rem;
  }
}

@media (min-width: 992px) {
  .tema-form__alan--3 { grid-column: span 3; }
  .tema-form__alan--4 { grid-column: span 4; }

  .form-kart {
    padding: 2rem;
  }

  /* Form solda, yan sütun sağda */
  .form-sayfa__izgara {
    grid-template-columns: minmax(0, 1fr) 20.5rem;
    gap: 2rem;
    align-items: start;
  }

  .iletisim-serit__izgara {
    grid-template-columns: repeat(4, 1fr);
  }

  /* İLETİŞİM SAYFASI — iki satırlı sağ sütun.
     "Genel Merkez" kartı KAYNAKTA formdan önce gelir (mobilde üstte kalsın
     diye); geniş ekranda buradan sağ sütunun 1. satırına oturtulur, form iki
     satır boyunca uzanır, aside 2. satıra iner. row-gap kartlar arası 1rem'lik
     ritmi korur — sütun boşluğu 2rem olarak kalır. */
  /* Satır yükseklikleri: 1. satır içeriği kadar, 2. satır ESNEK.
     İki satıra yayılan formun yüksekliği, satırlar "auto" iken ikisine birden
     paylaştırılıyor ve 1. satırı şişirip kartlar arasında 59px boşluk
     bırakıyordu (ölçüldü). 2. satır 1fr olunca fazlalık oraya akıyor ve
     boşluk tam 16px'e (row-gap) iniyor. */
  .form-sayfa--iletisim .form-sayfa__izgara {
    grid-template-rows: min-content 1fr;
    row-gap: 1rem;
  }
  .form-sayfa--iletisim .iletisim-yan-ust    { grid-column: 2; grid-row: 1; }
  .form-sayfa--iletisim .form-sayfa__ana     { grid-column: 1; grid-row: 1 / span 2; }
  .form-sayfa--iletisim .form-sayfa__yan     { grid-column: 2; grid-row: 2; }
  /* .page-hero basamakları → sayfa-hero.css */
}

@media (min-width: 1200px) {
  .form-sayfa__izgara {
    grid-template-columns: minmax(0, 1fr) 22rem;
    gap: 2.25rem;
  }
}

/* Hareket azaltma tercihi */
@media (prefers-reduced-motion: reduce) {
  .tema-form__gonder--calisiyor i {
    animation: none;
  }
}

/* Çapa vurgusu — /iletisim#is-basvuru ile gelindiğinde seçilen alanı geçici
   olarak işaretler (iletisim-capa.js 2,4 sn sonra kaldırır). Odak vermek
   yerine görsel işaret tercih edildi: ekran okuyucuda yanlışlıkla "form
   başladı" izlenimi doğmasın. */
.tema-form__alan--capa {
  border-radius: var(--radius-md);
  box-shadow: 0 0 0 3px var(--c-primary-light);
  transition: box-shadow .3s ease;
}

@media (prefers-reduced-motion: reduce) {
  .tema-form__alan--capa { transition: none; }
}

/* ==========================================================================
   FORM ALT ŞERİDİ — SOLDA doğrulama, SAĞDA gönder düğmesi
   --------------------------------------------------------------------------
   Kullanıcı isteği 2026-07-28: "solda doğrulama sağda gönderme butonu hizası
   olsun, diğer formlar için de öyle yap, ortalı olsun".

   Sarmalayıcıyı form-alan.php basar (formTurnstile açar, formGonderDugmesi
   kapatır) → beş formun HEPSİ tek noktadan bu düzene geçer.

   ⚠ align-items:flex-end: Turnstile plakası düğmeden YÜKSEK. Üstten hizalansaydı
     düğme havada kalırdı; alt kenarlar hizalanınca "aynı satır" hissi doğuyor.
   ⚠ Durum kutusu order:-1 ile ÜSTE alınır: hata/başarı mesajı düğmenin altında
     kalırsa dar ekranda ekran dışında doğar ve kullanıcı neden gönderilmediğini
     göremez.
   ========================================================================== */
.tema-form__alt {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.25rem;
}

/* Doğrulama plakası esner; 20rem altına inince alt satıra düşer. */
.tema-form__alt .tema-form__guvenlik {
  flex: 1 1 20rem;
  margin-top: 0;
  min-width: 0;
}

/* Durum kutusu TAM GENİŞLİK ve şeridin EN ÜSTÜNDE. */
.tema-form__alt .tema-form__durum {
  order: -1;
  flex: 1 1 100%;
  margin-top: 0;
}

.tema-form__alt .tema-form__aksiyon {
  flex: 0 1 auto;
  margin-top: 0;
  text-align: center;
}

/* Düğme altı notu ŞERİT DÜZENİNDE sınırlanır. Sınırsız bırakılırsa uzun not
   (iş başvurusunda ~530px) gönder bloğunu şişirir, doğrulama plakasına yer
   kalmaz ve blok alt satıra düşer — hiza formdan forma değişirdi. */
.tema-form__alt .tema-form__not {
  max-width: 22rem;
  margin-inline: auto;
}

/* Şerit düzeninde düğme İÇERİĞİ kadar geniştir (tam genişlik değil): yanındaki
   plakayla birlikte "solda doğrula / sağda gönder" ritmini kurar. */
.tema-form__alt .tema-form__gonder {
  width: auto;
  min-width: 12rem;
}

/* Dar ekran: alt alta ve ORTALI — yan yana 300px'lik widget + düğme sığmaz. */
@media (max-width: 640px) {
  .tema-form__alt { gap: .875rem; }
  .tema-form__alt .tema-form__guvenlik { flex-basis: 100%; }
  .tema-form__alt .tema-form__aksiyon  { flex-basis: 100%; }
  .tema-form__alt .tema-form__gonder   { width: 100%; }
}

/* ==========================================================================
   TEMA UYUM KATMANI — gönder şeridi (bogazicivipkurs'ta 2026-07-30 kullanıcı isteğiyle
   yazıldı, İK portuyla bu projeye geldi)
   --------------------------------------------------------------------------
   Site genelinde iletişim/franchise formlarındaki şerit düzeni esas alınır:
   SOLDA hap (pill) biçimli, tema renginde (--c-primary) gönder düğmesi, SAĞDA sade Turnstile widget'ı,
   ikisi TEK SATIRDA. Kaynak (simyakoleji) düzeni doğrulamayı çerçeveli bir
   "Güvenlik doğrulaması" plakası içinde ve düğmeyi ALTTA ortalanmış gösterir;
   burada o plaka sadeleştirilir — widget zaten kendi durumunu (✓ Başarılı)
   çiziyor, ek başlık/ipucu görsel gürültü yaratıyordu.

   ⚠ form.css gövdesi (yukarısı) kaynaktan BİREBİR'dir; bu blok yalnızca
     bu temaya özgü sunum farkını kapatır — güncelleme gelirse gövde
     değiştirilip bu blok korunur.
   ========================================================================== */
.tema-form__alt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

/* Gönder düğmesi — SOLDA */
.tema-form__alt .tema-form__aksiyon {
  order: 1;
  flex: 0 0 auto;
  margin-right: auto;
  text-align: left;
}

/* Turnstile — SAĞDA, plakasız */
.tema-form__alt .tema-form__guvenlik {
  order: 2;
  flex: 0 0 auto;
  margin-top: 0;
  padding: 0;
  border: none;
  background: none;
}

.tema-form__alt .tema-form__guvenlik-baslik,
.tema-form__alt .tema-form__guvenlik .tema-form__ipucu {
  display: none;
}

/* Plaka burada ZEMİNSİZ → Turnstile hata metni beyaz .form-kart üstünde durur. Yukarıdaki
   koyu OS teması bloğu onu koyu plaka varsayıp açık pembeye (--c-danger-light) çeviriyordu:
   beyaz üstünde kontrast ~1.9:1. Şeritte gövdedeki normal kırmızıya dönülür (açık temada
   değişiklik yok). (2026-09-27, bulgu T42) */
.tema-form__alt .tema-form__guvenlik .tema-form__hata {
  color: var(--c-danger);
}

/* Hap düğme — .btn-submit (iletisim.css) ile aynı ölçüler */
.tema-form__gonder {
  width: auto;
  border-radius: 50px;
  padding: .75rem 2rem;
}

.tema-form__aksiyon .tema-form__not {
  margin: .5rem 0 0;
  text-align: left;
  max-width: 34ch;
}

/* Dar ekran: alt alta — doğrulama üstte, tam genişlik düğme altta */
@media (max-width: 575.98px) {
  .tema-form__alt {
    flex-direction: column;
    align-items: stretch;
  }
  .tema-form__alt .tema-form__aksiyon { order: 2; margin-right: 0; }
  .tema-form__alt .tema-form__guvenlik { order: 1; }
  .tema-form__gonder { width: 100%; justify-content: center; }
  .tema-form__aksiyon .tema-form__not { max-width: none; }
}