/* ---------------------------------------------------------------
İnce ayar katmanı — en son yüklenir, bu yüzden son sözü söyler.
Beğenilmezse index.html'den tek satır çıkarılınca geri dönülür.
--------------------------------------------------------------- */
/* ---- 1. Vurgu rengi yeniden kazanılıyor -----------------------
Liste başlıkları altın renkteydi. Vurgu her yerde kullanılınca
hiçbir şey vurgulanmamış oluyor; isim koyu, rakam ve eylem altın. */
.satir-baslik,
.satir-baslik > a,
.mulk-kart h3,
.mulk-kart h3 > a { color: var(--yazi); }
.satir:hover .satir-baslik > a { color: var(--vurgu); }
/* ---- 2. Süzgeç çubuğu katlanıyor ------------------------------
Arama açıkta, geri kalanı "Filtrele" düğmesinin arkasında. */
.arac-cubugu { align-items: center; }
.arac-cubugu .arama-kutu { flex: 1 1 auto; }
.suzgec-govde { display: flex; flex-wrap: wrap; gap: 10px; flex-basis: 100%; }
.suzgec-govde.gizli { display: none; }
.suzgec-dugme {
gap: 8px; flex: 0 0 auto;
color: var(--yazi-soluk); background: var(--kart-2); border-color: transparent;
}
.suzgec-dugme.etkin { color: var(--vurgu); background: var(--vurgu-yumusak); }
.suzgec-dugme b {
min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
display: grid; place-items: center; font-size: 11px;
background: var(--vurgu); color: var(--vurgu-yazi);
}
/* ---- 3. Telefonda yoğunluk ------------------------------------
Denetimler masaüstü ölçüsündeydi; ekranın yarısı boşa gidiyordu. */
@media (max-width: 860px) {
.arac-cubugu { padding: 10px; gap: 8px; }
.arac-cubugu input,
.arac-cubugu select { min-height: 40px; font-size: 14px; padding: 9px 11px; }
.suzgec-govde { gap: 8px; }
/* Sayfanın ana eylemi tam boy kalsın ama slab gibi durmasın */
.ust-sag .dugme.ana { min-height: 44px; padding: 10px 14px; font-size: 14.5px; }
.satir { padding: 12px 14px; gap: 11px; }
.satir-baslik { font-size: 15px; font-weight: 640; letter-spacing: -.01em; }
.satir-alt { font-size: 12.5px; }
.harf { width: 36px; height: 36px; flex-basis: 36px; font-size: 13.5px; }
.sekmeler { padding: 4px; }
.bolum-baslik { margin: 18px 0 8px; }
}
/* ---- 4. Rakamlar hizalı ve sakin ------------------------------
Para her yerde aynı genişlikte rakamla yazılır; satırlar kaymaz. */
.satir-sag, .stat .deger, .mulk-fiyat, .para, td.sag {
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
}
/* ---- 5. Uzun metin kesilmesin, sarsın -------------------------
Telefon numarası "0533 207 …" diye kesiliyordu. */
.satir-alt { overflow-wrap: anywhere; }
/* ---- 6. Arama kutusu ------------------------------------------
Simge emoji idi ve yazıyla aynı noktadan başlıyordu ("🔍sim…").
Simge SVG oldu, yazı ona çarpmayacak kadar içeriden başlıyor. */
.arama-kutu { position: relative; }
.arama-kutu::before { display: none; }
.arama-kutu input {
padding-left: 38px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: 11px 50%;
background-size: 17px 17px;
}
html[data-tema="koyu"] .arama-kutu input {
background-image: url("data:image/svg+xml;utf8,");
}
/* ---- 7. Alt satır kesilmesin ----------------------------------
nowrap + ellipsis yüzünden telefon "0533 20…" diye kesiliyordu.
Dar ekranda ikinci satıra insin; numara okunabilir olmalı. */
@media (max-width: 860px) {
.satir-alt { white-space: normal; overflow: visible; text-overflow: clip; }
/* Sağdaki rozet sütunu soldan yer çalmasın */
.satir-sag { flex: 0 0 auto; max-width: 46%; text-align: right; }
}
/* ---- 8. Portföy kartı -----------------------------------------
Fiyat, m² ve başlık üst üste üç altın satırdı — hepsi bağırınca
hiçbiri öne çıkmıyordu. Tek vurgu fiyat; başlık koyu ve okunur,
m² ile konum sakin. */
.mulk-kart { color: var(--yazi); }
.mulk-govde { padding: 13px 15px 15px; }
.mulk-ust { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.mulk-fiyat-blok { min-width: 0; }
.mulk-fiyat {
color: var(--vurgu); font-weight: 720; font-size: 19px;
letter-spacing: -.025em; line-height: 1.15;
}
.mulk-birim {
color: var(--yazi-soluk); font-size: 12px; font-weight: 600; margin-top: 2px;
}
.mulk-ad {
margin: 8px 0 0; font-size: 15.5px; font-weight: 650;
letter-spacing: -.015em; color: var(--yazi);
}
.mulk-konum {
display: flex; align-items: center; gap: 5px; margin-top: 5px;
font-size: 13px; color: var(--yazi-soluk);
}
.mulk-konum svg { width: 14px; height: 14px; flex: none; opacity: .75; }
.mulk-ozet { font-size: 12.5px; color: var(--yazi-soluk); margin-top: 3px; }
.mulk-eslesme { margin-top: 9px; }
.mulk-eslesme .rozet { display: inline-flex; align-items: center; gap: 5px; }
.mulk-eslesme svg { width: 13px; height: 13px; }
/* Yer tutucu çizim kartın yarısını kaplıyordu; liste taranabilir olmalı */
@media (max-width: 860px) {
.mulk-foto, .mulk-foto-yok { aspect-ratio: 2 / 1; }
}
/* ---- 9. Fotoğrafsız mülk ---------------------------------------
Eskiden kartın yarısını kaplayan bir çizim vardı; her kartta aynı
olduğu için liste tekdüze görünüyordu. Artık ince bir şerit. */
/* Zemin ve çerçeve şeridin kendisinde değil kapsayıcıda: rozet de aynı
şeridin içinde kalsın, arkasında beyaz boşluk oluşmasın. */
.mulk-foto-bos {
aspect-ratio: auto; height: auto;
display: flex; align-items: center; gap: 8px;
padding: 9px 12px;
background: var(--kart-2);
border-bottom: 1px solid var(--kenar);
}
.mulk-foto-serit {
display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0;
background: none; border: 0; padding: 0;
color: var(--yazi-soluk); font-size: 12.5px; font-weight: 550;
}
.mulk-foto-serit span {
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mulk-foto-serit svg { width: 16px; height: 16px; flex: none; opacity: .7; }
.mulk-foto-bos .mulk-islem {
position: static; flex: none; margin: 0;
}
.mulk-foto-sayi { display: inline-flex; align-items: center; gap: 4px; }
.mulk-foto-sayi svg { width: 13px; height: 13px; }