/* ═══════════════════════════════════════════════════════════════════════
   İLAN VER SİHİRBAZI

   KURUCU: "ilan ver alanı çok kıymetli, diğer alanlar gibi bu oldu
   bittiye getiremeyiz, bunu kurumsal seviyede yapacağız... fotoğraflara
   uygun, sıradan olmasın asla."

   YAPI ONLARIN, KİMLİK BİZİM.
   Kurucunun paylaştığı Emlakjet ekranlarındaki YAPI birebir alındı:
     · üstte 1-2-3-4-5-6 adım çubuğu, geçilen adım işaretli
     · kart içinde başlık + tek cümlelik açıklama
     · iki sütunlu seçilebilir kutular, sağda seçim dairesi
     · seçili kutu: açık zemin + renkli çerçeve + dolu tik
     · kademeli açılma: kategori seçilmeden ilan tipi görünmez
     · altta sabit "← Geri / Devam Et →" şeridi
   Renk rakibin yeşili değil, EvRotası yeşili ve altını. Aynı karar
   mobil panel prototipinde de verilmişti: yapının aynısı, kimliğin
   bizimki.

   MOBİL ÖNCE: kurucu ekranları telefondan gönderdi. Tek sütun taban,
   geniş ekranda iki sütuna açılıyor.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══ DÖRDÜNCÜ PALET KAPANDI — FAZ 3, 2026-08-20 ═══════════════════
   Bu blok prototipin paletini ELLE KOPYALAMIŞTI. Değerler doğruydu ama
   kaynak ikinci kez yazılmış oluyordu: merkez güncellenince bu sayfa
   olduğu yerde kalırdı.

   Aynı hata bu projede DÖRT kez çıktı:
     white-theme (koyu) · panel-surface · kurumsal · burası

   Artık hepsi merkezden (white-theme-override.css). Adlar kaldı;
   yüzlerce kural onları kullanıyor, hepsini yeniden yazmak çalışan
   formu kırma riski.

   ⚠ --iv-pri PROTOTİPİN KOYU TONU. Merkezde iki ton var:
     --pri      #124450  (28 sayfanın marka rengi)
     --pri-koyu #0E3B34  (prototipin başlık zemini)
   Karıştırılmasın diye ikisi de adıyla bağlandı. */
:root {
  --iv-ink: var(--text);
  --iv-kum: var(--muted);
  --iv-acik: var(--muted);
  --iv-pri: var(--pri-koyu);
  --iv-pri2: var(--pri);
  --iv-yesil: var(--ok);
  --iv-yesil-acik: #E7F1ED;   /* prototiple aynı değer — rozet zemini */
  --iv-altin: var(--gold);
  --iv-cizgi: var(--line);
  --iv-cizgi2: var(--cizgi2);
  --iv-zemin: var(--bg);
  --iv-yumusak: var(--yumusak);
}

/* Kutu modeli: dolgu genişliğe DAHİL. Yoksa tam genişlikli düğme
   dolgusu kadar taşıyor — modaldaki "Panele dön" düğmesi karttan
   taşmıştı, ölçüldü. */
.iv-govde *, .iv-govde *::before, .iv-govde *::after { box-sizing: border-box; }

.iv-govde {
  margin: 0;
  background: var(--iv-yumusak);
  color: var(--iv-ink);
  font-family: Inter, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}
.iv-govde h1, .iv-govde h2, .iv-govde h3 {
  font-family: "Source Serif 4", Georgia, serif;
  font-weight: 600;
  letter-spacing: -0.3px;
  margin: 0;
}

/* ── ÜST ŞERİT ─────────────────────────────────────────────────────
   Marka + "kaçıncı ilan" değil, nerede olduğun. Ekran görüntüsündeki
   kırıntı yolu (Yönetim Paneli › İlanlarım › İlan Ver) bizde panele
   dönüş bağlantısı olarak duruyor. */
.iv-ust {
  background: var(--iv-zemin);
  border-bottom: 1px solid var(--iv-cizgi);
  padding: 12px 16px;
  position: sticky;
  top: 0;
  z-index: 20;
}
.iv-kap { max-width: 880px; margin: 0 auto; }
.iv-yol {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--iv-kum);
  margin-bottom: 12px;
}
.iv-yol a { color: var(--iv-pri2); text-decoration: none; font-weight: 600; }
.iv-yol span { color: var(--iv-acik); }

