/* =============================================================================
   03emlak.net — Temel stiller: reset, tipografi, düzen, ortak bileşenler.
   Tüm değerler tokens.css'ten gelir.
   ========================================================================== */

/* ------------------------------------------------------------ RESET ------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--baslik-yuk) + var(--bo-4));
  /* Ekran dışına ötelenen sabit konumlu çekmece yatay kaydırma yaratmasın.
     Yalnız body'ye vermek yetmez: position:fixed öğeler body'nin overflow'u
     tarafından kırpılmaz. */
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--ts-md);
  line-height: var(--sy-genis);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, picture, video, canvas { display: block; max-width: 100%; }
/* SVG ikonlar metin içinde de kullanılıyor: block yapılırsa satır kırar.
   inline-block + vertical-align, flex/grid kaplarında davranışı değiştirmez. */
svg { display: inline-block; vertical-align: -0.125em; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
table { border-collapse: collapse; width: 100%; }

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; }

::selection { background: var(--secim); color: var(--text); }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--yr-1);
}

/* Klavye kullanıcıları için içeriğe atlama */
.atla {
  position: absolute; left: -9999px; top: 0;
  padding: var(--bo-3) var(--bo-4);
  background: var(--brand); color: var(--brand-uzeri);
  font-weight: var(--kalin-yari); z-index: var(--z-bildirim);
  border-radius: 0 0 var(--yr-2) 0;
}
.atla:focus { left: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* -------------------------------------------------------- TİPOGRAFİ ------ */
/* Başlık ölçeği afyonilan standardında: sayfa başlığı 22–26, bölüm başlığı 20,
   kart başlığı 16–18. Devasa başlık yalnız hero'da kalır. */
h1, .h1 { font-size: var(--ts-3xl); line-height: 1.15; font-weight: var(--kalin-cok); letter-spacing: -.02em; }
h2, .h2 { font-size: var(--ts-2xl); line-height: 1.2;  font-weight: var(--kalin-cok); letter-spacing: -.015em; }
h3, .h3 { font-size: var(--ts-xl);  line-height: 1.25; font-weight: var(--kalin-tam); letter-spacing: -.01em; }
h4, .h4 { font-size: var(--ts-lg);  line-height: 1.3;  font-weight: var(--kalin-tam); }
h5, .h5 { font-size: var(--ts-md);  line-height: 1.35; font-weight: var(--kalin-tam); }

/* Bölüm başlığının üstündeki küçük büyük-harf etiket ("kaş yazısı"). */
.kas {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--ts-2xs); font-weight: var(--kalin-cok);
  letter-spacing: .1em; text-transform: uppercase; color: var(--brand-metin);
}
.kas::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: var(--brand); }

/* Kart içi ara başlık ("Portföyünden", "Benzer ilanlar"…). */
.kucuk-baslik {
  font-size: var(--ts-sm); font-weight: var(--kalin-cok); color: var(--lacivert);
  letter-spacing: .02em;
}

.metin-2  { color: var(--text-2); }
.metin-3  { color: var(--text-3); }
.kucuk    { font-size: var(--ts-sm); }
.mini     { font-size: var(--ts-xs); }
.mikro    { font-size: var(--ts-2xs); }
.kalin    { font-weight: var(--kalin-yari); }
.sayi     { font-variant-numeric: tabular-nums; }
.tek-satir { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iki-satir {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.gizli-gorsel {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------ DÜZEN ------ */
.kap      { width: 100%; max-width: var(--kap-genis); margin-inline: auto; padding-inline: var(--kenar); }
.kap-orta { max-width: var(--kap-orta); }
.kap-dar  { max-width: var(--kap-dar); }

.ana { flex: 1 0 auto; width: 100%; }

.bolum   { padding-block: var(--bo-7); }
.bolum-sm{ padding-block: var(--bo-6); }

.yigin   { display: flex; flex-direction: column; gap: var(--bo-4); }
.yigin-2 { display: flex; flex-direction: column; gap: var(--bo-2); }
.satir   { display: flex; align-items: center; gap: var(--bo-3); flex-wrap: wrap; }
.satir-ara { display: flex; align-items: center; justify-content: space-between; gap: var(--bo-4); flex-wrap: wrap; }
.buyu    { flex: 1 1 auto; min-width: 0; }

.izgara { display: grid; gap: var(--bo-3); }
/* auto-FILL kullanılır: tek öğe kaldığında kart tüm satırı kaplayıp
   orantısız büyümesin diye boş izler korunur. */
/* 248px: solda kategori sütunu varken 1280'de üç kart sığsın (276'da ikiye
   düşüyordu). Kart 248 genişlikte de okunur — başlık iki satır, fiyat tek. */
.izgara-ilan  { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.izgara-3     { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.izgara-4     { grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); }

/* Bölüm başlığı şeridi — afyonilan'ın `.section-bar`ı. Beyaz kutu, solda 3px
   marka çubuğu, 15px başlık. TÜM sayfalar aynı şeridi kullanır (anasayfadaki
   `.kabuk-basi` de buraya bağlıdır). */
.bolum-basi, .kabuk-basi {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--bo-2) var(--bo-3);
  padding: 11px var(--bo-4); margin-bottom: var(--bo-3);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--bolum-yr); box-shadow: var(--golge-1);
}
.bolum-basi::before, .kabuk-basi::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--gold-gradyan);
}
.bolum-basi h1, .bolum-basi h2, .bolum-basi h3 {
  font-size: var(--ts-lg); font-weight: var(--kalin-yari);
  color: var(--lacivert); letter-spacing: 0; line-height: 1.3;
}
.bolum-basi p { color: var(--text-3); font-size: var(--ts-xs); margin-top: 1px; }
.bolum-basi p b { color: var(--text-2); }

