/* ═══════════════════════════════════════════════════════════════════ İLAN ARAMA — PROTOTİP KURUCU: "ilanları listeleyen arama sayfasını yap, sana attığım fotoğrafları kullan." YAPI REFERANSTAN: kurucunun paylaştığı Sahibinden arama ekranları birebir örnek alındı — · üstte "Arama Sonucu · N sonuç bulundu" başlığı · altında Filtrele | Sırala | Görünüm | Aramayı Kaydet şeridi · kategori kırıntısı: Emlak › Konut › Satılık › Daire · filtre panosu üç blok: SEÇENEKLER / İLAN BİLGİLERİ / DİĞER · her filtre satırı: ad üstte, seçili değer altta ("Tümü") · altta tam genişlik "SONUÇLARI GÖSTER" düğmesi Filtre listesi kategoriye göre değişiyor: konutta oda/ısıtma/kat, arsada imar durumu/ada/parsel/KAKS/gabari — ekranlardaki gibi. KİMLİK BİZİM: renk EvRotası yeşili ve altını, yazı tipimiz. Rakibin mavisi/sarısı kullanılmadı. ⚠ ÖRNEK VERİ: karttaki dört ilan UYDURMADIR ve her birinde "ÖRNEK" mührü var. Prototipin işi düzeni göstermek; gerçek sayfa yalnız ONAYLANMIŞ ve yayınlanabilir ilanları listeleyecek. ═══════════════════════════════════════════════════════════════════ */ /* ═══ MERKEZÎ ADLARI EZİYORDU — FAZ 3, 2026-08-20 ═══════════════════ Bu blok yalnız dördüncü bir palet değildi; merkezî takma adların AYNI ADLARINI yeniden tanımlıyordu (--ink, --pri, --cizgi, --kum, --yumusak, --altin). Yani bu sayfada --pri merkezdekinden BAŞKA bir renkti (#0E3B34 vs #124450) ve bunu kimse görmüyordu. Bir sayfanın merkezî bir jetonu kendine göre değiştirmesi, "renk tek merkezde" kuralını sessizce delmektir. Artık hepsi merkezden. Yalnız bu sayfaya özgü olan --pri2 ve --yesil-acik kaldı; ikisi de merkezdeki bir rolü EZMİYOR. */ :root{ --pri2: var(--pri); --yesil-acik:#E7F1ED; /* prototiple aynı değer — rozet zemini */ } *{box-sizing:border-box} html,body{margin:0;padding:0;background:var(--yumusak);color:var(--ink); font-family:Inter,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-text-size-adjust:100%} h1,h2,h3{font-family:"Source Serif 4",Georgia,serif;font-weight:600;letter-spacing:-.3px;margin:0} .tel{max-width:560px;margin:0 auto;background:var(--yumusak);min-height:100vh;padding-bottom:84px} /* ── ÜST BAŞLIK ───────────────────────────────────────────────────── BEYAZ ZEMİN TUZAĞI — ÖLÇÜLDÜ, GÖRÜNMEZDİ. Burası koyu zemin varsayıyordu (yeşil arka plan + beyaz yazı + beyaz ikon). Ortak beyaz katman ise `header` etiketini `background:#fff !important` ile beyaza zorluyor. Sonuç: zemin beyaz, geri oku BEYAZ → ok görünmüyordu. Tarayıcıda ölçüldü: zemin rgb(255,255,255), ok rengi rgb(255,255,255). Başlık artık beyaz zemine göre yazılıyor: koyu yazı, koyu ikon, alt çizgi. Ortak katmanla kavga etmiyor. (Kurucu emri: ZEMİN BEYAZ.) */ .bas{background:#fff;color:var(--ink);padding:14px 16px 16px;position:sticky;top:0;z-index:20; border-bottom:1px solid var(--cizgi)} .bas-ust{display:flex;align-items:center;gap:12px} .bas-ust svg{width:22px;height:22px;stroke:var(--pri);fill:none;stroke-width:1.8;flex:none} .bas h1{font-size:17px;line-height:1.2} .bas .sayi{display:block;font-size:12.5px;color:var(--kum);margin-top:3px;font-family:Inter,sans-serif} .bas-arac{margin-left:auto;display:flex;gap:14px} /* ── ARAÇ ŞERİDİ ────────────────────────────────────────────────── */ .serit{display:grid;grid-template-columns:repeat(4,1fr);background:var(--zemin); border-bottom:1px solid var(--cizgi);position:sticky;top:74px;z-index:19} .serit label{display:flex;align-items:center;justify-content:center;text-align:center; border-right:1px solid var(--cizgi2);font-size:13px;font-weight:600;color:var(--pri2); min-height:46px;cursor:pointer;padding:0 4px} .serit label:last-child{border-right:0} /* Radio'lar gorunmez; sekme durumunu onlar tutuyor. */ input[name="gorunum"]{position:absolute;opacity:0;pointer-events:none} /* Secili sekme altin cizgiyle isaretlenir. */ #gFiltre:checked ~ .serit label[for="gFiltre"], #gSirala:checked ~ .serit label[for="gSirala"], #gIzgara:checked ~ .serit label[for="gIzgara"], #gKayit:checked ~ .serit label[for="gKayit"]{color:var(--yesil);box-shadow:inset 0 -3px 0 var(--yesil)} /* Panolar: varsayilan kapali, sekmesi secilince acilir. */ .pano,.pano-sirala,.pano-kayit{display:none} #gFiltre:checked ~ .pano{display:block} #gSirala:checked ~ .pano-sirala{display:block} #gKayit:checked ~ .pano-kayit{display:block} /* Filtre/sirala/kayit acikken sonuclar gizlenir — referans ekranda da filtre tam sayfa aciliyor, sonuclarin ustune binmiyor. */ #gFiltre:checked ~ .sonuclar, #gSirala:checked ~ .sonuclar, #gKayit:checked ~ .sonuclar{display:none} /* GORUNUM: liste yerine izgara. Ayni kartlar, iki sutun. */ #gIzgara:checked ~ .sonuclar{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start} #gIzgara:checked ~ .sonuclar .not{grid-column:1/-1} #gIzgara:checked ~ .sonuclar .kart-ozellik{display:none} #gIzgara:checked ~ .sonuclar .kart-fiyat{font-size:17px} #gIzgara:checked ~ .sonuclar .kart-baslik{font-size:13px} /* Alt dugme: hangi sekmedeysek oraya uygun yazi. Iki yazi ust uste duruyor, gorunen :checked ile secillyor. */ .alt .yz-sonuc{display:none} #gFiltre:checked ~ .alt .yz-sonuc, #gSirala:checked ~ .alt .yz-sonuc, #gKayit:checked ~ .alt .yz-sonuc{display:inline} .alt .yz-filtre{display:inline} #gFiltre:checked ~ .alt .yz-filtre, #gSirala:checked ~ .alt .yz-filtre, #gKayit:checked ~ .alt .yz-filtre{display:none} .sirala-secim{display:flex;align-items:center;gap:12px;background:var(--zemin); padding:14px 16px;border-bottom:1px solid var(--cizgi2);cursor:pointer;font-size:15px} .sirala-secim input{width:20px;height:20px} .kayit-kutu{background:var(--zemin);margin:14px 16px;padding:16px;border-radius:12px; border:1px solid var(--cizgi)} .kayit-kutu h2{font-size:16px;margin-bottom:8px} .kayit-kutu p{font-size:13.5px;color:var(--kum);line-height:1.6;margin:0 0 10px} .kaynak{display:block;font-size:11.5px;color:var(--altin);margin-top:6px;font-weight:600} /* ── KATEGORİ KIRINTISI ─────────────────────────────────────────── */ .kirinti{background:var(--zemin);padding:12px 16px;border-bottom:1px solid var(--cizgi)} .kirinti b{display:block;font-size:11px;letter-spacing:1.2px;color:var(--acik); text-transform:uppercase;margin-bottom:4px} .kirinti span{font-size:14px;color:var(--pri2);font-weight:600} /* ── FİLTRE PANOSU ──────────────────────────────────────────────── */ .pano{display:none} .pano.acik{display:block} .grup-bas{font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--altin); font-weight:700;padding:16px 16px 6px;border-bottom:2px solid var(--altin);margin:0 16px} .filtre{display:flex;align-items:center;gap:12px;background:var(--zemin); padding:12px 16px;border-bottom:1px solid var(--cizgi2);cursor:pointer} .filtre .yz{flex:1;min-width:0} .filtre .ad{display:block;font-size:15px;font-weight:500} .filtre .deger{display:block;font-size:12.5px;color:var(--acik);margin-top:2px} .filtre .deger.secili{color:var(--yesil);font-weight:600} .filtre .ok{color:var(--acik);font-size:18px} .filtre input[type="checkbox"]{width:20px;height:20px} /* ── AÇILIR FİLTRE SATIRI ────────────────────────────────────────── Kurucu "üstlerine tıklıyorum hiçbiri çalışmıyor" dedi; satırlar ölü
'di. Artık
: JavaScript istemez, klavyeyle açılır, ekran okuyucu açık/kapalı durumunu söyler. */ details.filtre{display:block;padding:0} details.filtre summary{display:flex;align-items:center;gap:12px;padding:12px 16px; cursor:pointer;list-style:none} details.filtre summary::-webkit-details-marker{display:none} details.filtre[open] summary{border-bottom:1px solid var(--cizgi2)} details.filtre[open] summary .ok{transform:rotate(90deg)} details.filtre summary .ok{transition:transform .15s;display:inline-block} .filtre-ic{padding:6px 16px 12px;background:var(--yumusak)} .secenek{display:flex;align-items:center;gap:10px;min-height:44px;font-size:14.5px;cursor:pointer} .secenek input{width:18px;height:18px} /* ── SONUÇ KARTLARI ─────────────────────────────────────────────── */ .sonuclar{padding:12px 12px 0} .kart{background:var(--zemin);border:1px solid var(--cizgi);border-radius:14px; overflow:hidden;margin-bottom:12px;display:block;text-decoration:none;color:inherit} .kart-foto{position:relative;aspect-ratio:16/10;background:#EEE} .kart-foto img{width:100%;height:100%;object-fit:cover;display:block} .muhur{position:absolute;top:10px;left:10px;background:rgba(16,32,51,.86);color:#fff; font-size:10px;font-weight:700;letter-spacing:.8px;padding:4px 8px;border-radius:5px} .rozet-dogrulama{position:absolute;bottom:10px;left:10px;background:var(--yesil-acik); color:var(--yesil);font-size:11px;font-weight:700;padding:4px 9px;border-radius:5px; display:inline-flex;align-items:center;gap:5px} .kart-govde{padding:12px 14px 14px} .kart-fiyat{font-family:"Source Serif 4",Georgia,serif;font-size:21px;font-weight:600; color:var(--pri);display:block} .kart-baslik{display:block;font-size:15px;font-weight:600;margin-top:4px;line-height:1.35} .kart-konum{display:block;font-size:12.5px;color:var(--kum);margin-top:4px} .kart-ozellik{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px} .kart-ozellik span{font-size:11.5px;background:var(--yumusak);border:1px solid var(--cizgi2); border-radius:5px;padding:3px 8px;color:var(--kum)} .kart-alt{display:flex;align-items:center;gap:8px;margin-top:10px;padding-top:10px; border-top:1px solid var(--cizgi2);font-size:12px;color:var(--acik)} .kart-alt b{color:var(--pri2);font-weight:600} /* ── ALT DÜĞME ──────────────────────────────────────────────────── */ .alt{position:fixed;bottom:0;left:0;right:0;max-width:560px;margin:0 auto; background:var(--zemin);border-top:1px solid var(--cizgi); padding:10px 16px calc(10px + env(safe-area-inset-bottom));z-index:30} .alt .dugme{display:flex;align-items:center;justify-content:center;width:100%;min-height:50px; border-radius:10px;background:var(--pri);color:#fff;font-size:16px;font-weight:700;cursor:pointer} .not{padding:14px 16px 24px;font-size:12px;color:var(--acik);line-height:1.6;text-align:center} /* ── ELLE YAZILAN SAYISAL FİLTRELER ──────────────────────────────── Kurucu: "kutucukları da attığım fotoğraflar gibi yap, punto ne dolgunluğu aynı olsun, çok acemice olmuş." Önceki hâli: etiket kutunun İÇİNDE ("En az [0] m²"), kutular dar, birim yazıya yapışık, satır kayıyordu. Referanstaki düzen: [Minimum] – [Maximum] [TL ▾] Üç kutu, aralarında tire, sağda birim seçici. İki sayı kutusu EŞİT genişlikte (1fr 1fr); etiket kutunun içinde değil, yer tutucu. Punto ve dolgu üç kutuda da AYNI. */ .filtre-sayisal{padding:14px 16px 16px} .aralik{display:grid;grid-template-columns:1fr auto 1fr auto;align-items:center;gap:8px} .aralik input, .aralik select{ font-family:inherit; font-size:15px; /* ucunde de ayni punto */ color:var(--ink); background:var(--zemin); border:1px solid var(--cizgi); border-radius:8px; padding:14px 12px; /* ucunde de ayni dolgu */ min-height:52px; width:100%; min-width:0; } .aralik input::placeholder{color:var(--acik)} .aralik input:focus,.aralik select:focus{outline:2px solid var(--pri2);outline-offset:1px;border-color:var(--pri2)} .aralik .tire{color:var(--acik);font-size:16px;padding:0 2px} .aralik select{width:auto;min-width:84px;padding-right:8px} .sayi-ipucu{margin:10px 0 0;font-size:12.5px;color:var(--acik)} /* ── ADRES: KADEMELİ ─────────────────────────────────────────────── Referansta Türkiye → İl → İlçe → Mahalle satırları var; il seçilmeden ilçe SOLUK duruyor. Bilinmeyen bir sırayla seçtirmek yerine sıra belli. */ .filtre-adres{padding:0} /* ⚠ ESKİ .adres-satir STİLLERİ KALDIRILDI (2026-08-24). Dört ölü