/* ── ADIM ÇUBUĞU ───────────────────────────────────────────────────
   Altı daire, aralarında çizgi. Geçilen adım doldurulur, bulunulan
   adım çerçeveli, gelecek adımlar soluk. Ekrandaki kalıbın aynısı. */
.iv-adimlar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}
.iv-adim { display: flex; align-items: center; flex: 1; min-width: 0; }
.iv-adim:last-child { flex: 0 0 auto; }
.iv-adim b {
  width: 30px; height: 30px; flex: none;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: Inter, sans-serif;
  font-size: 13px; font-weight: 700;
  background: var(--iv-cizgi2);
  color: var(--iv-acik);
  border: 2px solid transparent;
  transition: background .15s, color .15s, border-color .15s;
}
.iv-adim i {
  flex: 1; height: 2px; min-width: 8px;
  background: var(--iv-cizgi);
  margin: 0 4px;
}
/* Bulunulan adım: çerçeveli ve okunur. */
.iv-adim.iv-simdi b {
  background: var(--iv-zemin);
  color: var(--iv-pri);
  border-color: var(--iv-yesil);
}
/* Geçilen adım: dolu. */
.iv-adim.iv-gecti b { background: var(--iv-pri); color: #fff; }
.iv-adim.iv-gecti i { background: var(--iv-yesil); }
.iv-adim-ad {
  display: none;
  font-size: 12px; font-weight: 600; color: var(--iv-kum);
  margin-left: 8px; white-space: nowrap;
}
@media (min-width: 720px) {
  .iv-adim.iv-simdi .iv-adim-ad { display: inline; color: var(--iv-pri); }
}

/* ── KART ──────────────────────────────────────────────────────────
   Ekrandaki gibi: beyaz kart, başlık, tek cümlelik açıklama. */
.iv-icerik { padding: 18px 16px 120px; }
.iv-kart {
  max-width: 880px; margin: 0 auto;
  background: var(--iv-zemin);
  border: 1px solid var(--iv-cizgi);
  border-radius: 14px;
  padding: 20px 18px;
}
.iv-kart > h1 { font-size: 22px; margin-bottom: 6px; }
.iv-kart-alt { font-size: 14px; color: var(--iv-kum); line-height: 1.55; margin: 0 0 20px; }

.iv-bolum { margin-top: 22px; }
.iv-bolum:first-of-type { margin-top: 0; }
.iv-bolum > h2 { font-size: 16px; margin-bottom: 10px; }
.iv-bolum-not { font-size: 13px; color: var(--iv-kum); margin: -4px 0 10px; line-height: 1.5; }

/* ── SEÇİLEBİLİR KUTULAR ───────────────────────────────────────────
   İki sütun, sağda seçim dairesi. Seçili: açık yeşil zemin, yeşil
   çerçeve, dolu tik. Ekran görüntüsündeki davranışın aynısı.

   <label> + gizli radio kullanılıyor: klavyeyle gezilebilir ve ekran
   okuyucu ne seçildiğini söyler. Sadece <div> ile yapılsaydı
   erişilebilirlik giderdi. */
.iv-secenekler {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 560px) {
  .iv-secenekler { grid-template-columns: 1fr 1fr; }
}
.iv-sec {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--iv-cizgi);
  border-radius: 12px;
  background: var(--iv-zemin);
  padding: 14px 14px;
  min-height: 58px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.iv-sec:hover { border-color: var(--iv-yesil); }
.iv-sec input { position: absolute; opacity: 0; width: 0; height: 0; }
.iv-sec-ad { flex: 1; font-size: 15px; font-weight: 500; line-height: 1.3; }
.iv-sec-daire {
  width: 24px; height: 24px; flex: none;
  border-radius: 50%;
  border: 1.5px solid var(--iv-cizgi);
  display: flex; align-items: center; justify-content: center;
  background: var(--iv-zemin);
}
.iv-sec-daire svg { width: 14px; height: 14px; stroke: #fff; fill: none; stroke-width: 3; opacity: 0; }
.iv-sec input:checked ~ .iv-sec-daire { background: var(--iv-yesil); border-color: var(--iv-yesil); }
.iv-sec input:checked ~ .iv-sec-daire svg { opacity: 1; }
.iv-sec:has(input:checked) { background: var(--iv-yesil-acik); border-color: var(--iv-yesil); }
/* :has desteklemeyen eski tarayıcılar için JS aynı sınıfı koyar. */
.iv-sec.iv-secili { background: var(--iv-yesil-acik); border-color: var(--iv-yesil); }
.iv-sec input:focus-visible ~ .iv-sec-daire { outline: 2px solid var(--iv-pri2); outline-offset: 2px; }

/* ── ALAN IZGARASI ─────────────────────────────────────────────────── */
.iv-alanlar { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 560px) { .iv-alanlar { grid-template-columns: 1fr 1fr; } }
.iv-alan { display: flex; flex-direction: column; gap: 6px; }
.iv-alan.iv-genis { grid-column: 1 / -1; }
.iv-alan > span { font-size: 13.5px; font-weight: 600; }
.iv-alan .iv-zorunlu { color: var(--iv-altin); }

/* ── EKSİK ZORUNLU ALAN ────────────────────────────────────────────
   Tek satırlık tepe uyarısı 20 alanlık formda hangi alanın eksik
   olduğunu söylemiyordu. Uyarı artık alanın KENDİ ALTINDA duruyor ve
   çerçevesi kırmızıya dönüyor — rakip formlardaki davranışın aynısı. */
.iv-alan-eksik {
  font-size: 12.5px;
  font-weight: 600;
  color: #A43A2A;
}
.iv-alan-hatali > span:first-child { color: #A43A2A; }
.iv-alan-hatali input[type="text"],
.iv-alan-hatali input[type="tel"],
.iv-alan-hatali input[type="number"],
.iv-alan-hatali select,
.iv-alan-hatali textarea {
  border-color: #A43A2A;
  background: #FDF3F1;
}
.iv-alan input[type="text"],
.iv-alan input[type="tel"],
.iv-alan input[type="number"],
.iv-alan select,
.iv-alan textarea {
  font-family: inherit;
  font-size: 15px;
  color: var(--iv-ink);
  background: var(--iv-zemin);
  border: 1px solid var(--iv-cizgi);
  border-radius: 10px;
  padding: 12px 12px;
  min-height: 48px;
  width: 100%;
}
.iv-alan textarea { min-height: 110px; resize: vertical; }
.iv-alan input:focus, .iv-alan select:focus, .iv-alan textarea:focus {
  outline: 2px solid var(--iv-pri2); outline-offset: 1px; border-color: var(--iv-pri2);
}
.iv-alan-ipucu { font-size: 12.5px; color: var(--iv-acik); line-height: 1.45; }

/* Çoklu seçim (cephe, manzara, altyapı gibi) — çipler. */
.iv-cipler { display: flex; flex-wrap: wrap; gap: 8px; }
.iv-cip {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--iv-cizgi); border-radius: 999px;
  padding: 0 14px; min-height: 44px;
  font-size: 14px; cursor: pointer; background: var(--iv-zemin);
}
.iv-cip input { position: absolute; opacity: 0; width: 0; height: 0; }
.iv-cip.iv-secili { background: var(--iv-yesil-acik); border-color: var(--iv-yesil); font-weight: 600; }

/* Onay kutuları */
.iv-onaylar { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 560px) { .iv-onaylar { grid-template-columns: 1fr 1fr; } }
.iv-onay {
  display: flex; align-items: center; gap: 10px;
  min-height: 48px; font-size: 15px; cursor: pointer;
  border: 1px solid var(--iv-cizgi); border-radius: 10px; padding: 0 12px;
}
.iv-onay input { width: 20px; height: 20px; }
.iv-onay.iv-secili { background: var(--iv-yesil-acik); border-color: var(--iv-yesil); }

/* ── FOTOĞRAF ──────────────────────────────────────────────────────── */
.iv-foto-birak {
  border: 2px dashed var(--iv-cizgi);
  border-radius: 14px;
  padding: 26px 18px;
  text-align: center;
  background: var(--iv-yumusak);
}
.iv-foto-birak b { display: block; font-size: 15px; margin-bottom: 6px; }
.iv-foto-birak p { font-size: 13px; color: var(--iv-kum); margin: 0 0 14px; line-height: 1.5; }
.iv-foto-sec {
  display: inline-flex; align-items: center; min-height: 46px;
  padding: 0 20px; border-radius: 10px; cursor: pointer;
  background: var(--iv-pri); color: #fff; font-weight: 600; font-size: 15px;
}
.iv-foto-sec input { display: none; }
.iv-onizleme { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; margin-top: 14px; }
.iv-onizleme figure { margin: 0; position: relative; }
.iv-onizleme img { width: 100%; height: 84px; object-fit: cover; border-radius: 10px; display: block; border: 1px solid var(--iv-cizgi); }
.iv-onizleme figcaption { font-size: 11px; color: var(--iv-acik); margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iv-kapak { position: absolute; top: 6px; left: 6px; background: var(--iv-altin); color: #fff; font-size: 10px; font-weight: 700; padding: 3px 7px; border-radius: 5px; }

/* ── ÖZET ──────────────────────────────────────────────────────────── */
.iv-ozet { border: 1px solid var(--iv-cizgi); border-radius: 12px; overflow: hidden; }
.iv-ozet-satir { display: flex; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--iv-cizgi2); font-size: 14px; }
.iv-ozet-satir:last-child { border-bottom: 0; }
.iv-ozet-satir b { flex: 0 0 42%; font-weight: 600; color: var(--iv-kum); }
.iv-ozet-satir span { flex: 1; min-width: 0; word-break: break-word; }

/* ── ALT ŞERİT ─────────────────────────────────────────────────────
   Sabit: uzun formda "Devam Et" aranmasın. */
.iv-alt {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
  background: var(--iv-zemin);
  border-top: 1px solid var(--iv-cizgi);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
}
.iv-alt-kap {
  max-width: 880px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.iv-geri {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: 0; cursor: pointer;
  font-family: inherit; font-size: 15px; font-weight: 600;
  color: var(--iv-pri2); min-height: 48px; padding: 0 6px;
}
.iv-geri[disabled] { opacity: .35; cursor: default; }
.iv-ileri {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--iv-pri); color: #fff; border: 0; border-radius: 10px;
  font-family: inherit; font-size: 15.5px; font-weight: 700;
  min-height: 48px; padding: 0 24px; cursor: pointer;
}
.iv-ileri[disabled] { opacity: .5; cursor: default; }
.iv-hata { color: #B3261E; font-size: 13.5px; margin: 10px auto 0; max-width: 880px; }
.iv-hata.iv-iyi { color: var(--iv-yesil); }

/* ── DOĞRULAMA PERDESİ ─────────────────────────────────────────────
   Ekran görüntüsündeki kalıp: perde + ortada kart + tek düğme.
   Bizde iki kapı var (telefon, e-Devlet), hangisi eksikse o yazılır. */
.iv-perde {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(16, 32, 51, .55);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.iv-perde[hidden] { display: none; }
.iv-modal {
  background: var(--iv-zemin); border-radius: 16px;
  max-width: 420px; width: 100%; padding: 22px 20px;
}
.iv-modal-bas { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.iv-modal-bas .iv-simge {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  background: #FBF3E4; color: #8A6117;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.iv-modal-bas h2 { font-size: 18px; }
.iv-modal p { font-size: 14px; line-height: 1.6; color: var(--iv-kum); margin: 0 0 8px; }
.iv-modal p.iv-vurgu { color: var(--iv-ink); font-weight: 600; }
.iv-modal a.iv-ileri { text-decoration: none; width: 100%; justify-content: center; margin-top: 14px; }

/* ── RESMÎ PORTAL YÖNLENDİRMELERİ ──────────────────────────────────
   Kurucu: "e-Devlet yönlendirme yapacağız, bağlanacak, bu şekilde
   değil." Önceden burada düz bir metin kutusu vardı ve numaranın
   nereden alınacağı yazmıyordu. Artık her belge kendi resmî kaynağına
   götüren bir kart. */
.iv-portallar { display: grid; gap: 14px; margin-top: 4px; }
.iv-portal {
  border: 1px solid var(--iv-cizgi);
  border-radius: 14px;
  padding: 16px;
  background: var(--iv-zemin);
}
.iv-portal-tamam { border-color: var(--iv-yesil); background: #F6FBF8; }
.iv-portal > header { display: flex; gap: 10px; align-items: flex-start; }
.iv-portal-rozet {
  flex: none;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 14px; font-weight: 700;
  background: var(--iv-yumusak); color: var(--iv-kum);
}
.iv-portal-tamam .iv-portal-rozet { background: var(--iv-yesil); color: #fff; }
.iv-portal h3 { margin: 0; font-size: 15px; font-weight: 700; }
.iv-portal-kurum { margin: 2px 0 0; font-size: 12px; color: var(--iv-acik); }
.iv-portal-neden { margin: 10px 0 0; font-size: 13px; color: var(--iv-kum); }
.iv-portal-adim {
  margin: 10px 0 0; padding-left: 20px;
  font-size: 13px; line-height: 1.6; color: var(--iv-ink);
}
.iv-portal-git {
  display: inline-block; margin-top: 12px;
  padding: 11px 16px; min-height: 44px; line-height: 22px;
  border: 1px solid var(--iv-pri); border-radius: 10px;
  background: var(--iv-pri); color: #fff;
  font-size: 14px; font-weight: 700; text-decoration: none;
}
.iv-portal-git:hover, .iv-portal-git:focus-visible { background: var(--iv-yesil); border-color: var(--iv-yesil); }
.iv-portal-not { margin: 8px 0 0; font-size: 12px; color: var(--iv-acik); }
.iv-portal .iv-alan { margin-top: 12px; }
/* e-Devlet şifresi uyarısı gözden kaçmasın. */
.iv-uyari-kutu {
  border: 1px solid #C08A3E; background: #FFF8EC;
  border-radius: 10px; padding: 10px 12px;
}
/* Hedefi olmayan adım: düğme yerine durum. Çalışmayan düğme koymak,
   kullanıcıyı hata sayfasına göndermek demek — bir kez oldu. */
.iv-portal-bekliyor {
  margin: 12px 0 0;
  padding: 11px 13px;
  border: 1px solid #C08A3E;
  background: #FFF8EC;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--iv-ink);
}

/* ═══ EV SAHİBİ ONAY İSTEĞİ ═══════════════════════════════════════
   Danışman numarayı yazar, düğmeye basar; kararı malik kendi verir.
   Düğme <button>, bağlantı kartlarındakiyle aynı görünsün diye
   .iv-portal-git sınıfını paylaşıyor — tarayıcı varsayılan düğme
   biçimlendirmesi (font, kenarlık) o yüzden burada sıfırlanıyor. */
button.iv-portal-git {
  font-family: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
button.iv-portal-git[disabled] { opacity: .6; cursor: progress; }
/* Durum yazısı: SONUÇ görünür olsun, ama renk tek başına anlam
   taşımasın — metin de neyin olduğunu söyler (erişilebilirlik). */
.iv-portal-durum {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--iv-acik);
}
.iv-portal-durum:empty { display: none; }
.iv-portal-durum.iv-portal-iyi {
  padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--iv-yesil); background: #F1F8F2;
  color: var(--iv-ink); font-weight: 600;
}
.iv-portal-durum.iv-portal-kotu {
  padding: 10px 12px; border-radius: 10px;
  border: 1px solid #C0433E; background: #FDF2F1;
  color: var(--iv-ink); font-weight: 600;
}

/* ═══ MOBİL WEB: iOS KENDİLİĞİNDEN YAKINLAŞTIRMASIN ═════════════════
   KURUCU (2026-08-20): "şimdilik sadece web mobil için bunu yap."

   ÖLÇÜLDÜ (375px): form alanlarının yazı boyutu 15px. iOS Safari,
   yazı boyutu 16px'in ALTINDA olan bir alana dokunulduğunda sayfayı
   kendiliğinden yakınlaştırır ve geri uzaklaştırmaz. Danışman telefonda
   "Ev sahibinin cep telefonu" kutusuna basınca form kayıyor, elle
   uzaklaştırması gerekiyor.

   Bu tek karakterlik bir kusur değil, telefonda form doldurmayı
   bozan bir davranış. Masaüstünde 15px kalıyor — orada sorun yok
   ve tasarım değişmesin.

   ⚠ Sistem geneli tek tip tasarım AYRI iş; kurucu "karışıklık yapma,
   onu sonra hepsini birlikte yapacağız" dedi. Buraya yalnız bu
   ekranların mobil kusuru giriyor. */
@media (max-width: 559px) {
  .iv-alan input[type="text"],
  .iv-alan input[type="tel"],
  .iv-alan input[type="number"],
  .iv-alan select,
  .iv-alan textarea {
    font-size: 16px;
  }
}