/* "Tümünü Gör" bağlantısı — şeridin sağ ucu. */
.tumu-dg {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  padding: 4px 8px; border-radius: var(--yr-2);
  color: var(--text-3); font-size: var(--ts-xs); font-weight: var(--kalin-orta);
  white-space: nowrap;
}
.tumu-dg:hover { color: var(--brand-metin); background: var(--brand-yumusak); text-decoration: none; }
.tumu-dg svg { width: 12px; height: 12px; }

/* ---------------------------------------------------------- BUTONLAR ----- */
/* Yarıçap bilinçli olarak HAP DEĞİL: kurumsal emlak düzeninde arama kutusu,
   çip ve kart düğmeleri zaten yumuşak dikdörtgen; hap biçim aralarında yabancı
   duruyordu. Tek biçim = tutarlı görünüm. */
.dg {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: var(--dg-yuk); padding: 8px var(--bo-4);
  border-radius: var(--yr-2);
  font-size: var(--ts-sm); font-weight: var(--kalin-tam); line-height: 1.15;
  letter-spacing: .01em;
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: background-color var(--sure-hizli) var(--egri-giris),
              border-color var(--sure-hizli) var(--egri-giris),
              color var(--sure-hizli) var(--egri-giris),
              transform var(--sure-hizli) var(--egri-giris);
  white-space: nowrap;
}
.dg:hover { text-decoration: none; }
.dg:active { transform: translateY(1px); }
.dg[disabled], .dg.pasif { opacity: .55; pointer-events: none; }

/* Gold zemin üzerinde BEYAZ metin: gradyanın alt durağı bilinçli koyu tutulur
   (bkz. tokens.css --gold-gradyan) yoksa kontrast 3:1'in altına düşer. */
.dg-birincil {
  background: var(--gold-gradyan);
  color: var(--gold-uzeri); box-shadow: 0 4px 12px rgba(169, 116, 32, .28);
}
.dg-birincil:hover {
  color: var(--gold-uzeri); background: var(--gold-gradyan-hover);
  transform: translateY(-2px); box-shadow: 0 10px 24px rgba(169, 116, 32, .34);
}


.dg-koyu { background: var(--ink-800); color: #F2F4F7; }
.dg-koyu:hover { background: var(--ink-600); color: #FFF; transform: translateY(-2px); box-shadow: var(--golge-2); }

.dg-ikincil { background: var(--surface); color: var(--text); border-color: var(--border-2); }
.dg-ikincil:hover { background: var(--surface-2); color: var(--text); border-color: var(--brand-400); }

/* Koyu/görsel zemin üzerinde kullanılan cam buton */
.dg-cam {
  background: rgba(255, 255, 255, .14); color: #FFF;
  border-color: rgba(255, 255, 255, .30);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.dg-cam:hover { background: rgba(255, 255, 255, .24); color: #FFF; transform: translateY(-2px); }

.dg-hayalet { background: transparent; color: var(--text-2); border-color: transparent; }
.dg-hayalet:hover { background: var(--surface-2); color: var(--text); }

.dg-tehlike { background: var(--danger); color: #FFF; }
.dg-tehlike:hover { filter: brightness(1.08); color: #FFF; }

.dg-cizgi-tehlike { background: transparent; color: var(--danger-metin); border-color: var(--danger); }
.dg-cizgi-tehlike:hover { background: var(--danger-yumusak); color: var(--danger-metin); }

.dg-sm { min-height: var(--dg-yuk-sm); padding: 5px var(--bo-3); font-size: var(--ts-xs); }
.dg-lg { min-height: var(--dg-yuk-lg); padding: 11px var(--bo-5); font-size: var(--ts-md); }
.dg-tam { width: 100%; }
.dg-ikon { padding: 8px; min-width: var(--dg-yuk); }
/* Büyük harf + geniş harf aralığı — vurgulu eylemler (ARA, DETAYLI İNCELE…) */
.dg-buyuk-harf { text-transform: uppercase; letter-spacing: .06em; font-weight: var(--kalin-cok); }

/* ------------------------------------------------ PAYLAŞILAN KABUK ------- */
/* Aşağıdakiler HEM public kabukta HEM panelde kullanılır; bu yüzden site.css
   değil base.css'tedir (panel-kabuk.php site.css yüklemez). */

/* Logo bir <a> olduğu için varsayılan link rengini alır; SVG'deki yazı
   `currentColor` kullandığından rengi burada marka lacivertine sabitliyoruz. */
.logo { display: inline-flex; align-items: center; flex: none; color: var(--lacivert); min-width: 0; }
.logo:hover { text-decoration: none; color: var(--lacivert); }
.logo svg { height: 38px; width: auto; display: block; }

/* Tema anahtarı */
.tema-dg {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--bo-2);
  min-height: var(--dg-yuk); min-width: var(--dg-yuk); padding-inline: var(--bo-3);
  border-radius: var(--yr-2);
  border: 1px solid var(--border); background: var(--surface); color: var(--text-2);
  font-size: var(--ts-sm); font-weight: var(--kalin-orta);
  transition: border-color var(--sure-hizli), color var(--sure-hizli), background-color var(--sure-hizli);
}
.tema-dg:hover { border-color: var(--brand-300); color: var(--brand-metin); }
.tema-dg svg { width: 15px; height: 15px; }
.tema-dg.kucuk { min-height: 34px; min-width: 34px; padding-inline: 10px; font-size: var(--ts-xs); }
@media (pointer: coarse) { .tema-dg.kucuk { min-height: 40px; min-width: 40px; } }
.tema-dg.kucuk .tema-yazi { display: none; }
.tema-dg .ikon-koyu, .tema-dg .ikon-sistem { display: none; }
:root[data-theme="dark"] .tema-dg .ikon-acik { display: none; }
:root[data-theme="dark"] .tema-dg .ikon-koyu { display: flex; }
:root[data-theme="sistem"] .tema-dg .ikon-acik,
:root[data-theme="sistem"] .tema-dg .ikon-koyu { display: none; }
:root[data-theme="sistem"] .tema-dg .ikon-sistem { display: flex; }

/* ------------------------------------------------------------ KART ------- */
.kart {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--yr-3);
  padding: var(--bo-5);
}
.kart-sik { padding: var(--bo-4); }
.kart-basi { display: flex; align-items: center; justify-content: space-between; gap: var(--bo-3); margin-bottom: var(--bo-4); }
.kart-basi h2, .kart-basi h3 {
  font-size: var(--ts-lg); font-weight: var(--kalin-cok);
  color: var(--lacivert); letter-spacing: -.01em;
}

/* ----------------------------------------------------------- ROZET ------- */
.rozet {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px; border-radius: var(--yr-1);
  font-size: var(--ts-2xs); font-weight: var(--kalin-tam); line-height: 1.5;
  letter-spacing: .02em;
  border: 1px solid transparent; white-space: nowrap;
}
.rozet svg { width: 12px; height: 12px; flex: none; }
.rozet-marka   { background: var(--brand-yumusak);   color: var(--brand-metin);   border-color: var(--brand-200); }
.rozet-basari  { background: var(--success-yumusak); color: var(--success-metin); border-color: color-mix(in srgb, var(--success) 35%, transparent); }
.rozet-uyari   { background: var(--warning-yumusak); color: var(--warning-metin); border-color: color-mix(in srgb, var(--warning) 35%, transparent); }
.rozet-tehlike { background: var(--danger-yumusak);  color: var(--danger-metin);  border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
.rozet-bilgi   { background: var(--info-yumusak);    color: var(--info-metin);    border-color: color-mix(in srgb, var(--info) 35%, transparent); }
.rozet-notr    { background: var(--surface-2);       color: var(--text-2);        border-color: var(--border); }
.rozet-dolu    { background: var(--brand); color: var(--brand-uzeri); border-color: transparent; }

/* ----------------------------------------------------------- UYARI ------- */
.uyari {
  display: flex; gap: var(--bo-3); align-items: flex-start;
  padding: var(--bo-2) var(--bo-3); border-radius: var(--yr-2);
  border: 1px solid var(--border); background: var(--surface-2);
  font-size: var(--ts-sm); line-height: var(--sy-orta);
}
.uyari svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.uyari-basari  { background: var(--success-yumusak); color: var(--success-metin); border-color: color-mix(in srgb, var(--success) 30%, transparent); }
.uyari-hata    { background: var(--danger-yumusak);  color: var(--danger-metin);  border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
.uyari-dikkat  { background: var(--warning-yumusak); color: var(--warning-metin); border-color: color-mix(in srgb, var(--warning) 30%, transparent); }
.uyari-bilgi   { background: var(--info-yumusak);    color: var(--info-metin);    border-color: color-mix(in srgb, var(--info) 30%, transparent); }

/* ------------------------------------------------------------ FORM ------- */
.alan { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.alan > label, .etiket {
  font-size: var(--ts-sm); font-weight: var(--kalin-yari); color: var(--text-2);
}
.alan .zorunlu { color: var(--danger); }

/* Punto `--girdi-punto` token'ından gelir: masaüstünde 14, DOKUNMATİK cihazda
   16 (altındaki değerlerde iOS Safari sayfayı otomatik yakınlaştırıyor). */
.girdi, .secim, .metin-alani {
  width: 100%; min-height: var(--girdi-yuk);
  padding: 8px var(--bo-3);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-2);
  border-radius: var(--yr-2);
  font-size: var(--girdi-punto);
  transition: border-color var(--sure-hizli) var(--egri-giris),
              box-shadow var(--sure-hizli) var(--egri-giris);
}
.metin-alani { min-height: 120px; padding: var(--bo-3); line-height: var(--sy-orta); resize: vertical; }
.girdi::placeholder, .metin-alani::placeholder { color: var(--text-3); }

.girdi:hover, .secim:hover, .metin-alani:hover { border-color: var(--border-2); }
.girdi:focus, .secim:focus, .metin-alani:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent);
}
.girdi[disabled], .secim[disabled], .metin-alani[disabled] {
  background: var(--surface-2); color: var(--text-3); cursor: not-allowed;
}
.girdi.hatali, .secim.hatali, .metin-alani.hatali { border-color: var(--danger); }

/* Açılır ok — temaya göre iki ayrı data URI (data URI içinde currentColor
   çalışmaz; maske ise `.alan` düzenine bağımlı olurdu). */
.secim {
  appearance: none;
  padding-right: var(--bo-6);
  background-image: var(--ok-ikon);
  background-repeat: no-repeat;
  background-position: right var(--bo-3) center;
  background-size: 15px;
}
:root {
  --ok-ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2363788F' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] {
  --ok-ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238298B0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ok-ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238298B0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  }
}

.alan-yardim { font-size: var(--ts-xs); color: var(--text-3); }
.alan-hata   { font-size: var(--ts-xs); color: var(--danger-metin); display: flex; align-items: center; gap: 5px; }

/* Onay kutusu / radyo */
.onay {
  display: flex; align-items: center; gap: var(--bo-3);
  padding: 7px var(--bo-3);
  border: 1px solid var(--border); border-radius: var(--yr-2);
  background: var(--surface); cursor: pointer;
  font-size: var(--ts-sm); min-height: var(--dg-yuk); line-height: 1.3;
  transition: border-color var(--sure-hizli), background-color var(--sure-hizli);
}
.onay:hover { border-color: var(--brand-300); background: var(--surface-2); }
.onay input { accent-color: var(--brand); width: 15px; height: 15px; flex: none; }
.onay:has(input:checked) { border-color: var(--brand); background: var(--brand-yumusak); }
.onay:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }

.onay-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: var(--bo-2); }

/* Form ızgarası */
.form-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--bo-4); }
.form-tam { grid-column: 1 / -1; }

/* -------------------------------------------------------- İLAN KARTI ----- */
/* Sıra (afyonilan düzeni): görsel + kategori rozeti → SATILIK/KİRALIK pili →
   BAŞLIK → fiyat → özet ölçüler → konum + göreli zaman → EİDS bitişi.
   Başlık kartın tamamını kaplayan bağlantıdır; ayrı bir eylem düğmesi yok. */
.ilan-kart {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--kart-yr);
  overflow: hidden;
  transition: transform var(--sure-orta) var(--egri-giris),
              box-shadow var(--sure-orta) var(--egri-giris),
              border-color var(--sure-orta) var(--egri-giris);
}
.ilan-kart:hover { transform: translateY(-3px); box-shadow: var(--golge-yuzen); border-color: var(--border-2); }
.ilan-kart:focus-within { box-shadow: var(--golge-yuzen); border-color: var(--brand); }

.ilan-gorsel { position: relative; aspect-ratio: 16 / 11; background: var(--surface-2); overflow: hidden; }
.ilan-gorsel > a { display: block; height: 100%; }
.ilan-gorsel img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--sure-yavas) var(--egri-giris); }
.ilan-kart:hover .ilan-gorsel img { transform: scale(1.05); }
/* Alt kenara ince karartma: üzerindeki foto sayacı her fotoğrafta okunsun. */
.ilan-gorsel::after {
  content: ""; position: absolute; inset: auto 0 0; height: 38%; pointer-events: none;
  background: linear-gradient(to top, rgba(7, 19, 30, .55), transparent);
}

/* Sol üst kategori rozeti — renk kök kategoriden gelir. */
.ilan-kat {
  position: absolute; left: 8px; top: 8px; z-index: 2;
  max-width: calc(100% - 60px);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 3px 8px; border-radius: var(--yr-1);
  font-size: var(--ts-2xs); font-weight: var(--kalin-yari);
  letter-spacing: .02em; line-height: 1.5;
  color: #FFF; background: var(--kat-varsayilan); box-shadow: 0 2px 6px rgba(0, 0, 0, .24);
}
.ilan-kat.k-konut          { background: var(--kat-konut); }
.ilan-kat.k-isyeri         { background: var(--kat-isyeri); }
.ilan-kat.k-arsa           { background: var(--kat-arsa); }
.ilan-kat.k-bina           { background: var(--kat-bina); }
.ilan-kat.k-devremulk      { background: var(--kat-devremulk); }
.ilan-kat.k-turistik-tesis { background: var(--kat-turistik-tesis); }

/* Kategori rozetinin altındaki ikinci etiket (Yeni İlan / Vitrin / panel etiketi) */
.ilan-etiket {
  position: absolute; left: 8px; top: 34px; z-index: 2;
  padding: 3px 7px; border-radius: var(--yr-1);
  font-size: var(--ts-3xs); font-weight: var(--kalin-tam);
  letter-spacing: .02em; line-height: 1.5;
  color: #FFF; background: var(--rz-firsat); box-shadow: 0 2px 6px rgba(0, 0, 0, .24);
}
.ilan-etiket.e-yesil    { background: var(--rz-firsat); }
.ilan-etiket.e-mavi     { background: var(--rz-yeni); }
.ilan-etiket.e-mor      { background: var(--rz-kacirilmaz); }
.ilan-etiket.e-turuncu  { background: var(--rz-uygun); }
.ilan-etiket.e-kiremit  { background: var(--rz-yatirim); }
.ilan-etiket.e-kirmizi  { background: #B91C1C; }
.ilan-etiket.e-gold     { background: var(--brand-700); }

/* Sağ üst favori düğmesi */
.ilan-kalp {
  position: absolute; right: 8px; top: 8px; z-index: 3;
  width: 30px; height: 30px; border-radius: var(--yr-tam);
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .88); color: var(--text-3);
  border: 1px solid rgba(255, 255, 255, .9);
  backdrop-filter: blur(4px); cursor: pointer;
  transition: color var(--sure-hizli), background-color var(--sure-hizli), transform var(--sure-hizli);
}
.ilan-kalp:hover { color: var(--danger); background: #FFF; transform: scale(1.08); }
.ilan-kalp[aria-pressed="true"] { color: var(--danger); }
.ilan-kalp[aria-pressed="true"] svg { fill: currentColor; }

.ilan-foto-sayi {
  position: absolute; right: 8px; bottom: 8px; z-index: 2;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 7px; border-radius: var(--yr-1);
  background: rgba(10, 12, 16, .62); color: #FFF;
  font-size: var(--ts-2xs); font-weight: var(--kalin-yari);
  font-variant-numeric: tabular-nums;
  backdrop-filter: blur(4px);
}

.ilan-govde { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px 12px; flex: 1; }

/* SATILIK / KİRALIK pili — başlığın üstünde, kartın ilk sinyali. */
.ilan-satis {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 8px; border-radius: var(--yr-1);
  font-size: var(--ts-3xs); font-weight: var(--kalin-tam);
  letter-spacing: .03em; text-transform: uppercase; line-height: 1.6;
  border: 1px solid transparent;
  background: var(--surface-2); color: var(--text-2); border-color: var(--border);
}
.ilan-satis::before { content: ""; width: 5px; height: 5px; border-radius: var(--yr-tam); background: currentColor; }
/* Satılık ailesi kırmızı, kiralık ailesi mavi tonda. */
.ilan-satis.s-satilik,
.ilan-satis.s-devren-satilik { background: var(--danger-yumusak); color: var(--danger-metin); border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
.ilan-satis.s-kiralik,
.ilan-satis.s-gunluk-kiralik,
.ilan-satis.s-devren-kiralik { background: var(--info-yumusak);   color: var(--info-metin);   border-color: color-mix(in srgb, var(--info) 30%, transparent); }

/* Kart başlığı — kartın tamamını kaplayan bağlantı. */
.ilan-baslik { font-size: var(--ts-md); font-weight: var(--kalin-tam); line-height: 1.35; letter-spacing: 0; }
.ilan-baslik a {
  color: var(--lacivert);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 38px;   /* afyonilan: tek satırlık başlıkta kart boyu oynamasın */
}
.ilan-baslik a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.ilan-baslik a:hover { color: var(--brand-metin); text-decoration: none; }

.ilan-fiyat {
  font-size: var(--ts-xl);
  font-weight: var(--kalin-tam); color: var(--fiyat);
  letter-spacing: -.01em; font-variant-numeric: tabular-nums; line-height: 1.25;
}

/* Özet ölçüler — oda / m² / kat. */
.ilan-ozet { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 2px; }
.ilan-ozet li {
  display: inline-flex; align-items: center; gap: 6px; min-width: 0;
  font-size: var(--ts-2xs); font-weight: var(--kalin-orta); color: var(--text-2);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ilan-ozet svg { flex: none; color: var(--text-3); width: 12px; height: 12px; }

/* Konum + göreli zaman — kartın alt künyesi. */
.ilan-meta {
  display: flex; align-items: center; justify-content: space-between; gap: var(--bo-2);
  margin-top: auto; padding-top: 8px;
  border-top: 1px solid var(--border);
  font-size: var(--ts-2xs); color: var(--text-3);
}
.ilan-konum {
  display: inline-flex; align-items: center; gap: 4px; min-width: 0;
  font-weight: var(--kalin-yari); letter-spacing: 0; color: var(--text-2);
}
.ilan-konum > svg { flex: none; color: var(--brand); }
.ilan-zaman { flex: none; white-space: nowrap; }

/* EİDS yayın bitişi + kalan gün */
.ilan-bitis {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 6px; font-size: var(--ts-xs); color: var(--text-3);
}
.ilan-bitis > svg { flex: none; color: var(--text-3); }
.ilan-bitis b { font-weight: var(--kalin-yari); color: var(--text-2); }
.ilan-bitis .rz {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 8px; border-radius: var(--yr-tam);
  background: var(--success-yumusak); color: var(--success-metin);
  font-size: var(--ts-2xs); font-weight: var(--kalin-tam); white-space: nowrap; line-height: 1.6;
}
.ilan-bitis.acil > svg { color: var(--warning); }
.ilan-bitis.acil .rz { background: var(--warning-yumusak); color: var(--warning-metin); }

/* Yatay (liste) varyantı */
.ilan-kart.yatay { flex-direction: row; }
.ilan-kart.yatay .ilan-gorsel { aspect-ratio: auto; width: 38%; min-width: 200px; max-width: 320px; }
.ilan-kart.yatay .ilan-govde { padding: var(--bo-5); }
.ilan-kart.yatay .ilan-baslik { font-size: var(--ts-lg); }
@media (max-width: 640px) {
  .ilan-kart.yatay { flex-direction: column; }
  .ilan-kart.yatay .ilan-gorsel { width: 100%; aspect-ratio: 16 / 11; max-width: none; }
}

/* ------------------------------------------------- KATEGORİ YAN MENÜSÜ --- */
/* Ölçüler afyonilan.com'un sol kategori sütunundan birebir: grup başlığı
   11/14px dolgu · 14px kalın · sayaç 11px · alt satır 13px · madde noktası
   soldan 22px. Açılıp kapanma <details> ile — JavaScript kapalıyken de çalışır. */
.kat-yan {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--yr-5); box-shadow: var(--golge-kart);
  overflow: hidden;
}
.kat-yan-baslik {
  font-size: var(--ts-2xs); font-weight: var(--kalin-tam);
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-3);
  padding: 10px var(--bo-4) 2px;
}

.kat-kisayol { padding: var(--bo-2) 0; border-bottom: 1px solid var(--border); }
.kat-ky {
  display: flex; align-items: center; gap: 10px;
  padding: 10px var(--bo-4);
  color: var(--text); font-size: var(--ts-sm); font-weight: var(--kalin-orta);
  transition: background-color var(--sure-hizli), color var(--sure-hizli), padding var(--sure-hizli);
}
.kat-ky svg { flex: none; width: 15px; height: 15px; color: var(--text-3); }
.kat-ky:hover { background: var(--surface-2); color: var(--brand-metin); text-decoration: none; padding-left: 20px; }
.kat-ky:hover svg { color: var(--brand); }
.kat-ky-vurgu { color: var(--brand-metin); font-weight: var(--kalin-tam); }
.kat-ky-vurgu svg { color: var(--brand); }

.kat-grup { margin: var(--bo-2); border-radius: var(--yr-4); overflow: hidden; box-shadow: var(--golge-1); }
.kat-basi {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px;
  cursor: pointer; list-style: none;
  color: #FFF; background: var(--kat-varsayilan);
  font-size: var(--ts-md); font-weight: var(--kalin-tam); letter-spacing: .2px;
  transition: filter var(--sure-hizli);
}
.kat-basi::-webkit-details-marker { display: none; }
.kat-basi:hover { filter: brightness(1.06); }
.kat-basi > svg:first-child { flex: none; width: 16px; height: 16px; }
.kat-basi .ad { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kat-basi .adet {
  flex: none; padding: 3px 9px; border-radius: 12px;
  background: rgba(255, 255, 255, .28); color: #FFF;
  font-size: var(--ts-2xs); font-weight: var(--kalin-tam); font-variant-numeric: tabular-nums;
}
.kat-basi .ok { flex: none; display: inline-flex; transition: transform var(--sure-orta) var(--egri-giris); }
.kat-basi .ok svg { width: 11px; height: 11px; }
.kat-grup[open] > .kat-basi .ok { transform: rotate(180deg); }

/* Grup başlığı rengi kök kategoriden gelir — kart rozetiyle aynı renk kodu. */
.kat-basi.k-konut          { background: var(--kat-konut); }
.kat-basi.k-isyeri         { background: var(--kat-isyeri); }
.kat-basi.k-arsa           { background: var(--kat-arsa); }
.kat-basi.k-bina           { background: var(--kat-bina); }
.kat-basi.k-devremulk      { background: var(--kat-devremulk); }
.kat-basi.k-turistik-tesis { background: var(--kat-turistik-tesis); }
.kat-grup.bos > .kat-basi { background: var(--kat-bos); }

.kat-liste { background: var(--surface-2); }
.kat-liste a {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: var(--bo-2);
  padding: 9px 14px 9px 42px;
  color: var(--text-2); font-size: var(--ts-sm);
  border-bottom: 1px solid var(--border);
  transition: background-color var(--sure-hizli), color var(--sure-hizli), padding var(--sure-hizli);
}
.kat-liste li:last-child a { border-bottom: 0; }
.kat-liste a::before {
  content: ""; position: absolute; left: 22px; top: 50%; translate: -50% -50%;
  width: 6px; height: 6px; border-radius: var(--yr-tam); background: var(--border-2);
  transition: background-color var(--sure-hizli), scale var(--sure-hizli);
}
.kat-liste a:hover { background: var(--surface); color: var(--text); text-decoration: none; padding-left: 48px; }
.kat-liste a:hover::before { background: var(--brand); scale: 1.2; }
.kat-liste a.aktif {
  background: var(--brand-yumusak); color: var(--text); font-weight: var(--kalin-tam);
  box-shadow: inset 3px 0 0 var(--brand);
  padding-left: 39px;
}
.kat-liste a.aktif::before { background: var(--brand-koyu); scale: 1.2; }
.kat-liste .rz {
  flex: none; padding: 2px 7px; border-radius: 10px;
  background: var(--surface-3); color: var(--text-3);
  font-size: var(--ts-3xs); font-weight: var(--kalin-yari); font-variant-numeric: tabular-nums;
}
.kat-liste a:hover .rz,
.kat-liste a.aktif .rz { background: var(--brand); color: var(--brand-uzeri); }

/* ---- Mobil: kategori menüsü SOLDAN açılan çekmeceye döner --------------- */
/* Tek sütuna inen düzende menü ilanların üstünde ~600px yer kaplıyordu.
   Masaüstünde düğme, çekmece başlığı ve perde hiç görünmez. */
.kat-ac-dg, .kat-cekmece-basi { display: none; }
.kat-perde {
  position: fixed; inset: 0; background: rgba(8, 10, 14, .55);
  z-index: var(--z-perde); opacity: 0; pointer-events: none;
  transition: opacity var(--sure-orta) var(--egri-giris);
}
.kat-perde.acik { opacity: 1; pointer-events: auto; }

/* `.js` kapısı: betik kapalıyken çekmece açılamayacağı için menü akışta kalır. */
@media (max-width: 1024px) {
  .js .kat-ac-dg { display: inline-flex; }

  .js .kat-yan {
    position: fixed; inset-block: 0; left: 0; width: min(88vw, 330px);
    z-index: var(--z-modal); transform: translateX(-100%);
    transition: transform var(--sure-orta) var(--egri-giris);
    border: 0; border-right: 1px solid var(--border); border-radius: 0;
    box-shadow: none; overflow-y: auto; overscroll-behavior: contain;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .js .kat-yan.acik { transform: translateX(0); box-shadow: var(--golge-3); }

  .js .kat-cekmece-basi {
    position: sticky; top: 0; z-index: 1;
    display: flex; align-items: center; justify-content: space-between; gap: var(--bo-3);
    padding: var(--bo-3) var(--bo-4);
    background: var(--surface); border-bottom: 1px solid var(--border);
  }
  .kat-cekmece-basi b { font-size: var(--ts-md); color: var(--lacivert); }
  .kat-kapat {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 42px; height: 42px; border-radius: var(--yr-2);
    border: 1px solid var(--border); background: var(--surface); color: var(--text-2);
  }
  .kat-kapat:hover { border-color: var(--brand-300); color: var(--brand-metin); }
}

/* ------------------------------------------------------- BOŞ / YÜKLEME --- */
.bos-durum {
  display: flex; flex-direction: column; align-items: center; gap: var(--bo-3);
  padding: var(--bo-7) var(--bo-4); text-align: center;
  border: 1px dashed var(--border-2); border-radius: var(--yr-3);
  background: var(--surface);
}
.bos-durum svg { width: 34px; height: 34px; color: var(--text-3); }
.bos-durum h3 { font-size: var(--ts-lg); }
.bos-durum p { color: var(--text-2); font-size: var(--ts-sm); max-width: 46ch; }

.iskelet {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%);
  background-size: 400% 100%;
  animation: iskelet-kay 1.3s ease-in-out infinite;
  border-radius: var(--yr-2);
}
@keyframes iskelet-kay { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ------------------------------------------------------- SAYFALAMA ------- */
.sayfalama { display: flex; justify-content: center; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: var(--bo-6); }
.sayfalama a, .sayfalama span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 34px; padding: 0 6px;
  border: 1px solid var(--border); border-radius: var(--yr-2);
  background: var(--surface); color: var(--text-2);
  font-size: var(--ts-sm); font-weight: var(--kalin-orta);
}
.sayfalama a:hover { border-color: var(--brand); color: var(--brand-metin); text-decoration: none; }
.sayfalama .aktif { background: var(--brand); border-color: var(--brand); color: var(--brand-uzeri); font-weight: var(--kalin-tam); }
.sayfalama .bosluk { border: 0; background: none; min-width: 24px; }

/* ------------------------------------------------------ KIRINTI YOLU ----- */
.kirinti { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: var(--ts-xs); color: var(--text-3); padding-block: var(--bo-2); }
.kirinti a { color: var(--text-2); display: inline-block; padding-block: 6px; }
.kirinti a:hover { color: var(--brand-metin); }
.kirinti .ayrac { color: var(--border-2); }

/* ------------------------------------------------------------ TABLO ------ */
.tablo-sar { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--yr-3); background: var(--surface); }
.tablo { width: 100%; font-size: var(--ts-sm); }
.tablo th, .tablo td { padding: var(--bo-3) var(--bo-4); text-align: left; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tablo th { background: var(--surface-2); font-weight: var(--kalin-yari); color: var(--text-2); font-size: var(--ts-xs); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.tablo tbody tr:last-child td { border-bottom: 0; }
.tablo tbody tr:hover { background: var(--surface-2); }
.tablo .sag { text-align: right; }

/* Dar ekranda tablo yatay kaydırılır (`.tablo-sar`). Hücre dolgusu küçülür ki
   kaydırma mesafesi kısalsın; kaydırılabilir olduğu gölge ipucundan anlaşılır. */
@media (max-width: 640px) {
  .tablo th, .tablo td { padding: var(--bo-3) var(--bo-2); }
  .tablo-sar {
    background:
      linear-gradient(to right, var(--surface) 30%, transparent) left / 24px 100% no-repeat,
      linear-gradient(to left,  var(--surface) 30%, transparent) right / 24px 100% no-repeat,
      radial-gradient(farthest-side at 0 50%, rgba(15, 41, 64, .14), transparent) left / 10px 100% no-repeat,
      radial-gradient(farthest-side at 100% 50%, rgba(15, 41, 64, .14), transparent) right / 10px 100% no-repeat,
      var(--surface);
    background-attachment: local, local, scroll, scroll, local;
  }
}

/* ------------------------------------------------------ KÜNYE TABLOSU ---- */
/* Etiket–değer listesi. Public detay sayfası ve panel özet kutuları ortak
   kullanır; bu yüzden site.css değil base.css'tedir. */
.ozellik-tablo { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 0 var(--bo-6); }
/* Dar kolonlarda (yan sütun, panel kutusu) tek sütun zorlanır. */
.ozellik-tablo.tek { grid-template-columns: minmax(0, 1fr); }
.ozellik-tablo div {
  display: flex; align-items: center; justify-content: space-between; gap: var(--bo-3);
  padding: 13px 0; border-bottom: 1px solid var(--border); font-size: var(--ts-sm);
}
.ozellik-tablo dt, .ozellik-tablo .etiket-adi { color: var(--text-2); min-width: 0; }
/* MERSİS/vergi no gibi boşluksuz uzun değerler kutudan taşıyordu. */
.ozellik-tablo dd, .ozellik-tablo .deger {
  font-weight: var(--kalin-tam); color: var(--text); text-align: right; margin: 0;
  min-width: 0; overflow-wrap: anywhere;
}
/* Çok dar kutuda (≈220px altı) etiket ve değer alt alta iner. */
@media (max-width: 420px) {
  .ozellik-tablo.tek div { flex-wrap: wrap; gap: 2px var(--bo-3); }
  .ozellik-tablo.tek .deger, .ozellik-tablo.tek dd { text-align: left; }
}

/* ---------------------------------------------------------- ETİKET ŞERİDİ- */
.pil-serit { display: flex; gap: var(--bo-2); overflow-x: auto; padding-bottom: var(--bo-2); scrollbar-width: thin; }
.pil {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 5px var(--bo-3); border-radius: var(--yr-tam);
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text-2); font-size: var(--ts-sm); font-weight: var(--kalin-orta);
  min-height: var(--dg-yuk-sm);
}
.pil:hover { border-color: var(--brand-300); color: var(--text); text-decoration: none; }
.pil.aktif { background: var(--brand); border-color: var(--brand); color: var(--brand-uzeri); }

/* ---------------------------------------------- DOKUNMA HEDEFİ (MOBİL) --- */
/* Masaüstündeki sıkı afyonilan ölçeği parmakla kullanılamaz hale gelmesin:
   dokunmatik cihazda küçük bağlantılar 40px'e yükselir (WCAG 2.5.5). */
@media (pointer: coarse) {
  .kat-liste a { min-height: 40px; }
  .kat-ky      { min-height: 42px; }
  .kirinti a, .secili-filtre a, .tumu-dg, .sekme, .sayfalama a, .sayfalama span {
    min-height: 40px;
  }
  .sayfalama a, .sayfalama span { min-width: 40px; }
  /* Alan altındaki yardım bağlantısı ("Mahalleler") 15px yükseklikte kalıyordu. */
  .alan-yardim a { display: inline-flex; align-items: center; min-height: 40px; }
  /* Onay kutusu metnindeki bağlantı (KVKK) satır içidir: satır içi dolgu
     yerleşimi kaydırmaz ama tıklama alanını büyütür. */
  .onay a { padding-block: 12px; }
  /* İkon-only bağlantı/düğmeler en az 44px kare olsun. */
  .dg-ikon { min-width: var(--dg-yuk-lg); min-height: var(--dg-yuk-lg); }
}