/*
 * Alstar Alsat — tasarım sistemi ve arayüz
 *
 * Tek dosya, sıfır dış bağımlılık, sistem yazı tipi: hiçbir font isteği
 * yapılmaz, ilk boyama ağ beklemez.
 *
 * Yön: koyu lacivert başlık ve altlık, arada ferah beyaz ilan alanı.
 * İkinci el araç alıcısı güven arar; ilan fotoğrafı beyaz üstünde doğru
 * renk verir, koyu zeminde soluk görünür.
 *
 * Bölümler
 *   1  Belirteçler          9  Filtre paneli
 *   2  Temel               10  Liste ve sıralama
 *   3  Düzen               11  İlan detayı
 *   4  Düğme ve form       12  Üyelik ve ilan verme
 *   5  Başlık (header)     13  Mesajlaşma ve bildirim
 *   6  Ana sayfa           14  Kurumsal sayfalar
 *   7  İlan kartı          15  Altlık
 *   8  İlan tablosu        16  Yardımcılar ve erişilebilirlik
 */

/* ============================================================
 * 1) BELİRTEÇLER
 * ============================================================ */
:root {
	/* Marka — koyu lacivert gövde, turuncu eylem rengi */
	--gece-950: #070f1c;
	--gece-900: #0b1728;
	--gece-800: #122238;
	--gece-700: #1b3150;
	--gece-600: #26436b;

	--mavi-700: #14538d;
	--mavi-600: #1a6cb4;
	--mavi-500: #2b86d4;
	--mavi-100: #e3f0fb;
	--mavi-50:  #f2f8fd;

	--turuncu-700: #c2410c;
	--turuncu-600: #e2560f;
	--turuncu-500: #f97316;
	--turuncu-100: #ffedd5;

	--yesil-600: #15803d;
	--yesil-100: #dcfce7;
	--sari-600:  #a16207;
	--sari-100:  #fef3c7;
	--kirmizi-600: #b91c1c;
	--kirmizi-100: #fee2e2;

	/* Yüzey ve metin */
	--zemin:       #f4f6f9;
	--yuzey:       #ffffff;
	--yuzey-2:     #f8fafc;
	--cizgi:       #e2e8f0;
	--cizgi-koyu:  #cbd5e1;
	--metin:       #0f172a;
	--metin-orta:  #475569;
	--metin-soluk: #626e7d;

	/* Ölçek */
	--r-xs: 5px;
	--r-sm: 8px;
	--r-md: 12px;
	--r-lg: 18px;
	--r-tam: 999px;

	--golge-1: 0 1px 2px rgba(15, 23, 42, .05), 0 1px 3px rgba(15, 23, 42, .04);
	--golge-2: 0 4px 12px rgba(15, 23, 42, .07), 0 2px 4px rgba(15, 23, 42, .04);
	--golge-3: 0 14px 34px rgba(7, 15, 28, .16), 0 4px 10px rgba(7, 15, 28, .06);

	--genislik: 1280px;
	--bosluk: clamp(16px, 4vw, 28px);
	--gecis: .16s ease;

	--yazi: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, "Noto Sans", sans-serif;
	--yazi-rakam: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}

/* ============================================================
 * 2) TEMEL
 * ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: var(--yazi);
	font-size: 15px;
	line-height: 1.55;
	color: var(--metin);
	background: var(--zemin);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
	margin: 0 0 12px;
	line-height: 1.25;
	font-weight: 700;
	letter-spacing: -0.015em;
	color: var(--metin);
}
h1 { font-size: clamp(23px, 3.4vw, 31px); }
h2 { font-size: clamp(19px, 2.6vw, 23px); }
h3 { font-size: 17px; }

p { margin: 0 0 14px; }
a { color: inherit; text-decoration: none; }
img, svg, video { max-width: 100%; height: auto; display: block; }
button { font: inherit; }
table { border-collapse: collapse; width: 100%; }

/* Rakamlar hizalansın: fiyat ve kilometre sütunları göz süzdürmesin. */
.rakam { font-variant-numeric: tabular-nums; }

/* ============================================================
 * 3) DÜZEN
 * ============================================================ */
.kap {
	width: 100%;
	max-width: var(--genislik);
	margin-inline: auto;
	padding-inline: var(--bosluk);
}

.bolum { padding-block: clamp(28px, 4.5vw, 48px); }
.bolum--dar { padding-block: clamp(22px, 3.4vw, 36px); }

/* Uzun metin ve tek sütunlu form ekranları: okunabilir satır genişliği.
   Liste ve detay sayfaları bu sınıfı KULLANMAZ, tam genişlik isterler. */
.bolum--metin > * { max-width: 780px; margin-inline: auto; }
.bolum--metin > .uye-kutu { max-width: 430px; }

.bolum-basi {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 18px;
}
.bolum-basi h1, .bolum-basi h2 { margin: 0; }
.bolum-basi p { margin: 4px 0 0; color: var(--metin-orta); font-size: 14px; }

.yuzey-kutu {
	background: var(--yuzey);
	border: 1px solid var(--cizgi);
	border-radius: var(--r-md);
	box-shadow: var(--golge-1);
	padding: clamp(16px, 2.4vw, 24px);
}

/* ============================================================
 * 4) DÜĞME VE FORM
 * ============================================================ */
.dugme {
	--d-zemin: var(--gece-800);
	--d-metin: #fff;
	--d-kenar: transparent;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 18px;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--d-metin);
	background: var(--d-zemin);
	border: 1px solid var(--d-kenar);
	border-radius: var(--r-sm);
	cursor: pointer;
	white-space: nowrap;
	transition: background var(--gecis), border-color var(--gecis), transform var(--gecis);
}
.dugme[hidden] { display: none; }
.dugme:hover { background: var(--gece-700); }
.dugme:active { transform: translateY(1px); }

.dugme--vurgu { --d-zemin: var(--turuncu-600); box-shadow: 0 2px 10px rgba(226, 86, 15, .28); }
.dugme--vurgu:hover { background: var(--turuncu-700); }

.dugme--mavi { --d-zemin: var(--mavi-600); }
.dugme--mavi:hover { background: var(--mavi-700); }

.dugme--hayalet {
	--d-zemin: transparent;
	--d-metin: var(--metin);
	--d-kenar: var(--cizgi-koyu);
}
.dugme--hayalet:hover { background: var(--yuzey-2); border-color: var(--metin-soluk); }

.dugme--sade {
	--d-zemin: var(--yuzey-2);
	--d-metin: var(--metin-orta);
	--d-kenar: var(--cizgi);
	font-weight: 550;
}
.dugme--sade:hover { background: var(--mavi-50); color: var(--mavi-700); border-color: var(--mavi-100); }

.dugme--tam { width: 100%; }
.dugme--buyuk { padding: 13px 26px; font-size: 15.5px; }
.dugme--kucuk { padding: 7px 13px; font-size: 13.5px; }
.dugme[disabled], .dugme[aria-disabled="true"] { opacity: .55; pointer-events: none; }

.alan {
	display: block;
	width: 100%;
	padding: 10px 12px;
	font: inherit;
	font-size: 14.5px;
	line-height: 1.3;
	color: var(--metin);
	background: var(--yuzey);
	border: 1px solid var(--cizgi-koyu);
	border-radius: var(--r-sm);
	appearance: none;
	transition: border-color var(--gecis), box-shadow var(--gecis);
}
.alan::placeholder { color: var(--metin-soluk); }
.alan:hover { border-color: var(--mavi-500); }
.alan:focus {
	outline: none;
	border-color: var(--mavi-600);
	box-shadow: 0 0 0 3px var(--mavi-100);
}
.alan[disabled] { background: var(--yuzey-2); color: var(--metin-soluk); cursor: not-allowed; }
.alan[type="file"] { padding: 6px 8px; color: var(--metin-orta); font-size: 13.5px; cursor: pointer; }
.alan[type="file"]::file-selector-button {
	font: inherit; font-weight: 600; font-size: 13px;
	margin-right: 10px; padding: 6px 12px;
	color: var(--metin); background: var(--yuzey-2);
	border: 1px solid var(--cizgi-koyu); border-radius: var(--r-sm);
	cursor: pointer; transition: background var(--gecis), border-color var(--gecis);
}
.alan[type="file"]:hover::file-selector-button { background: var(--mavi-50); border-color: var(--mavi-500); }

select.alan {
	padding-inline-end: 34px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23475569' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	cursor: pointer;
}
textarea.alan { min-height: 110px; resize: vertical; line-height: 1.55; }

.alan-etiket {
	display: block;
	margin-bottom: 5px;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .01em;
	color: var(--metin-orta);
}
.alan-etiket__birim { font-weight: 400; color: var(--metin-soluk); }

.form-satir { margin-bottom: 14px; }
.form-ikili { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.form-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0 16px; }
.form-ipucu { display: block; margin-top: 5px; font-size: 12.5px; color: var(--metin-soluk); }
.form-ipucu[hidden] { display: none; }
.form-istege-bagli { font-weight: 400; color: var(--metin-soluk); }

.form-hata {
	margin: 5px 0 0;
	font-size: 13px;
	font-weight: 500;
	color: var(--kirmizi-600);
}

/* İsteğe bağlı alanlar için açılır bölüm (ilan verme 2. adım) */
.form-ek { margin: 6px 0 4px; border: 1px solid var(--cizgi); border-radius: var(--r-md); background: var(--yuzey); }
.form-ek > summary {
	padding: 13px 16px;
	font-weight: 650;
	color: var(--mavi-700);
	cursor: pointer;
	list-style: none;
}
.form-ek > summary::-webkit-details-marker { display: none; }
.form-ek > summary::before { content: "+"; display: inline-block; width: 1.2em; font-weight: 700; }
.form-ek[open] > summary::before { content: "–"; }
.form-ek > summary span { font-weight: 400; font-size: 13px; color: var(--metin-soluk); }
.form-ek > summary:focus-visible { outline: 3px solid var(--mavi-500); outline-offset: 2px; border-radius: var(--r-md); }
.form-ek > .form-izgara { padding: 4px 16px 16px; }

.form-hata--genel {
	margin: 0 0 16px;
	padding: 11px 14px;
	background: var(--kirmizi-100);
	border-radius: var(--r-sm);
}
.form-bilgi {
	margin: 0 0 16px;
	padding: 11px 14px;
	font-size: 14px;
	color: var(--yesil-600);
	background: var(--yesil-100);
	border-radius: var(--r-sm);
}

.form-bilgi--uyari {
	color: var(--sari-600);
	background: var(--sari-100);
	line-height: 1.5;
}
.form-bilgi--uyari a { color: inherit; font-weight: 600; }

.form-onay {
	display: flex;
	gap: 9px;
	align-items: flex-start;
	font-size: 14px;
	color: var(--metin-orta);
	cursor: pointer;
}
.form-onay input {
	width: 17px; height: 17px;
	margin: 2px 0 0;
	flex-shrink: 0;
	accent-color: var(--mavi-600);
}

.secim-satir {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	padding: 10px 13px;
	margin-bottom: 7px;
	background: var(--yuzey);
	border: 1px solid var(--cizgi);
	border-radius: var(--r-sm);
	cursor: pointer;
	transition: border-color var(--gecis), background var(--gecis);
}
.secim-satir:hover { border-color: var(--cizgi-koyu); background: var(--mavi-50); }
.secim-satir input { margin-top: 3px; flex: none; accent-color: var(--mavi-600); }
.secim-satir:has(input:checked) { border-color: var(--mavi-500); background: var(--mavi-50); }

/* ============================================================
 * 5) BAŞLIK
 * ============================================================ */
.ust {
	position: sticky;
	top: 0;
	z-index: 60;
	background: var(--gece-900);
	color: #fff;
	border-bottom: 1px solid var(--gece-700);
}
.ust__ic {
	display: flex;
	align-items: center;
	gap: 18px;
	min-height: 60px;
}

.logo {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	flex: none;
	font-size: 19px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: #fff;
}
.logo__isaret {
	display: grid;
	place-items: center;
	width: 32px; height: 32px;
	flex: none;
}
/* Alstar logosu (renkli AR halkası): halkanın içi beyaz dosyanın kendisinde;
   dış köşeler şeffaf, koyu çubukta zemin almaz. */
.logo__isaret img { width: 32px; height: 32px; display: block; }
.logo__ikinci { color: var(--turuncu-500); }

.ust-menu {
	display: flex;
	align-items: center;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
	flex: none;
}
.ust-menu a {
	display: block;
	padding: 8px 12px;
	font-size: 14.5px;
	font-weight: 550;
	color: rgba(255, 255, 255, .82);
	border-radius: var(--r-sm);
	transition: background var(--gecis), color var(--gecis);
}
.ust-menu a:hover,
.ust-menu .secili > a { color: #fff; background: rgba(255, 255, 255, .1); }

.ust-arama {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1 1 auto;
	/* Sıkışınca sıfıra ezilip boş bir kutuya dönmesin; yer yetmezse
	 * menü hamburgere geçer (bkz. 1180px uyarlaması). */
	min-width: 200px;
	max-width: 440px;
	padding: 0 6px 0 13px;
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: var(--r-sm);
	transition: background var(--gecis), border-color var(--gecis);
}
.ust-arama:focus-within { background: #fff; border-color: #fff; }
.ust-arama__alan {
	flex: 1 1 auto;
	min-width: 0;
	padding: 9px 0;
	font: inherit;
	font-size: 14px;
	color: #fff;
	background: none;
	border: 0;
	outline: none;
}
.ust-arama__alan::placeholder { color: rgba(255, 255, 255, .58); }
.ust-arama:focus-within .ust-arama__alan { color: var(--metin); }
.ust-arama:focus-within .ust-arama__alan::placeholder { color: var(--metin-soluk); }
.ust-arama__dugme {
	display: grid;
	place-items: center;
	width: 32px; height: 32px;
	flex: none;
	color: rgba(255, 255, 255, .78);
	background: none;
	border: 0;
	border-radius: var(--r-xs);
	cursor: pointer;
}
.ust-arama:focus-within .ust-arama__dugme { color: var(--mavi-600); }

/*
 * Fotoğrafla bul düğmesi arama düğmesinin solunda durur; aynı
 * boyutta ama ince bir ayraçla ayrılır ki iki ayrı eylem olduğu
 * anlaşılsın.
 */
.ust-arama__foto {
	display: grid;
	place-items: center;
	width: 32px; height: 32px;
	flex: none;
	color: rgba(255, 255, 255, .7);
	background: none;
	border: 0;
	border-inline-end: 1px solid rgba(255, 255, 255, .16);
	border-radius: var(--r-xs);
	cursor: pointer;
	transition: color var(--gecis);
}
.ust-arama__foto:hover { color: #fff; }
.ust-arama:focus-within .ust-arama__foto { color: var(--metin-soluk); border-inline-end-color: var(--cizgi); }
.ust-arama:focus-within .ust-arama__foto:hover { color: var(--mavi-600); }
.ust-arama__foto[data-calisiyor="1"] { opacity: .5; cursor: progress; }

.ust__sag {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: none;
	margin-inline-start: auto;
}
.ust-bag {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 11px;
	font-size: 14px;
	font-weight: 550;
	color: rgba(255, 255, 255, .86);
	border-radius: var(--r-sm);
	transition: background var(--gecis), color var(--gecis);
}
.ust-bag:hover { background: rgba(255, 255, 255, .1); color: #fff; }

.ust-mesaj { position: relative; }
.ust-mesaj__rozet {
	position: absolute;
	top: 2px;
	inset-inline-end: 2px;
	min-width: 16px; height: 16px;
	padding: 0 4px;
	display: grid;
	place-items: center;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	color: #fff;
	background: var(--turuncu-500);
	border: 2px solid var(--gece-900);
	border-radius: var(--r-tam);
}

.mobil-dugme {
	display: none;
	place-items: center;
	width: 38px; height: 38px;
	color: #fff;
	background: rgba(255, 255, 255, .1);
	border: 0;
	border-radius: var(--r-sm);
	cursor: pointer;
}

/* Mobil menü paneli */
.mobil-menu {
	display: none;
	padding: 10px 0 16px;
	border-top: 1px solid var(--gece-700);
}
.mobil-menu[data-acik="1"] { display: block; }
.mobil-menu ul { margin: 0; padding: 0; list-style: none; }
.mobil-menu a {
	display: block;
	padding: 11px 4px;
	font-size: 15px;
	font-weight: 550;
	color: rgba(255, 255, 255, .88);
	border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.mobil-menu a:hover { color: #fff; }

/* ============================================================
 * 6) ANA SAYFA
 * ============================================================ */
.vitrin-ust {
	padding-block: clamp(30px, 5vw, 56px);
	background:
		radial-gradient(120% 130% at 85% 0%, rgba(43, 134, 212, .22) 0%, transparent 55%),
		linear-gradient(170deg, var(--gece-900) 0%, var(--gece-800) 62%, var(--gece-700) 100%);
	color: #fff;
}
.vitrin-ust h1 {
	max-width: 17ch;
	margin: 0 0 10px;
	font-size: clamp(26px, 4.4vw, 40px);
	color: #fff;
}
.vitrin-ust__giris {
	max-width: 56ch;
	margin: 0 0 26px;
	font-size: clamp(15px, 1.6vw, 17px);
	color: rgba(255, 255, 255, .78);
}

/* Büyük arama kutusu */
.hizli-arama {
	padding: 18px;
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .13);
	border-radius: var(--r-lg);
	backdrop-filter: blur(6px);
}
.hizli-arama__sekmeler {
	display: flex;
	gap: 6px;
	margin-bottom: 14px;
	overflow-x: auto;
	scrollbar-width: none;
}
.hizli-arama__sekmeler::-webkit-scrollbar { display: none; }
.hizli-arama__sekme {
	padding: 8px 15px;
	font-size: 14px;
	font-weight: 600;
	color: rgba(255, 255, 255, .74);
	background: rgba(255, 255, 255, .06);
	border: 1px solid transparent;
	border-radius: var(--r-tam);
	white-space: nowrap;
	cursor: pointer;
	transition: background var(--gecis), color var(--gecis);
}
.hizli-arama__sekme:hover { color: #fff; background: rgba(255, 255, 255, .14); }
.hizli-arama__sekme[aria-selected="true"] {
	color: var(--gece-900);
	background: #fff;
}
.hizli-arama__izgara {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 10px;
	align-items: end;
}
.hizli-arama__izgara .alan-etiket { color: rgba(255, 255, 255, .72); }
.hizli-arama__gonder { grid-column: span 1; }
.hizli-arama__gonder .dugme { width: 100%; height: 41px; }

/* Marka ızgarası */
.marka-izgara {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 132px), 1fr));
	gap: 10px;
}
.marka-kart {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 13px 14px;
	background: var(--yuzey);
	border: 1px solid var(--cizgi);
	border-radius: var(--r-md);
	transition: border-color var(--gecis), box-shadow var(--gecis), transform var(--gecis);
}
.marka-kart:hover {
	border-color: var(--mavi-500);
	box-shadow: var(--golge-2);
	transform: translateY(-1px);
}
.marka-kart__ad { font-size: 14.5px; font-weight: 650; }
.marka-kart__sayi { font-size: 12.5px; color: var(--metin-soluk); }

/* Kategori kartları */
.kategori-izgara {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
	gap: 12px;
}
.kategori-kart {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 16px;
	background: var(--yuzey);
	border: 1px solid var(--cizgi);
	border-radius: var(--r-md);
	transition: border-color var(--gecis), box-shadow var(--gecis), transform var(--gecis);
}
.kategori-kart:hover {
	border-color: var(--mavi-500);
	box-shadow: var(--golge-2);
	transform: translateY(-2px);
}
.kategori-kart__ikon {
	display: grid;
	place-items: center;
	width: 44px; height: 44px;
	flex: none;
	color: var(--mavi-600);
	background: var(--mavi-50);
	border-radius: var(--r-sm);
}
.kategori-kart__ad { font-size: 15.5px; font-weight: 650; }
.kategori-kart__sayi { font-size: 13px; color: var(--metin-soluk); }

/* Güven şeridi */
.guven-serit {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
	gap: 14px;
	padding: 20px;
	background: var(--yuzey);
	border: 1px solid var(--cizgi);
	border-radius: var(--r-md);
}
.guven-oge { display: flex; gap: 12px; align-items: flex-start; }
.guven-oge__ikon { flex: none; color: var(--yesil-600); margin-top: 2px; }
.guven-oge strong { display: block; font-size: 14.5px; margin-bottom: 2px; }
.guven-oge span { font-size: 13.5px; color: var(--metin-orta); line-height: 1.5; }

/* ============================================================
 * 7) İLAN KARTI
 * ============================================================ */
.ilan-izgara {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 244px), 1fr));
	gap: 14px;
}
.ilan-izgara--liste { grid-template-columns: minmax(0, 1fr); gap: 10px; }

.ilan-kart {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--yuzey);
	border: 1px solid var(--cizgi);
	border-radius: var(--r-md);
	overflow: hidden;
	transition: border-color var(--gecis), box-shadow var(--gecis), transform var(--gecis);
}
.ilan-kart:hover {
	border-color: var(--mavi-500);
	box-shadow: var(--golge-2);
	transform: translateY(-2px);
}
.ilan-kart--vitrin { border-color: var(--turuncu-500); }

.ilan-kart__gorsel {
	position: relative;
	aspect-ratio: 4 / 3;
	background: linear-gradient(135deg, var(--mavi-50), var(--cizgi));
	overflow: hidden;
}
.ilan-kart__gorsel img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform .35s ease;
}
.ilan-kart:hover .ilan-kart__gorsel img { transform: scale(1.04); }

.rozetler {
	position: absolute;
	top: 8px; inset-inline-start: 8px;
	inset-inline-end: 46px;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}
.rozet {
	padding: 3px 8px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .02em;
	color: #fff;
	background: rgba(7, 15, 28, .78);
	border-radius: var(--r-xs);
}
.rozet--vitrin { background: var(--turuncu-500); }
.rozet--acil   { background: var(--kirmizi-600); }

.favori-dugme {
	position: absolute;
	top: 8px; inset-inline-end: 8px;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 32px; height: 32px;
	color: var(--metin-orta);
	background: rgba(255, 255, 255, .93);
	border: 0;
	border-radius: var(--r-tam);
	box-shadow: var(--golge-1);
	cursor: pointer;
	transition: color var(--gecis), background var(--gecis);
}
.favori-dugme svg { width: 18px; height: 18px; }
.favori-dugme:hover { color: var(--turuncu-600); background: #fff; }
.favori-dolu { color: var(--turuncu-600); }
.favori-dolu svg { fill: currentColor; }

.ilan-kart__govde {
	display: flex;
	flex-direction: column;
	gap: 7px;
	padding: 12px 14px 13px;
	flex: 1 1 auto;
}
.ilan-kart__baslik {
	margin: 0;
	font-size: 14.5px;
	font-weight: 650;
	line-height: 1.35;
}
.ilan-kart__baslik a {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.7em;
}
.ilan-kart:hover .ilan-kart__baslik a { color: var(--mavi-700); }
/*
 * Kartın tamamı tıklanır: başlık bağlantısının tıklama alanı ::after ile
 * kartı kaplar. Yalnız başlık bağlantıyken fotoğrafa ya da fiyata basan
 * ziyaretçi için ilan "açılmıyordu". Kartta tek bir bağlantı kalır (ekran
 * okuyucu kartı tek bağlantı olarak okur, iç içe <a> yok). Favori,
 * karşılaştır ve rozetler z-index 2-3 ile bu katmanın üstünde durur.
 */
.ilan-kart { cursor: pointer; }
.ilan-kart__baslik a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}
.ilan-kart__baslik a:focus-visible { outline: none; }
.ilan-kart:has(.ilan-kart__baslik a:focus-visible) { outline: 3px solid var(--mavi-500); outline-offset: 2px; }
.ilan-kart__galeri { position: relative; z-index: 2; }
.rozetler { pointer-events: none; } /* rozete basmak da ilanı açsın */

.ilan-kart__ozet {
	display: flex;
	flex-wrap: wrap;
	gap: 3px 6px;
	font-size: 12.5px;
	color: var(--metin-orta);
}
.ilan-kart__ozet span:not(:last-child)::after {
	content: "·";
	margin-inline-start: 6px;
	color: var(--cizgi-koyu);
}

.ilan-kart__taban {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	/* İndirim rozeti eklenince dar kartta konum taşıyordu: satır sarabilsin. */
	flex-wrap: wrap;
	gap: 4px 10px;
	margin-top: auto;
	padding-top: 9px;
	border-top: 1px solid var(--cizgi);
}
.ilan-kart__fiyat {
	font-size: 16.5px;
	font-weight: 750;
	letter-spacing: -0.015em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.ilan-kart__yer { font-size: 12.5px; color: var(--metin-soluk); text-align: end; margin-inline-start: auto; }

/* ------------------------------------------------------------------
 * Son baktıklarınız şeridi (liste sayfası)
 *
 * Arama sonucuyla yarışmasın diye küçük ve yatay kayar; sonucun
 * altında durur.
 * ---------------------------------------------------------------- */
.son-serit { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--cizgi); }
.son-serit__basi { font-size: 15px; margin: 0 0 12px; color: var(--metin-orta); }
.son-serit__kaydir {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	padding-bottom: 6px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}
.son-serit__oge {
	flex: 0 0 156px;
	display: block;
	text-decoration: none;
	color: inherit;
}
.son-serit__oge img,
.son-serit__bos {
	display: block;
	width: 156px;
	height: 100px;
	object-fit: cover;
	border-radius: var(--r-sm);
	background: var(--yuzey-2);
}
.son-serit__bos { display: grid; place-items: center; color: var(--cizgi-koyu); }
.son-serit__ad {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-top: 6px;
	font-size: 12.5px;
	line-height: 1.35;
	font-weight: 600;
	/* İki satırlık sabit yükseklik: başlıklar farklı uzunlukta olunca
	   fiyatlar birbirine göre kayıyordu. */
	min-height: calc(12.5px * 1.35 * 2);
}
.son-serit__oge:hover .son-serit__ad { text-decoration: underline; }
.son-serit__fiyat { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------
 * İlan karşılaştırma
 *
 * Kutu kartın görselinin üstünde, favori kalbinin karşısında durur.
 * Tepsi sayfanın altına yapışır; mobilde alt menünün üstünde kalır.
 * ---------------------------------------------------------------- */
.kiyas-sec {
	position: absolute;
	inset-inline-start: 8px;
	inset-block-end: 8px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 9px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .92);
	border: 1px solid var(--cizgi);
	font-size: 12px;
	font-weight: 600;
	color: var(--metin-orta);
	cursor: pointer;
	user-select: none;
}
.kiyas-sec input { width: 14px; height: 14px; margin: 0; cursor: pointer; }
.kiyas-sec--secili { background: var(--turuncu-600); border-color: var(--turuncu-600); color: #fff; }
.kiyas-sec--kapali { opacity: .45; cursor: not-allowed; }
.kiyas-sec--kapali input { cursor: not-allowed; }
/* Tabloda kutu tek başına: "Karşılaştır" yazısı sütun başlığında. */
.kiyas-sec--tablo {
	position: static;
	background: none;
	border: 0;
	padding: 0;
	justify-content: center;
}
.kiyas-sec--tablo input { width: 16px; height: 16px; }
.kiyas-sec--tablo.kiyas-sec--secili { background: none; }
.ilan-kart__gorsel { position: relative; }

.kiyas-tepsi {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 40;
	background: var(--yuzey);
	border-top: 1px solid var(--cizgi);
	box-shadow: 0 -6px 24px rgba(15, 23, 42, .08);
	padding: 10px 0;
}
.kiyas-tepsi__ic { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; }
.kiyas-tepsi__sayi { font-weight: 650; font-size: 13.5px; }
.kiyas-tepsi__oge { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; min-width: 0; }
.kiyas-tepsi__etiket {
	font-size: 12px;
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--yuzey-2);
	color: var(--metin-orta);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 220px;
}
.kiyas-tepsi__eylem { display: flex; gap: 8px; margin-inline-start: auto; }
body.kiyas-acik { padding-bottom: 76px; }
/*
 * Asistan düğmesi de sağ altta sabit duruyor; tepsi açılınca onun
 * üstüne çıkar, aksi hâlde tepsinin düğmelerini kapatıyor.
 */
body.kiyas-acik .asis-acici { bottom: 84px; }
@media (max-width: 720px) {
	body.kiyas-acik .asis-acici { bottom: 140px; }
}
.dugme--pasif { opacity: .5; pointer-events: none; }

/* Karşılaştırma tablosu */
.kiyas-kaydir { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.kiyas { width: 100%; border-collapse: collapse; font-size: 14px; }
.kiyas th, .kiyas td { padding: 10px 12px; text-align: start; vertical-align: top; border-bottom: 1px solid var(--cizgi); }
.kiyas thead th { vertical-align: bottom; }
.kiyas__kose { width: 170px; }
.kiyas__basi { min-width: 180px; }
.kiyas__gorsel { display: block; margin-bottom: 8px; }
.kiyas__gorsel img { width: 100%; height: 108px; object-fit: cover; border-radius: var(--r-sm); }
.kiyas__bos { display: grid; place-items: center; height: 108px; background: var(--yuzey-2); border-radius: var(--r-sm); color: var(--cizgi-koyu); }
.kiyas__baslik { display: block; font-weight: 650; font-size: 13.5px; line-height: 1.35; color: var(--metin); text-decoration: none; }
.kiyas__baslik:hover { text-decoration: underline; }
.kiyas__cikar { display: inline-block; margin-top: 6px; font-size: 12px; color: var(--metin-soluk); }
.kiyas__grup th {
	background: var(--yuzey-2);
	font-size: 12.5px;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--metin-soluk);
	padding-top: 8px;
	padding-bottom: 8px;
}
/* Aynı değerler soluk, farklı olanlar belirgin: göz farkı arar. */
.kiyas__satir th { font-weight: 500; color: var(--metin-soluk); }
.kiyas__satir td { color: var(--metin-soluk); }
.kiyas__satir--farkli td { color: var(--metin); font-weight: 600; }
.kiyas__satir--farkli th { color: var(--metin); }
.kiyas__alt { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 14px; }

@media (max-width: 720px) {
	.kiyas__kose { width: 118px; }
	.kiyas__basi { min-width: 150px; }
	.kiyas th, .kiyas td { padding: 8px 9px; font-size: 13px; }
	.kiyas-tepsi { bottom: 58px; } /* Mobil alt menünün üstünde. */
	.kiyas-tepsi__oge { display: none; }
}

/* ------------------------------------------------------------------
 * Satıcı profili
 *
 * Künye kartı: ad, rozet, üç sayaç. Alıcı "kim bu?" sorusunu tek
 * bakışta yanıtlayabilsin diye sayaçlar iri ve yan yana.
 * ---------------------------------------------------------------- */
.satici-profil { padding: 20px 22px; margin-bottom: 20px; }
.satici-profil__kimlik { display: flex; align-items: center; gap: 14px; }
.satici-profil__im {
	width: 54px;
	height: 54px;
	flex: none;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--mavi-100, #dbeafe);
	color: var(--mavi-700, #1d4ed8);
	font-size: 22px;
	font-weight: 700;
}
.satici-profil__metin h1 { font-size: 22px; margin: 0 0 3px; }
.satici-profil__alt { margin: 0; font-size: 13.5px; color: var(--metin-orta); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.satici-profil__sayac {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 32px;
	margin: 18px 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--cizgi);
}
.satici-profil__sayac dt { font-size: 12.5px; color: var(--metin-soluk); margin-bottom: 2px; }
.satici-profil__sayac dd { margin: 0; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.satici-profil__yanit dd { font-size: 14px; font-weight: 600; }
.satici-profil__uyari {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 16px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--cizgi);
	font-size: 13px;
	color: var(--metin-orta);
}
.satici-profil__uyari svg { flex: none; margin-top: 2px; color: var(--metin-soluk); }

.satici-kutu__bag { color: inherit; text-decoration: none; }
.satici-kutu__bag:hover { text-decoration: underline; }
.satici-kutu__kunye { margin: 10px 0 12px; font-size: 12.5px; color: var(--metin-soluk); }

@media (max-width: 560px) {
	.satici-profil__metin h1 { font-size: 19px; }
	.satici-profil__sayac { gap: 10px 22px; }
	.satici-profil__sayac dd { font-size: 18px; }
}

/* ------------------------------------------------------------------
 * Fiyat düşüşü ve kayıtlı arama
 *
 * İndirim rozeti fiyatın yanında, küçük ve yeşil: dikkat çeksin ama
 * fiyatın kendisiyle yarışmasın. Yeşil, "alıcı lehine" demektir.
 * ---------------------------------------------------------------- */
.fiyat-dusus {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	margin-inline-start: 6px;
	padding: 1px 7px;
	border-radius: 999px;
	background: #dcfce7;
	border: 1px solid #86efac;
	color: #15803d;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0;
	white-space: nowrap;
	vertical-align: middle;
}
.detay-fiyat-gecmis {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: -6px 0 10px;
	font-size: 13px;
}
.detay-fiyat-gecmis .fiyat-dusus { margin-inline-start: 0; }
.detay-fiyat-gecmis__eski { color: var(--metin-soluk); text-decoration: line-through; font-variant-numeric: tabular-nums; }
.detay-fiyat-gecmis__ne-zaman { color: var(--metin-soluk); }

.arama-kaydet--kayitli { color: var(--turuncu-600); border-color: var(--turuncu-600); }
.arama-kaydet[disabled] { opacity: 1; cursor: default; }

.arama-liste { display: grid; gap: 12px; }
.arama-satir {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	padding: 14px 16px;
}
.arama-satir__ad { font-size: 16px; margin: 0 0 4px; }
.arama-satir__alt { margin: 0; font-size: 13px; color: var(--metin-orta); }
.arama-satir__eylem { display: flex; align-items: center; gap: 8px; }
.arama-satir__eylem form { display: contents; }

@media (max-width: 560px) {
	.arama-satir { align-items: flex-start; flex-direction: column; }
	.arama-satir__eylem { width: 100%; }
	.arama-satir__eylem .dugme { flex: 1; justify-content: center; }
}

/* Satır görünümü */
.ilan-izgara--liste .ilan-kart { flex-direction: row; }
.ilan-izgara--liste .ilan-kart__gorsel { width: 232px; flex: none; }
.ilan-izgara--liste .ilan-kart__govde { padding: 14px 16px; }
.ilan-izgara--liste .ilan-kart__baslik { font-size: 16px; }
.ilan-izgara--liste .ilan-kart__baslik a { min-height: 0; }

/* ============================================================
 * 8) İLAN TABLOSU
 * ============================================================ */
.ilan-tablo-sar {
	background: var(--yuzey);
	border: 1px solid var(--cizgi);
	border-radius: var(--r-md);
	overflow: hidden;
}
.ilan-tablo { font-size: 13.5px; }
.ilan-tablo thead th {
	padding: 10px 12px;
	font-size: 12px;
	font-weight: 650;
	letter-spacing: .02em;
	text-align: start;
	white-space: nowrap;
	color: var(--metin-orta);
	background: var(--yuzey-2);
	border-bottom: 1px solid var(--cizgi);
}
.ilan-tablo thead th.sag { text-align: end; }
/* Sıralama bağlantısı hücrenin tamamını kaplar: yalnız yazı (15-57 px
 * genişlik, 16 px yükseklik) tıklanırken dokunmatikte ıskalanıyordu. */
.ilan-tablo thead a { display: block; margin: -10px -12px; padding: 10px 12px; color: inherit; }
.ilan-tablo thead a:hover { color: var(--mavi-700); text-decoration: underline; }
.ilan-tablo thead a[aria-current="true"] { color: var(--mavi-700); font-weight: 700; }

.ilan-tablo tbody tr {
	border-bottom: 1px solid var(--cizgi);
	transition: background var(--gecis);
}
.ilan-tablo tbody tr:last-child { border-bottom: 0; }
.ilan-tablo tbody tr:hover { background: var(--mavi-50); }
.ilan-tablo tbody tr.vitrin { background: #fffaf4; }
.ilan-tablo tbody tr.vitrin:hover { background: #fff3e6; }
.ilan-tablo td { padding: 8px 12px; vertical-align: middle; }

/*
 * Masaüstü tablo filtre paneli yanında ~936px'e sığmalı; on iki sütun
 * 1190px tutuyordu ve İl/Favori/Karşılaştır görünmüyordu. Marka ve
 * seri ilan başlığında zaten yazdığı için gizlenir, hücre boşluğu
 * daralır. Kutu yine de taşarsa yana kaydırılabilir kalır.
 */
.ilan-tablo-sar { overflow-x: auto; }
.ilan-tablo thead th:nth-child(2),
.ilan-tablo thead th:nth-child(3),
.ilan-tablo .alan-marka,
.ilan-tablo .alan-seri { display: none; }
.ilan-tablo thead th,
.ilan-tablo td { padding-inline: 8px; }
.ilan-tablo thead a { margin-inline: -8px; padding-inline: 8px; }

.h-gorsel { width: 64px; padding-inline-end: 0 !important; }
.tablo-gorsel { display: block; width: 62px; }
.tablo-gorsel img {
	width: 62px; height: 46px;
	object-fit: cover;
	border-radius: var(--r-xs);
	background: var(--yuzey-2);
}
.h-baslik { font-weight: 600; min-width: 170px; }
.h-baslik a:hover { color: var(--mavi-700); }
.h-baslik .rozet { margin-inline-end: 5px; vertical-align: 1px; }
.h-alan { color: var(--metin-orta); white-space: nowrap; font-variant-numeric: tabular-nums; }
.h-alan.sag, td.sag { text-align: end; }
.h-fiyat {
	font-weight: 750;
	white-space: nowrap;
	text-align: end;
	font-variant-numeric: tabular-nums;
}
.h-tarih { color: var(--metin-soluk); white-space: nowrap; font-size: 12.5px; text-align: end; }
.h-yer { color: var(--metin-soluk); white-space: nowrap; font-size: 12.5px; }

/*
 * Tablo satırındaki favori düğmesi. Kart üzerindeki kardeşi mutlak
 * konumlanıyor; burada hücrenin içinde akması gerekiyor, o yüzden
 * konum ve gölge sıfırlanır.
 */
.h-favori { width: 44px; text-align: center !important; }
.favori-dugme--tablo {
	position: static;
	width: 30px; height: 30px;
	background: transparent;
	box-shadow: none;
	color: var(--metin-soluk);
}
.favori-dugme--tablo:hover { background: var(--yuzey-2); color: var(--turuncu-600); }

/* ============================================================
 * 8b) SAYFA GERİ BİLDİRİMİ
 * ============================================================ */
.gb {
	border-top: 1px solid var(--cizgi);
	background: var(--yuzey-2);
}
.gb__kap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px 16px;
	padding: 18px 0;
	text-align: center;
}
.gb__soru { margin: 0; font-size: 14.5px; font-weight: 600; color: var(--metin); }
.gb__dugmeler { display: flex; gap: 8px; }
.gb__dugme {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 14px;
	font: inherit;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--metin-orta);
	background: #fff;
	border: 1px solid var(--cizgi-koyu);
	border-radius: var(--r-tam);
	cursor: pointer;
	transition: color var(--gecis), border-color var(--gecis), background var(--gecis);
}
.gb__dugme svg { width: 17px; height: 17px; }
.gb__dugme:hover { border-color: var(--mavi-600); color: var(--mavi-700); }
.gb__dugme--eksi:hover { border-color: var(--turuncu-600); color: var(--turuncu-600); }
.gb__dugme[aria-pressed="true"] { border-color: var(--mavi-600); color: var(--mavi-700); background: var(--mavi-50); }
.gb__dugme[disabled] { opacity: .55; cursor: default; }

/*
 * Açıklama kutusu kendi satırına iner. flex-basis %100 iken max-width
 * vermek kutuyu düğmelerin yanına sıkıştırıyordu; okuma genişliği
 * sınırı bu yüzden içerideki ögelere taşındı.
 */
.gb__kutu {
	flex: 0 0 100%;
	width: 100%;
	margin-top: 4px;
	text-align: start;
}
.gb__etiket,
.gb__alan,
.gb__kutu-alt { max-width: 640px; margin-inline: auto; }
.gb__etiket {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--metin-orta);
}
.gb__alan { width: 100%; resize: vertical; }
.gb__kutu-alt {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: 8px;
}
.gb__kutu-dugmeler { display: flex; gap: 8px; margin-inline-start: auto; }
.gb__hata { font-size: 12.5px; color: var(--kirmizi-600); }
.gb__tesekkur {
	flex: 1 1 100%;
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--yesil-600);
}

@media (max-width: 560px) {
	.gb__kap { flex-direction: column; align-items: stretch; text-align: start; }
	.gb__dugmeler { justify-content: stretch; }
	.gb__dugme { flex: 1 1 0; justify-content: center; }
}

/* ============================================================
 * 9) FİLTRE PANELİ
 * ============================================================ */
.liste-duzen {
	display: grid;
	grid-template-columns: 266px minmax(0, 1fr);
	gap: 20px;
	align-items: start;
}

.filtre {
	position: sticky;
	top: 74px;
	max-height: calc(100vh - 94px);
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--yuzey);
	border: 1px solid var(--cizgi);
	border-radius: var(--r-md);
	scrollbar-width: thin;
}
.filtre__basi {
	position: sticky;
	top: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 13px 15px;
	background: var(--yuzey);
	border-bottom: 1px solid var(--cizgi);
}
.filtre__basi h2 { margin: 0; font-size: 15px; flex: 1 1 auto; }
.filtre__temizle { font-size: 12.5px; font-weight: 600; color: var(--turuncu-600); }
.filtre__temizle:hover { text-decoration: underline; }
.filtre-kapat {
	display: none;
	place-items: center;
	width: 30px; height: 30px;
	color: var(--metin-orta);
	background: var(--yuzey-2);
	border: 0;
	border-radius: var(--r-xs);
	cursor: pointer;
}

.filtre-grup { border-bottom: 1px solid var(--cizgi); }
.filtre-grup:last-of-type { border-bottom: 0; }
.filtre-grup__basi {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	padding: 11px 15px;
	font-size: 13.5px;
	font-weight: 600;
	text-align: start;
	color: var(--metin);
	background: none;
	border: 0;
	cursor: pointer;
}
.filtre-grup__basi:hover { background: var(--yuzey-2); }
.filtre-grup__ok {
	display: grid;
	place-items: center;
	flex: none;
	color: var(--metin-soluk);
	transition: transform var(--gecis);
}
.filtre-grup[data-acik="0"] .filtre-grup__ok { transform: rotate(-90deg); }
.filtre-grup[data-acik="0"] .filtre-grup__govde { display: none; }
.filtre-grup__govde { padding: 0 15px 13px; }

.filtre-secenek {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 5px 0;
	font-size: 13.5px;
	color: var(--metin-orta);
	cursor: pointer;
}
.filtre-secenek:hover { color: var(--mavi-700); }
.filtre-secenek input { width: 16px; height: 16px; flex: none; accent-color: var(--mavi-600); }
.filtre-secenek__ad { flex: 1 1 auto; min-width: 0; }
/* İlçe, ilin bir alt kırılımı: girinti hiyerarşiyi gözle anlatıyor. */
.filtre-secenek--alt { padding-inline-start: 14px; font-size: 13.5px; }
.filtre-secenek__adet {
	font-size: 12px;
	color: var(--metin-soluk);
	font-variant-numeric: tabular-nums;
	flex: none;
}
.filtre-secenek--bos { opacity: .45; pointer-events: none; }
.filtre-secenek[hidden] { display: none; }

/* Radyo düğmeleri hap biçiminde: tek seçim olduğu göz kararı anlaşılsın. */
.pul-sira { display: flex; flex-wrap: wrap; gap: 6px; }
.pul { position: relative; cursor: pointer; }
.pul input {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.pul span {
	display: block;
	padding: 6px 12px;
	font-size: 12.5px;
	font-weight: 550;
	color: var(--metin-orta);
	background: var(--yuzey-2);
	border: 1px solid var(--cizgi);
	border-radius: var(--r-tam);
	transition: all var(--gecis);
}
.pul:hover span { border-color: var(--mavi-500); color: var(--mavi-700); }
.pul input:checked + span {
	color: #fff;
	background: var(--gece-800);
	border-color: var(--gece-800);
}
.pul input:focus-visible + span { outline: 3px solid var(--mavi-500); outline-offset: 2px; }

.filtre-aralik { display: flex; align-items: center; gap: 8px; }
.filtre-aralik .alan { padding: 8px 10px; font-size: 13.5px; min-width: 0; }
.filtre-aralik span { flex: none; color: var(--metin-soluk); }

.filtre-daha {
	display: inline-block;
	margin-top: 8px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--mavi-700);
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}
.filtre-daha:hover { text-decoration: underline; }

.filtre-uygula-serit {
	position: sticky;
	bottom: 0;
	padding: 12px 15px;
	background: var(--yuzey);
	border-top: 1px solid var(--cizgi);
}
.filtre-ac { display: none; }

/* ============================================================
 * 10) LİSTE BAŞI, SEKMELER VE SAYFALAMA
 * ============================================================ */
.kirinti {
	display: flex;
	flex-wrap: wrap;
	gap: 5px 7px;
	margin: 0 0 14px;
	padding: 0;
	list-style: none;
	font-size: 12.5px;
	color: var(--metin-soluk);
}
.kirinti li { display: flex; gap: 7px; align-items: center; }
.kirinti li:not(:last-child)::after { content: "›"; color: var(--cizgi-koyu); }
.kirinti a:hover { color: var(--mavi-700); text-decoration: underline; }

.liste-ust {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 14px;
}
.liste-ust__sol { min-width: 0; }
.liste-ust__sol h1 { margin: 0 0 2px; font-size: clamp(19px, 2.6vw, 24px); }
.liste-ust__sayi { margin: 0; font-size: 13.5px; color: var(--metin-orta); }
.liste-ust__sag {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	min-width: 0;
}
.liste-ust__sag .alan { width: auto; padding: 8px 32px 8px 11px; font-size: 13.5px; }

.gorunum-dugme {
	display: grid;
	place-items: center;
	width: 37px; height: 37px;
	flex: none;
	color: var(--metin-soluk);
	background: var(--yuzey);
	border: 1px solid var(--cizgi);
	border-radius: var(--r-sm);
	transition: background var(--gecis), color var(--gecis);
}
.gorunum-dugme:hover { color: var(--metin); background: var(--yuzey-2); }
.gorunum-dugme[aria-pressed="true"] {
	color: #fff;
	background: var(--gece-800);
	border-color: var(--gece-800);
}
/* Yan yana düğmeler tek bir öbek gibi dursun. */
.gorunum-dugme + .gorunum-dugme { margin-inline-start: -1px; border-start-start-radius: 0; border-end-start-radius: 0; }
.gorunum-dugme:not(:last-child) { border-start-end-radius: 0; border-end-end-radius: 0; }

.satici-sekme {
	display: flex;
	gap: 4px;
	flex-wrap: wrap;
	margin-bottom: 14px;
	padding-bottom: 2px;
}
.satici-sekme a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px;
	font-size: 13.5px;
	font-weight: 550;
	color: var(--metin-orta);
	background: var(--yuzey);
	border: 1px solid var(--cizgi);
	border-radius: var(--r-tam);
	transition: all var(--gecis);
}
.satici-sekme a:hover { color: var(--mavi-700); border-color: var(--mavi-500); }
.satici-sekme a[aria-current="true"] {
	color: #fff;
	background: var(--gece-800);
	border-color: var(--gece-800);
}
.satici-sekme__adet {
	font-size: 11.5px;
	font-variant-numeric: tabular-nums;
	opacity: .72;
}

.sayfalama {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	flex-wrap: wrap;
	margin-top: 24px;
}
.sayfalama a, .sayfalama span {
	display: grid;
	place-items: center;
	min-width: 38px; height: 38px;
	padding-inline: 12px;
	font-size: 14px;
	font-weight: 600;
	color: var(--metin-orta);
	background: var(--yuzey);
	border: 1px solid var(--cizgi);
	border-radius: var(--r-sm);
	transition: all var(--gecis);
}
.sayfalama a:hover { color: var(--mavi-700); border-color: var(--mavi-500); }
.sayfalama [aria-current="page"] {
	color: #fff;
	background: var(--gece-800);
	border-color: var(--gece-800);
}

.bos-sonuc {
	padding: clamp(30px, 6vw, 54px) 20px;
	text-align: center;
	background: var(--yuzey);
	border: 1px dashed var(--cizgi-koyu);
	border-radius: var(--r-md);
}
.bos-sonuc svg { margin: 0 auto 14px; color: var(--cizgi-koyu); }
.bos-sonuc h1, .bos-sonuc h2 { margin-bottom: 6px; }
.bos-sonuc p { color: var(--metin-orta); max-width: 46ch; margin-inline: auto; }

/* ============================================================
 * 11) İLAN DETAYI
 * ============================================================ */
.kart-yuzey {
	background: var(--yuzey);
	border: 1px solid var(--cizgi);
	border-radius: var(--r-md);
	box-shadow: var(--golge-1);
	padding: clamp(16px, 2.2vw, 22px);
}

.detay-duzen {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 342px;
	gap: 20px;
	align-items: start;
}
.detay-ana { min-width: 0; display: grid; gap: 16px; }

/* ---- Galeri ---- */
.galeri {
	background: var(--yuzey);
	border: 1px solid var(--cizgi);
	border-radius: var(--r-md);
	overflow: hidden;
}
.galeri__buyuk { position: relative; aspect-ratio: 4 / 3; background: var(--yuzey-2); }
.galeri__kare { margin: 0; width: 100%; height: 100%; }
.galeri__kare img { width: 100%; height: 100%; object-fit: cover; }
.galeri__bos {
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 10px;
	height: 100%;
	color: var(--metin-soluk);
	font-size: 14px;
}
.galeri__ok {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	width: 40px; height: 40px;
	font-size: 24px;
	line-height: 1;
	color: var(--metin);
	background: rgba(255, 255, 255, .92);
	border: 0;
	border-radius: var(--r-tam);
	box-shadow: var(--golge-1);
	cursor: pointer;
}
.galeri__ok--geri { inset-inline-start: 10px; }
.galeri__ok--ileri { inset-inline-end: 10px; }
.galeri__ok:hover { background: #fff; }
.galeri__sayac {
	position: absolute;
	bottom: 10px; inset-inline-end: 10px;
	padding: 4px 10px;
	font-size: 12px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: #fff;
	background: rgba(7, 15, 28, .72);
	border-radius: var(--r-xs);
}
.galeri__kucukler {
	display: flex;
	gap: 6px;
	padding: 8px;
	overflow-x: auto;
	scrollbar-width: thin;
}
.galeri__kucukler button {
	width: 78px; height: 58px;
	flex: none;
	padding: 0;
	background: none;
	border: 2px solid transparent;
	border-radius: var(--r-xs);
	cursor: pointer;
	overflow: hidden;
}
.galeri__kucukler img { width: 100%; height: 100%; object-fit: cover; }
.galeri__kucukler button[aria-selected="true"] { border-color: var(--mavi-600); }

/* ---- İçerik blokları ---- */
.detay-blok__basi { margin: 0 0 12px; font-size: 17px; }
.detay-blok__basi svg { display: inline-block; vertical-align: -3px; margin-inline-end: 5px; }

/* Konum: ilçe düzeyi; harita dışarıya yalnız tıklanınca gider. */
.konum-blok__yer { margin: 0 0 6px; font-size: 18px; font-weight: 600; color: var(--metin); }
.konum-blok__not { margin: 0 0 14px; font-size: 13px; line-height: 1.5; color: var(--metin-orta); }
.konum-blok__eylem { display: flex; flex-wrap: wrap; gap: 8px; }
.konum-blok__eylem .dugme { max-width: 100%; }
.detay-blok__alt { margin: -6px 0 14px; font-size: 13px; color: var(--metin-soluk); }
.detay-aciklama { font-size: 14.5px; line-height: 1.7; color: var(--metin-orta); }
.detay-aciklama p:last-child { margin-bottom: 0; }

.detay-grup {
	margin: 20px 0 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--metin-soluk);
}
.detay-grup:first-of-type { margin-top: 0; }

.ozellik-liste {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
	gap: 0 26px;
	margin: 0;
}
.ozellik-liste__satir {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 0;
	border-bottom: 1px solid var(--cizgi);
	font-size: 13.5px;
}
.ozellik-liste__satir dt { color: var(--metin-soluk); flex: none; }
.ozellik-liste__satir dd { margin: 0; font-weight: 600; text-align: end; overflow-wrap: anywhere; }

/* ---- Boya ve değişen ---- */
.boya-gosterge {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 156px), 1fr));
	gap: 7px;
}
.boya-parca {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 8px 11px;
	font-size: 12.5px;
	border: 1px solid var(--cizgi);
	border-radius: var(--r-sm);
}
.boya-parca__ad { color: var(--metin-orta); }
.boya-parca__durum { font-weight: 650; white-space: nowrap; }
.boya-parca--orijinal .boya-parca__durum { color: var(--yesil-600); }
.boya-parca--boyali { background: var(--sari-100); border-color: #f3e0ae; }
.boya-parca--boyali .boya-parca__durum { color: var(--sari-600); }
.boya-parca--degisen { background: var(--kirmizi-100); border-color: #f4b8b8; }
.boya-parca--degisen .boya-parca__durum { color: var(--kirmizi-600); }

.boya-anahtar { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 14px; }
.boya-anahtar__oge {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--metin-orta);
	background: none !important;
	border: 0 !important;
	padding: 0;
}
.boya-anahtar__oge::before {
	content: "";
	width: 12px; height: 12px;
	border-radius: 3px;
	border: 1px solid var(--cizgi-koyu);
}
.boya-anahtar__oge.boya-parca--orijinal::before { background: var(--yesil-100); border-color: var(--yesil-600); }
.boya-anahtar__oge.boya-parca--boyali::before   { background: var(--sari-100); border-color: var(--sari-600); }
.boya-anahtar__oge.boya-parca--degisen::before  { background: var(--kirmizi-100); border-color: var(--kirmizi-600); }

/* ---- Yan sütun ---- */
.detay-yan { position: sticky; top: 74px; display: grid; gap: 14px; min-width: 0; }
.detay-baslik { margin: 0 0 8px; font-size: clamp(19px, 2.4vw, 23px); line-height: 1.3; }
.detay-fiyat {
	margin: 0 0 6px;
	font-size: clamp(26px, 3.4vw, 32px);
	font-weight: 800;
	letter-spacing: -0.025em;
	font-variant-numeric: tabular-nums;
}
.detay-yer {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 14px;
	font-size: 13.5px;
	color: var(--metin-orta);
}
.detay-yer svg { width: 16px; height: 16px; flex: none; }

.detay-kunye {
	display: grid;
	gap: 6px;
	margin: 0 0 16px;
	padding: 12px 0;
	border-block: 1px solid var(--cizgi);
	font-size: 13px;
}
.detay-kunye > div { display: flex; justify-content: space-between; gap: 10px; }
.detay-kunye dt { color: var(--metin-soluk); }
.detay-kunye dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }

.detay-eylem { display: grid; gap: 8px; }
.detay-eylem__ikili { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* Paylaş menüsü: düğme JS ile bir sarmalın içine alınır. */
.paylas { position: relative; display: block; }
.paylas > .dugme { width: 100%; }
.paylas__kutu {
	position: absolute;
	inset-inline-start: 0;
	top: calc(100% + 6px);
	z-index: 30;
	min-width: 190px;
	padding: 6px;
	background: var(--yuzey);
	border: 1px solid var(--cizgi);
	border-radius: var(--r-md);
	box-shadow: 0 10px 28px rgba(15, 23, 42, .14);
}
.paylas__kutu[hidden] { display: none; }
.paylas__se {
	display: block;
	width: 100%;
	padding: 9px 10px;
	border: 0;
	border-radius: var(--r-sm);
	background: none;
	font: inherit;
	font-size: 14px;
	text-align: start;
	color: var(--metin);
	text-decoration: none;
	cursor: pointer;
}
.paylas__se:hover, .paylas__se:focus-visible { background: var(--yuzey-2); }
.detay-eylem__not {
	margin: 0 0 4px;
	padding: 10px 12px;
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--metin-orta);
	background: var(--yuzey-2);
	border-radius: var(--r-sm);
}
/* Kapanmış ilan (satıldı / süresi doldu / kaldırıldı) şeridi. */
.ilan-kapali {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 18px;
	padding: 14px 16px;
	background: var(--yuzey);
	border: 1px solid var(--cizgi);
	border-left: 4px solid var(--metin-soluk);
	border-radius: var(--r-md);
	flex-wrap: wrap;
}
.ilan-kapali--satildi { border-left-color: var(--yesil-600); }
.ilan-kapali--suresi { border-left-color: var(--sari-600); }
.ilan-kapali--kaldirildi { border-left-color: var(--kirmizi-600); }
.ilan-kapali__simge { display: flex; color: var(--metin-orta); flex-shrink: 0; }
.ilan-kapali--satildi .ilan-kapali__simge { color: var(--yesil-600); }
.ilan-kapali__metin { flex: 1 1 260px; display: grid; gap: 3px; font-size: 14px; color: var(--metin-orta); }
.ilan-kapali__metin strong { font-size: 16px; color: var(--metin); }
.ilan-kapali .dugme { flex-shrink: 0; }
@media (max-width: 719px) {
	.ilan-kapali .dugme { width: 100%; }
}
/* Telefonda sabit "Ara / Mesaj" çubuğu (alt menünün üstünde) */
.detay-sabit-bar { display: none; }
@media (max-width: 640px) {
	.detay-sabit-bar {
		position: fixed;
		inset-inline: 0;
		bottom: calc(62px + env(safe-area-inset-bottom));
		z-index: 65;
		display: flex;
		gap: 8px;
		padding: 8px 12px;
		background: var(--yuzey);
		border-top: 1px solid var(--cizgi);
		box-shadow: 0 -2px 12px rgba(15, 23, 42, .08);
	}
	.detay-sabit-bar .dugme { flex: 1 1 0; min-height: 46px; justify-content: center; }
	body:has(.detay-sabit-bar) { padding-bottom: calc(62px + 62px + env(safe-area-inset-bottom)); }
}

.detay-telefon {
	font-family: var(--yazi-rakam);
	font-size: 17px;
	letter-spacing: .03em;
}

.satici-kutu__kimlik { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.satici-kutu__im {
	display: grid;
	place-items: center;
	width: 44px; height: 44px;
	flex: none;
	font-size: 17px;
	font-weight: 700;
	color: var(--mavi-700);
	background: var(--mavi-50);
	border-radius: var(--r-tam);
}
.satici-kutu__kimlik strong { display: block; font-size: 14.5px; }
.satici-kutu__kimlik span { font-size: 12.5px; color: var(--metin-soluk); }
.satici-kutu__not {
	margin: 0 0 12px;
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--metin-soluk);
}

.guvenlik-kutu {
	padding: 16px 18px;
	background: var(--sari-100);
	border: 1px solid #f3e0ae;
	border-radius: var(--r-md);
}
.guvenlik-kutu h2 {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 10px;
	font-size: 15px;
	color: var(--sari-600);
}
.guvenlik-kutu ul {
	margin: 0;
	padding-inline-start: 20px;
	font-size: 13px;
	line-height: 1.65;
	color: #7a5b16;
}
.guvenlik-kutu li { margin-bottom: 5px; }
.guvenlik-kutu li:last-child { margin-bottom: 0; }

/* ============================================================
 * 12) ÜYELİK VE İLAN VERME
 * ============================================================ */
.uye-kutu {
	max-width: 430px;
	margin-inline: auto;
	padding: clamp(22px, 4vw, 30px);
	background: var(--yuzey);
	border: 1px solid var(--cizgi);
	border-radius: var(--r-lg);
	box-shadow: var(--golge-2);
}
.uye-kutu h1 { font-size: 23px; margin-bottom: 5px; }
.uye-kutu__alt { margin-bottom: 20px; font-size: 14px; color: var(--metin-orta); }
.uye-kutu__gecis {
	margin: 18px 0 0;
	padding-top: 15px;
	border-top: 1px solid var(--cizgi);
	text-align: center;
	font-size: 14px;
	color: var(--metin-orta);
}
.uye-kutu__gecis a { font-weight: 600; color: var(--mavi-700); }
.uye-kutu__gecis a:hover { text-decoration: underline; }
.uye-form .dugme { margin-top: 6px; }
.form-yanyana {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}
.uye-kutu__unuttum {
	font-size: 14px;
	font-weight: 600;
	color: var(--mavi-700);
	white-space: nowrap;
}
.uye-kutu__unuttum:hover { text-decoration: underline; }
.form-bilgi p { margin: 0; }
.form-bilgi p + p { margin-top: 6px; }
.form-bilgi--genel { line-height: 1.5; }
.uye-kutu .dugme + .uye-kutu__gecis { margin-top: 18px; }
/* Hesap ayarları */
.ayar-izgara { display: grid; gap: 16px; }
.ayar-bolum { padding: clamp(18px, 3vw, 24px); }
.ayar-bolum__basi { margin: 0 0 4px; font-size: 18px; }
.ayar-bolum__alt { margin: 0 0 16px; font-size: 14px; color: var(--metin-orta); line-height: 1.5; }
.ayar-bolum .uye-form .dugme { margin-top: 2px; }
.ayar-bolum .form-onay { margin-bottom: 10px; }
.ayar-bolum#bildirimler .form-onay { margin-bottom: 14px; color: var(--metin); }
.ayar-bildirim__not {
	display: block;
	margin-top: 2px;
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--metin-orta);
}
.ayar-satir-form { margin: -4px 0 14px; }
.ayar-bolum--tehlike { border-color: #f3c6c6; }
.ayar-bolum--tehlike .ayar-bolum__basi { color: var(--kirmizi-600); }
.ayar-rozet {
	display: inline-block;
	margin-left: 6px;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	vertical-align: middle;
}
.ayar-rozet--iyi { background: var(--yesil-100); color: var(--yesil-600); }
.ayar-rozet--uyari { background: var(--sari-100); color: var(--sari-600); }
.hesap-alt { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
/* Kayıt: hesap türü */
.hesap-tipi { margin: 0 0 16px; padding: 0; border: 0; display: grid; gap: 8px; }
.hesap-tipi legend { padding: 0; margin-bottom: 6px; }
.hesap-tipi__secenek {
	display: flex; gap: 10px; align-items: flex-start;
	padding: 10px 12px;
	border: 1px solid var(--cizgi); border-radius: var(--r-sm);
	cursor: pointer; font-size: 14px;
}
.hesap-tipi__secenek:has(input:checked) { border-color: var(--mavi-600); background: var(--mavi-50); }
.hesap-tipi__secenek input { margin-top: 3px; accent-color: var(--mavi-600); }
.hesap-tipi__secenek span { display: grid; gap: 2px; }
.hesap-tipi__secenek small { color: var(--metin-soluk); font-size: 12.5px; line-height: 1.4; }
/* Onaylı galeri rozeti */
.ilan-kart__galeri {
	display: inline-flex; align-items: center; gap: 4px;
	margin: 6px 0 2px;
	font-size: 12px; font-weight: 600; color: var(--yesil-600);
	max-width: 100%;
}
.ilan-kart__galeri svg { width: 14px; height: 14px; flex-shrink: 0; }
.ilan-kart__galeri span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tablo-galeri {
	display: inline-flex; align-items: center; gap: 3px;
	margin-left: 6px; vertical-align: middle;
	font-size: 11.5px; font-weight: 600; color: var(--yesil-600);
	white-space: nowrap;
}
.tablo-galeri svg { width: 13px; height: 13px; flex-shrink: 0; }
/*
 * Durum pulları: İlanlarım ve Hesabım satırlarında ilanın durumunu ve
 * vitrin süresini gösterir. Renkler duruma göre ayrışır; okunabilirlik
 * için zeminler açık, metin koyu tonda.
 */
/* Kişiselleştirilmiş şeritler (son baktıklarınız / size göre). */
.bolum--ilgi .bolum-basi { margin-bottom: 12px; }
.bolum--ilgi .bolum-basi p { color: var(--metin-soluk); font-size: 13.5px; margin: 2px 0 0; }
/* Asistan iletişim kapısı: sohbetin içindeki küçük form. */
.asis__kapi { display: grid; gap: 8px; }
.asis__kapi p { margin: 0; }
.asis__kapi-satir { display: flex; gap: 8px; flex-wrap: wrap; }
.asis__kapi-satir .alan { flex: 1 1 180px; min-width: 0; }
.asis__kapi-satir .dugme { flex: 0 0 auto; }
.asis__kapi-hata:empty { display: none; }
.asis__kapi-hata { color: var(--kirmizi-600); font-size: 12.5px; font-weight: 600; }
.asis__kapi small { color: var(--metin-soluk); font-size: 12px; line-height: 1.4; }
.durum-pul {
	display: inline-flex; align-items: center; gap: 5px;
	padding: 3px 10px; border-radius: 999px;
	font-size: 12px; font-weight: 650; white-space: nowrap;
	background: var(--yuzey-2); color: var(--metin-orta);
	border: 1px solid var(--cizgi);
}
.durum-pul--publish { background: var(--yesil-100); color: var(--yesil-600); border-color: transparent; }
.durum-pul--draft { background: var(--yuzey-2); color: var(--metin-soluk); }
.durum-pul--pending { background: var(--sari-100); color: var(--sari-600); border-color: transparent; }
.durum-pul--alstar-satildi { background: var(--mavi-100); color: var(--mavi-700); border-color: transparent; }
.durum-pul--alstar-suresi,
.durum-pul--alstar-pasif { background: var(--yuzey-2); color: var(--metin-soluk); }
.durum-pul--alstar-red { background: var(--kirmizi-100); color: var(--kirmizi-600); border-color: transparent; }
.durum-pul--vitrin { background: var(--turuncu-100); color: var(--turuncu-700); border-color: transparent; }
/* Süre uyarısı: kırmızı değil sarı — bu bir hata değil, bir hatırlatma. */
.durum-pul--sure { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
/* Izgara hücresine yayılmasın: pul, metni kadar yer kaplar. */
.ilanlarim-satir .durum-pul,
.ilanlarim-liste .durum-pul { justify-self: start; }
.satici-kutu__onay { display: inline-flex; align-items: center; gap: 4px; color: var(--yesil-600); font-weight: 600; font-size: 13px; }
.galeri-karti {
	display: flex; align-items: center; gap: 14px;
	margin: 0 0 16px; padding: 16px 18px;
}
.galeri-karti__im {
	display: grid; place-items: center;
	width: 52px; height: 52px; flex-shrink: 0;
	border-radius: 50%;
	background: #0b1728; color: #fff;
	font-size: 22px; font-weight: 700;
}
.galeri-karti__metin h2 { margin: 0 0 3px; font-size: 20px; }
.galeri-karti__metin p { margin: 0; font-size: 13.5px; color: var(--metin-orta); }
/* Bot tuzağı: görsel olarak yok, ekran okuyucuya da kapalı (aria-hidden). */
.form-tuzak {
	position: absolute !important;
	left: -10000px;
	top: auto;
	width: 1px; height: 1px;
	overflow: hidden;
}
/* E-posta doğrulama şeridi. */
.dogrulama-serit {
	background: var(--sari-100);
	border-bottom: 1px solid #f3e0ae;
	color: #713f12;
	font-size: 14px;
}
.dogrulama-serit__ic {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding-top: 10px;
	padding-bottom: 10px;
	flex-wrap: wrap;
}
.dogrulama-serit p { margin: 0; line-height: 1.45; }
.dogrulama-serit form { margin: 0; flex-shrink: 0; }
.dogrulama-serit .dugme { background: #fff; color: #713f12; border: 1px solid #e6cf8a; }
.dogrulama-serit .dugme:hover { background: #fffbeb; }

.pano-kartlar {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
	gap: 10px;
	margin-bottom: 26px;
}
.pano-kart {
	padding: 15px;
	background: var(--yuzey);
	border: 1px solid var(--cizgi);
	border-radius: var(--r-md);
	transition: border-color var(--gecis), box-shadow var(--gecis);
}
.pano-kart:hover { border-color: var(--mavi-500); box-shadow: var(--golge-1); }
.pano-kart__sayi { display: block; font-size: 25px; font-weight: 750; letter-spacing: -0.02em; }
.pano-kart__ad { font-size: 13px; color: var(--metin-orta); }

.ilanlarim-satir {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr) auto;
	gap: 14px;
	align-items: center;
	padding: 12px;
	margin-bottom: 9px;
	background: var(--yuzey);
	border: 1px solid var(--cizgi);
	border-radius: var(--r-md);
}
.ilanlarim-satir__foto {
	width: 96px; height: 72px;
	object-fit: cover;
	border-radius: var(--r-sm);
	background: var(--yuzey-2);
}
.ilanlarim-satir__baslik { font-weight: 650; margin-bottom: 3px; }
.ilanlarim-satir__bilgi { font-size: 13px; color: var(--metin-soluk); }
/*
 * Alt satır: solda durum pulları, sağda eylemler. Izgaranın tamamını
 * kaplar; uzun bir pul artık görsel sütununu taşıp düğmelerin üstüne
 * binemez.
 */
/*
 * Yayınla formu: kopya uyarısı çıkınca onay kutusu ve düğme alt alta
 * gelir. Normalde yalnız düğme vardır, o yüzden hizalama sona çekilir.
 */
.ilanlarim-kota {
	margin: 0 0 12px;
	font-size: 13px;
	color: var(--metin-orta);
}
.ilanlarim-kota--dolu {
	padding: 10px 12px;
	border-radius: var(--r-sm);
	background: #fef3c7;
	border: 1px solid #fcd34d;
	color: #92400e;
}

.sihirbaz-yayin {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
	margin: 0;
}
.sihirbaz-yayin .form-hata--genel,
.sihirbaz-yayin .form-onay { align-self: stretch; text-align: start; }

/* İlan istatistikleri: satır altında küçük sayaç şeridi. */
.ilanlarim-sayac {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	margin-top: 4px;
	font-size: 12.5px;
	color: var(--metin-orta);
}
.ilanlarim-sayac__oge { display: inline-flex; align-items: center; gap: 4px; }
.ilanlarim-sayac__oge svg { width: 14px; height: 14px; flex: none; color: var(--metin-soluk); }
.ilanlarim-sayac__oge strong { font-weight: 600; color: var(--metin); }
.ilanlarim-sayac__oge--acil { color: var(--turuncu-700); }
.ilanlarim-sayac__oge--acil svg { color: currentColor; }
.ilanlarim-satir__alt {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 2px;
}
.ilanlarim-satir__eylem { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; margin-inline-start: auto; }
/*
 * Her eylem ayrı bir POST formudur (yayından kaldırma ve silme adres
 * çubuğuna yazılabilecek bir bağlantı olmamalı). Form kendisi esnek
 * yerleşimin bir öğesi olur; tarayıcının varsayılan boşluğu sıfırlanır
 * ki düğmeler tek sıra halinde hizalı dursun.
 */
.ilanlarim-satir__form { margin: 0; display: inline-flex; }

.dugme--tehlike {
	--d-zemin: transparent;
	--d-metin: var(--kirmizi-600);
	--d-kenar: var(--kirmizi-100);
}
.dugme--tehlike:hover { background: var(--kirmizi-100); border-color: var(--kirmizi-600); }

.durum-etiket {
	display: inline-block;
	padding: 3px 9px;
	font-size: 11.5px;
	font-weight: 650;
	border-radius: var(--r-tam);
}
.durum-publish         { color: var(--yesil-600);   background: var(--yesil-100); }
.durum-draft           { color: var(--metin-orta);  background: var(--cizgi); }
.durum-pending         { color: var(--sari-600);    background: var(--sari-100); }
.durum-alstar_satildi  { color: var(--mavi-700);    background: var(--mavi-100); }
.durum-alstar_suresi   { color: var(--metin-soluk); background: var(--yuzey-2); }
.durum-alstar_pasif    { color: var(--metin-soluk); background: var(--yuzey-2); }
.durum-alstar_red      { color: var(--kirmizi-600); background: var(--kirmizi-100); }

/* ---- İlan verme sihirbazı ---- */
.sihirbaz-basi { max-width: 860px; margin: 0 auto 22px; }
/* Sihirbazın üstündeki bilgi/hata/uyarı kutuları form sütunuyla aynı genişlikte */
.sihirbaz-sayfa > .form-bilgi,
.sihirbaz-sayfa > .form-hata--genel { max-width: 860px; margin-inline: auto; }
.sihirbaz-sayfa > .form-bilgi { margin-bottom: 14px; }
.sihirbaz-basi h1 { margin-bottom: 16px; }

.sihirbaz-adimlar {
	display: flex;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: adim;
}
.sihirbaz-adimlar li {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1 1 0;
	min-width: 0;
	padding-top: 10px;
	font-size: 13px;
	font-weight: 600;
	color: var(--metin-soluk);
	border-top: 3px solid var(--cizgi);
}
.sihirbaz-adimlar__no {
	display: grid;
	place-items: center;
	width: 22px; height: 22px;
	flex: none;
	font-size: 12px;
	font-weight: 700;
	color: var(--metin-soluk);
	background: var(--cizgi);
	border-radius: var(--r-tam);
}
.sihirbaz-adimlar__ad { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sihirbaz-adimlar li.simdi { color: var(--turuncu-600); border-top-color: var(--turuncu-500); }
.sihirbaz-adimlar li.simdi .sihirbaz-adimlar__no { color: #fff; background: var(--turuncu-500); }
.sihirbaz-adimlar li.bitti { color: var(--yesil-600); border-top-color: var(--yesil-600); }
.sihirbaz-adimlar li.bitti .sihirbaz-adimlar__no { color: #fff; background: var(--yesil-600); }

.sihirbaz-kutu { max-width: 860px; margin-inline: auto; }
.sihirbaz-taban {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	max-width: 860px;
	margin: 22px auto 0;
	padding-top: 18px;
	border-top: 1px solid var(--cizgi);
}
.sihirbaz-kutu .sihirbaz-taban { margin-inline: 0; }
.sihirbaz-iptal { max-width: 860px; margin: 18px auto 0; text-align: center; }

.secim-izgara {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 168px), 1fr));
	gap: 11px;
	margin-bottom: 20px;
}
.secim-kart { position: relative; display: block; cursor: pointer; }
.secim-kart input {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.secim-kart__ic {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 9px;
	padding: 20px 12px;
	text-align: center;
	background: var(--yuzey);
	border: 1.5px solid var(--cizgi);
	border-radius: var(--r-md);
	transition: border-color var(--gecis), background var(--gecis), box-shadow var(--gecis);
}
.secim-kart:hover .secim-kart__ic { border-color: var(--mavi-500); box-shadow: var(--golge-1); }
.secim-kart input:checked + .secim-kart__ic { border-color: var(--mavi-600); background: var(--mavi-50); }
.secim-kart input:focus-visible + .secim-kart__ic { outline: 3px solid var(--mavi-500); outline-offset: 2px; }
.secim-kart__im {
	display: grid;
	place-items: center;
	width: 44px; height: 44px;
	color: var(--mavi-600);
	background: var(--mavi-50);
	border-radius: var(--r-sm);
}
.secim-kart input:checked + .secim-kart__ic .secim-kart__im { color: #fff; background: var(--mavi-600); }
.secim-kart__ad { font-size: 14.5px; font-weight: 650; }

/* Fotoğraf yükleme */
.foto-yukle { display: grid; gap: 12px; margin-bottom: 8px; }
.foto-alan { display: block; cursor: pointer; }
.foto-alan input {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.foto-alan__ic {
	display: grid;
	place-items: center;
	gap: 6px;
	padding: 30px 20px;
	text-align: center;
	color: var(--metin-orta);
	background: var(--yuzey-2);
	border: 2px dashed var(--cizgi-koyu);
	border-radius: var(--r-md);
	transition: border-color var(--gecis), background var(--gecis);
}
.foto-alan:hover .foto-alan__ic { border-color: var(--mavi-500); background: var(--mavi-50); }
.foto-alan__ic svg { color: var(--metin-soluk); }
.foto-alan__ic strong { font-size: 15px; color: var(--metin); }
.foto-alan__ic span { font-size: 12.5px; color: var(--metin-soluk); }
.foto-alan input:focus-visible + .foto-alan__ic { outline: 3px solid var(--mavi-500); outline-offset: 2px; }
.foto-alan:focus-visible .foto-alan__ic { outline: 3px solid var(--mavi-500); outline-offset: 2px; }
.foto-alan--uzerinde .foto-alan__ic { border-color: var(--mavi-500); background: var(--mavi-50); }
.foto-alan--mesgul { pointer-events: none; opacity: .6; }

/* Yükleme durumu: her fotoğraf için bir satır */
.foto-durum { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.foto-durum:empty { display: none; }
.foto-durum__oge {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 9px 12px;
	font-size: 13.5px;
	background: var(--yuzey-2);
	border-radius: var(--r-sm);
}
.foto-durum__ad { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--metin); }
.foto-durum__ne { flex: none; max-width: 65%; text-align: end; color: var(--metin-orta); }
.foto-durum__oge--tamam .foto-durum__ne { color: var(--yesil-600); font-weight: 650; }
.foto-durum__oge--hata { background: var(--kirmizi-100); }
.foto-durum__oge--hata .foto-durum__ne { color: var(--kirmizi-600); white-space: normal; }

.foto-izgara {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 148px), 1fr));
	gap: 10px;
	margin-bottom: 8px;
}
.foto-oge {
	position: relative;
	margin: 0;
	aspect-ratio: 4 / 3;
	border: 2px solid var(--cizgi);
	border-radius: var(--r-sm);
	overflow: hidden;
	background: var(--yuzey-2);
}
.foto-oge img { width: 100%; height: 100%; object-fit: cover; }
.foto-oge--ana { border-color: var(--turuncu-500); }
.foto-oge__rozet {
	position: absolute;
	top: 5px; inset-inline-start: 5px;
	padding: 2px 7px;
	font-size: 10.5px;
	font-weight: 700;
	color: #fff;
	background: var(--turuncu-500);
	border-radius: var(--r-xs);
}
.foto-oge__eylem {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	display: flex;
	gap: 4px;
	padding: 5px;
	background: linear-gradient(transparent, rgba(7, 15, 28, .82));
}
.foto-oge__eylem form { flex: 1 1 auto; display: flex; }
.foto-oge__dugme {
	width: 100%;
	padding: 5px 4px;
	font-size: 11.5px;
	font-weight: 600;
	color: #fff;
	background: rgba(255, 255, 255, .2);
	border: 0;
	border-radius: var(--r-xs);
	cursor: pointer;
	transition: background var(--gecis);
}
.foto-oge__dugme:hover { background: rgba(255, 255, 255, .34); }
.foto-oge__dugme--sil:hover { background: var(--kirmizi-600); }

.onizleme-kart { max-width: 260px; margin-bottom: 8px; }
/*
 * Önizleme adımı: solda ilanın görüneceği kart, sağda girilen bilgiler.
 * Alt alta dizildiğinde kartın sağında geniş bir boşluk kalıyordu;
 * yan yana durduklarında müşteri karta bakarken özeti de görüyor.
 */
.onizleme-duzen {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: 8px 28px;
	align-items: start;
}
.onizleme-ozet .detay-grup { margin-top: 0; }
.ozellik-liste--tek { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 720px) {
	.onizleme-duzen { grid-template-columns: minmax(0, 1fr); }
	.onizleme-kart { max-width: 100%; }
	.onizleme-ozet .detay-grup { margin-top: 18px; }
}

/* ============================================================
 * 13) MESAJLAŞMA, BİLDİRİM, DEĞERLEME
 * ============================================================ */
.mesaj-ilan {
	display: flex;
	gap: 12px;
	align-items: center;
	padding: 12px;
	margin-bottom: 20px;
	background: var(--yuzey);
	border: 1px solid var(--cizgi);
	border-radius: var(--r-md);
}
.mesaj-ilan__foto {
	width: 64px; height: 64px;
	flex: none;
	object-fit: cover;
	border-radius: var(--r-sm);
	background: var(--yuzey-2);
}
.mesaj-ilan__bilgi { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mesaj-ilan__baslik { font-weight: 650; line-height: 1.35; overflow-wrap: anywhere; }
a.mesaj-ilan__baslik:hover { color: var(--mavi-700); }
.mesaj-ilan__fiyat { font-weight: 700; }
.mesaj-ilan__satici { font-size: 13px; color: var(--metin-soluk); }

/* --- Mesajlarım (gelen kutusu): sohbet listesi düzeni --- */
.mesaj-gizlilik {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-block: -6px 16px;
	font-size: 13px;
	color: var(--metin-soluk);
}
.mesaj-gizlilik svg { flex: none; color: var(--yesil-600); }
.mesaj-liste {
	list-style: none;
	margin-block: 0;
	padding: 0;
	background: var(--yuzey);
	border: 1px solid var(--cizgi);
	border-radius: var(--r-md);
	overflow: hidden;
}
.mesaj-liste__oge + .mesaj-liste__oge .mesaj-liste__govde { border-top: 1px solid var(--cizgi); }
.mesaj-liste__bag {
	display: flex;
	gap: 12px;
	align-items: center;
	padding: 0 14px;
	color: inherit;
	transition: background-color var(--gecis);
}
.mesaj-liste__bag:hover,
.mesaj-liste__bag:focus-visible { background: var(--yuzey-2); }
.mesaj-liste__resim { position: relative; flex: none; width: 50px; height: 50px; }
.mesaj-liste__avatar,
.sohbet__avatar {
	display: grid;
	place-items: center;
	border-radius: 50%;
	font-weight: 700;
	color: #fff;
	background: hsl(var(--ton, 210) 45% 35%);
}
.mesaj-liste__avatar { width: 50px; height: 50px; font-size: 19px; }
/* İlan fotoğrafı avatarın köşesinde: kimle ve hangi araç için konuşulduğu tek bakışta. */
.mesaj-liste__foto {
	position: absolute;
	right: -4px; bottom: -4px;
	width: 26px; height: 26px;
	object-fit: cover;
	border-radius: 50%;
	border: 2px solid var(--yuzey);
	background: var(--yuzey-2);
}
.mesaj-liste__govde {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
	flex: 1 1 auto;
	padding: 12px 0;
}
.mesaj-liste__ust { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.mesaj-liste__ad { font-size: 15.5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mesaj-liste__ust time { font-size: 12px; color: var(--metin-soluk); flex: none; }
.mesaj-liste__oge--yeni .mesaj-liste__ust time { color: var(--yesil-600); font-weight: 600; }
.mesaj-liste__alt { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mesaj-liste__ilan,
.mesaj-liste__ozet {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.mesaj-liste__ilan { font-size: 12.5px; color: var(--mavi-700); }
.mesaj-liste__ozet { flex: 1 1 auto; min-width: 0; font-size: 14px; color: var(--metin-orta); }
.mesaj-liste__ozet .balon__tik { display: inline-block; margin-inline-end: 3px; vertical-align: -1px; }
.mesaj-liste__oge--yeni .mesaj-liste__ozet { color: var(--metin); font-weight: 600; }
.mesaj-liste__rozet {
	flex: none;
	min-width: 21px; height: 21px;
	padding: 0 6px;
	display: grid;
	place-items: center;
	font-size: 11.5px;
	font-weight: 700;
	color: #fff;
	background: var(--sohbet-yesil);
	border-radius: var(--r-tam);
}

/* --- Sohbet penceresi (WhatsApp düzeni) --- */
:root {
	--sohbet-zemin: #efeae2;
	--sohbet-benim: #d9fdd3;
	--sohbet-karsi: #ffffff;
	--sohbet-yesil: #128c4b;
	--sohbet-mavi: #2b86d4;
}
.sohbet-kap { max-width: 900px; padding-block: 16px; }
.sohbet {
	display: flex;
	flex-direction: column;
	position: relative;
	height: calc(100vh - var(--ust-yuk, 61px) - 32px);
	height: calc(100dvh - var(--ust-yuk, 61px) - 32px);
	min-height: 460px;
	overflow: hidden;
	background: var(--sohbet-zemin);
	border: 1px solid var(--cizgi);
	border-radius: var(--r-md);
	box-shadow: var(--golge-1);
}
.sohbet__ust {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 14px 8px 6px;
	background: var(--yuzey);
	border-bottom: 1px solid var(--cizgi);
	flex: none;
}
.sohbet__geri {
	display: grid;
	place-items: center;
	width: 40px; height: 40px;
	flex: none;
	color: var(--metin-orta);
	border-radius: 50%;
}
.sohbet__geri:hover { background: var(--yuzey-2); color: var(--metin); }
.sohbet__avatar { width: 40px; height: 40px; flex: none; font-size: 16px; }
.sohbet__kim { display: flex; flex-direction: column; min-width: 0; }
.sohbet__ad {
	margin: 0;
	font-size: 16px;
	font-weight: 650;
	line-height: 1.25;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.sohbet__rol { font-size: 12.5px; color: var(--metin-soluk); }

.sohbet__ilan {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 14px;
	color: inherit;
	background: var(--yuzey-2);
	border-bottom: 1px solid var(--cizgi);
	flex: none;
}
.sohbet__ilan:hover { background: var(--mavi-50); }
.sohbet__ilan-foto { width: 38px; height: 38px; flex: none; object-fit: cover; border-radius: var(--r-xs); }
.sohbet__ilan-bilgi { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; line-height: 1.3; }
.sohbet__ilan-baslik { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sohbet__ilan-fiyat { font-size: 13px; font-weight: 700; color: var(--metin-orta); }
.sohbet__ilan-durum {
	flex: none;
	padding: 2px 8px;
	font-size: 11.5px;
	font-weight: 600;
	color: var(--sari-600);
	background: var(--sari-100);
	border-radius: var(--r-tam);
}

/* Duvar kâğıdı: hafif nokta deseni, balonlar okunur kalır. */
.sohbet__akis {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 14px clamp(10px, 4%, 48px) 10px;
	background-color: var(--sohbet-zemin);
	background-image: radial-gradient(rgba(84, 70, 52, .07) 1px, transparent 1.2px);
	background-size: 18px 18px;
}
.sohbet__akis:focus-visible { outline: 2px solid var(--mavi-500); outline-offset: -2px; }
.sohbet__not {
	max-width: 520px;
	margin: 0 auto 14px;
	padding: 7px 12px;
	font-size: 12.5px;
	line-height: 1.45;
	text-align: center;
	color: #54473a;
	background: #fff5c4;
	border-radius: var(--r-sm);
	box-shadow: 0 1px .5px rgba(11, 20, 26, .13);
}
.sohbet__not svg { vertical-align: -2px; margin-inline-end: 3px; }

.sohbet__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.sohbet__gun { display: flex; justify-content: center; margin: 10px 0 8px; }
.sohbet__gun span {
	padding: 5px 12px;
	font-size: 12px;
	font-weight: 600;
	color: var(--metin-orta);
	background: var(--yuzey);
	border-radius: var(--r-sm);
	box-shadow: 0 1px .5px rgba(11, 20, 26, .13);
}

.balon { display: flex; max-width: min(78%, 560px); }
.balon--benim { align-self: flex-end; }
.balon--karsi { align-self: flex-start; }
.balon--ilk { margin-top: 8px; }
.balon__ic {
	position: relative;
	padding: 6px 8px 7px 10px;
	font-size: 14.5px;
	line-height: 1.42;
	color: #111b21;
	border-radius: 8px;
	box-shadow: 0 1px .5px rgba(11, 20, 26, .13);
	min-width: 0;
}
.balon--benim .balon__ic { background: var(--sohbet-benim); }
.balon--karsi .balon__ic { background: var(--sohbet-karsi); }
/* Kuyruk: art arda mesajlarda yalnız ilk balonda. */
.balon--ilk.balon--benim .balon__ic { border-start-end-radius: 0; }
.balon--ilk.balon--karsi .balon__ic { border-start-start-radius: 0; }
.balon--ilk .balon__ic::before {
	content: "";
	position: absolute;
	top: 0;
	width: 8px; height: 13px;
}
.balon--ilk.balon--benim .balon__ic::before {
	right: -8px;
	background: var(--sohbet-benim);
	clip-path: polygon(0 0, 100% 0, 0 100%);
}
.balon--ilk.balon--karsi .balon__ic::before {
	left: -8px;
	background: var(--sohbet-karsi);
	clip-path: polygon(0 0, 100% 0, 100% 100%);
}
/* Metin ve saat aynı satırı paylaşır; saat sağ alta yaslanır. */
.balon__metin {
	display: inline;
	margin: 0;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}
.balon__alt {
	float: right;
	display: inline-flex;
	align-items: center;
	gap: 3px;
	margin: 6px 0 -3px 10px;
	font-size: 11px;
	line-height: 1;
	color: #667781;
	white-space: nowrap;
}
.balon__tik { flex: none; color: #8696a0; }
.balon__tik--okundu { color: var(--sohbet-mavi); }
.balon__saat-bekliyor { width: 12px; height: 12px; color: #8696a0; }
.balon--hata .balon__ic { box-shadow: 0 0 0 1.5px var(--kirmizi-600); }
.balon__yeniden {
	display: block;
	margin-top: 4px;
	padding: 0;
	font: inherit;
	font-size: 12px;
	font-weight: 600;
	color: var(--kirmizi-600);
	background: none;
	border: 0;
	cursor: pointer;
}
@media (prefers-reduced-motion: no-preference) {
	.balon--yeni { animation: balon-gir .18s ease-out; }
	@keyframes balon-gir { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}

.sohbet__yeni-dugme {
	position: absolute;
	right: 16px;
	bottom: calc(76px + env(safe-area-inset-bottom));
	z-index: 2;
	padding: 7px 14px;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	color: var(--sohbet-yesil);
	background: var(--yuzey);
	border: 0;
	border-radius: var(--r-tam);
	box-shadow: var(--golge-2);
	cursor: pointer;
}
.sohbet__yeni-dugme[hidden] { display: none; }

.sohbet__baslangic { text-align: center; padding: 18px 0 8px; }
.sohbet__baslangic-yazi { margin: 0 0 10px; font-size: 13px; color: var(--metin-orta); }
.sohbet__hazir { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.sohbet__hazir-dugme {
	padding: 8px 14px;
	font: inherit;
	font-size: 13.5px;
	color: var(--sohbet-yesil);
	background: var(--yuzey);
	border: 1px solid #c8e6d2;
	border-radius: var(--r-tam);
	cursor: pointer;
	transition: background-color var(--gecis);
}
.sohbet__hazir-dugme:hover { background: #effaf2; }

.sohbet__hata {
	margin: 0;
	padding: 8px 14px;
	font-size: 13px;
	font-weight: 600;
	color: var(--kirmizi-600);
	background: var(--kirmizi-100);
	flex: none;
}
.sohbet__yaz {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
	background: #f0f2f5;
	flex: none;
}
.sohbet__alan {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 44px;
	max-height: 150px;
	padding: 11px 16px;
	font: inherit;
	font-size: 15px;
	line-height: 1.4;
	color: var(--metin);
	background: var(--yuzey);
	border: 1px solid transparent;
	border-radius: 22px;
	resize: none;
	overflow-y: auto;
}
.sohbet__alan:focus,
.sohbet__alan:focus-visible { outline: none; border-color: var(--sohbet-yesil); box-shadow: 0 0 0 2px rgba(18, 140, 75, .18); }
.sohbet__gonder {
	display: grid;
	place-items: center;
	width: 44px; height: 44px;
	flex: none;
	color: #fff;
	background: var(--sohbet-yesil);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: background-color var(--gecis), transform var(--gecis);
}
.sohbet__gonder:hover { background: #0e7a40; }
.sohbet__gonder:active { transform: scale(.94); }
.sohbet__gonder:focus-visible { outline: 2px solid var(--mavi-500); outline-offset: 2px; }
.sohbet__gonder svg { margin-inline-start: 2px; }

/* Sohbet açıkken sayfa tek iş yapar: alt bilgi, yüzen düğmeler gizli. */
.alsat-sohbet .gb,
.alsat-sohbet .alt,
.alsat-sohbet .asis-acici,
.alsat-sohbet .kiyas-tepsi { display: none; }

@media (max-width: 720px) {
	.sohbet-kap { padding: 0; max-width: none; }
	.sohbet {
		height: calc(100vh - var(--ust-yuk, 61px));
		height: calc(100dvh - var(--ust-yuk, 61px));
		min-height: 0;
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}
	.alsat-sohbet { padding-bottom: 0; }
	.alsat-sohbet .alt-menu,
	.alsat-sohbet .ust-arama { display: none; }
	.balon { max-width: 86%; }
	.mesaj-liste { border-inline: 0; border-radius: 0; margin-inline: calc(var(--bosluk) * -1); }
}

.sayfa-giris { max-width: 62ch; margin: 0 0 22px; color: var(--metin-orta); line-height: 1.6; }

.degerleme-form { margin-bottom: 26px; }
.degerleme-form .dugme { margin-top: 6px; }
.degerleme-sonuc {
	padding: 22px;
	background: var(--yuzey);
	border: 1px solid var(--cizgi);
	border-radius: var(--r-lg);
	box-shadow: var(--golge-1);
}
.degerleme-sonuc h2 { margin: 0 0 16px; font-size: 18px; }
.degerleme-sonuc h3 { margin: 24px 0 12px; font-size: 15px; }
.degerleme-sonuc--bos { color: var(--metin-orta); }
.degerleme-sonuc--bos p { margin: 0; }
.degerleme-aralik {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	text-align: center;
}
.degerleme-aralik__uc {
	padding: 14px 8px;
	background: var(--yuzey-2);
	border: 1px solid var(--cizgi);
	border-radius: var(--r-md);
}
.degerleme-aralik__uc--orta { background: var(--mavi-50); border-color: var(--mavi-100); }
.degerleme-aralik__etiket { display: block; margin-bottom: 5px; font-size: 12.5px; color: var(--metin-soluk); }
.degerleme-aralik__uc strong { font-size: 17px; overflow-wrap: anywhere; }
.degerleme-aralik__uc--orta strong { font-size: 20px; color: var(--mavi-700); }
.degerleme-dayanak { margin: 14px 0 0; font-size: 13.5px; color: var(--metin-orta); }
.degerleme-uyari {
	margin: 12px 0 0;
	padding: 10px 12px;
	font-size: 13.5px;
	color: var(--sari-600);
	background: var(--sari-100);
	border-radius: var(--r-sm);
}
.degerleme-not { margin: 18px 0 0; font-size: 12.5px; color: var(--metin-soluk); line-height: 1.6; }

/* ============================================================
 * 14) KURUMSAL SAYFALAR
 * ============================================================ */
.sayfa > h1 { margin: 0 0 6px; }
.sayfa-icerik { line-height: 1.7; }
.sayfa-icerik h2 { margin: 30px 0 10px; font-size: 19px; }
.sayfa-icerik h3 { margin: 22px 0 8px; font-size: 16px; }
.sayfa-icerik p { margin: 0 0 14px; color: var(--metin-orta); }
.sayfa-icerik ul, .sayfa-icerik ol {
	margin: 0 0 16px;
	padding-inline-start: 22px;
	color: var(--metin-orta);
}
.sayfa-icerik li { margin-bottom: 7px; }
.sayfa-icerik a { color: var(--mavi-700); text-decoration: underline; text-underline-offset: 2px; }
/* Yöneticiye görünen "şirket bilgisi girilmedi" işareti (ziyaretçi görmez). */
.eksik-bilgi {
	padding: 1px 7px;
	border-radius: 4px;
	background: var(--kirmizi-100);
	color: var(--kirmizi-600);
	font-size: 0.9em;
	font-weight: 600;
}
.eksik-bilgi a { color: inherit; }
.sayfa-tarih {
	margin: 28px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--cizgi);
	font-size: 12.5px;
	color: var(--metin-soluk);
}

/* ============================================================
 * 15) ALTLIK
 * ============================================================ */
.alt {
	margin-top: 40px;
	padding-block: 40px 0;
	color: rgba(255, 255, 255, .72);
	background: var(--gece-900);
}
.alt a { color: rgba(255, 255, 255, .72); }
.alt a:hover { color: #fff; }

.alt__izgara {
	display: grid;
	/* min() olmadan minmax dar ekranda satırı taşırır. */
	grid-template-columns: minmax(min(100%, 220px), 1.4fr) repeat(auto-fit, minmax(min(100%, 150px), 1fr));
	gap: 26px 20px;
	padding-bottom: 32px;
}
.alt__tanitim p { margin: 12px 0 0; font-size: 13.5px; line-height: 1.6; max-width: 34ch; }
/* Marka sloganı: tanıtım metninden önce, ondan ayrışsın diye vurgulu. */
/*
 * Marka sloganı kahraman başlığın üstünde, küçük bir üst başlık olarak
 * durur. H1'in yerini almaz: başlık arama motoru için tanımlayıcı
 * kalmalı, slogan ise markayı taşır.
 */
.vitrin-ust__slogan {
	margin: 0 0 8px;
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--turuncu-500);
}

.alt__slogan {
	margin-top: 14px !important;
	font-size: 15px !important;
	font-weight: 700;
	letter-spacing: .01em;
	color: var(--turuncu-500);
}
.alt__baslik {
	margin: 0 0 12px;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #fff;
}
.alt__liste { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 13.5px; }

.alt__cizgi {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	padding-block: 16px;
	font-size: 12.5px;
	border-top: 1px solid rgba(255, 255, 255, .1);
}

/* Mobil alt menü */
.alt-menu {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 70;
	display: none;
	grid-template-columns: repeat(4, 1fr);
	background: var(--yuzey);
	border-top: 1px solid var(--cizgi);
	box-shadow: 0 -2px 12px rgba(15, 23, 42, .08);
	padding-bottom: env(safe-area-inset-bottom);
}
.alt-menu a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	padding: 8px 4px;
	font-size: 10.5px;
	font-weight: 600;
	color: var(--metin-soluk);
}
.alt-menu a[aria-current="page"] { color: var(--mavi-700); }
.alt-menu svg { width: 21px; height: 21px; }

/* ============================================================
 * 16) YARDIMCILAR VE ERİŞİLEBİLİRLİK
 * ============================================================ */
.gizli { display: none !important; }
.sadece-okuyucu {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--mavi-500);
	outline-offset: 2px;
	border-radius: var(--r-xs);
}
.ust :focus-visible, .alt :focus-visible, .vitrin-ust :focus-visible { outline-color: #fff; }

.atla {
	position: absolute;
	inset-inline-start: 50%;
	top: -60px;
	z-index: 200;
	padding: 10px 18px;
	color: #fff;
	background: var(--gece-900);
	border-radius: 0 0 var(--r-sm) var(--r-sm);
	transform: translateX(-50%);
	transition: top var(--gecis);
}
.atla:focus { top: 0; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
	.ilan-kart:hover { transform: none; }
	.ilan-kart:hover .ilan-kart__gorsel img { transform: none; }
}

/* ============================================================
 * UYARLAMA — ÜST ÇUBUK
 *
 * Beş kategorili menü + arama + sağ düğmeler tek satıra ancak
 * ~1180px üstünde sığar. Altında menü hamburgere geçer; yoksa
 * arama kutusu ezilip ikonlar yandaki düğmelerin üstüne biner.
 * ============================================================ */
@media (min-width: 1181px) {
	.ust__ic { gap: 14px; }
	.ust-menu a { padding-inline: 10px; }
	/* Üyede mesaj + hesap ikonu yan yana durur; "Hesabım" yazısı
	 * arama kutusunun yerini yiyordu. İkonun erişilebilir adı var. */
	.logged-in .ust-bag--hesap .ust-bag__yazi { display: none; }
	/* Menü açıkken pencere büyütülürse çekmece açık kalmasın. */
	.mobil-menu[data-acik="1"] { display: none; }
}
@media (max-width: 1320px) and (min-width: 1181px) {
	.ust-menu a { padding-inline: 8px; font-size: 14px; }
	.ust-bag__yazi { display: none; }
}
@media (max-width: 1180px) {
	.ust-menu { display: none; }
	.mobil-dugme { display: grid; }
}
/* Dar tablet: arama kutusu kendi satırına iner, yoksa ~80px'e düşüyor. */
@media (max-width: 820px) {
	.ust__ic { gap: 10px; flex-wrap: wrap; }
	.ust-arama { order: 3; flex-basis: 100%; max-width: none; margin-bottom: 10px; }
}

/* ============================================================
 * UYARLAMA — 1100px
 * ============================================================ */
@media (max-width: 1100px) {
	.detay-duzen { grid-template-columns: minmax(0, 1fr); }
	.detay-yan { position: static; }
	.ust-arama { max-width: none; }
	.liste-duzen { grid-template-columns: 236px minmax(0, 1fr); gap: 16px; }
}

/* ============================================================
 * UYARLAMA — 900px (tablet)
 * ============================================================ */
@media (max-width: 900px) {
	.liste-duzen { grid-template-columns: minmax(0, 1fr); }

	/* Filtre paneli tam ekran çekmeceye döner. */
	.filtre {
		position: fixed;
		inset: 0;
		z-index: 90;
		max-height: none;
		height: 100%;
		border: 0;
		border-radius: 0;
		display: none;
	}
	.filtre[data-acik="1"] { display: block; }
	.filtre-kapat { display: grid; }
	.filtre-ac { display: inline-flex; }
	.filtre-uygula-serit { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }

	.ilan-izgara--liste .ilan-kart__gorsel { width: 172px; }
}

/* ============================================================
 * UYARLAMA — 640px (telefon)
 * ============================================================ */
@media (max-width: 640px) {
	body { padding-bottom: 62px; }
	/* Odaklanan/kaydırılan öğe (form düğmesi, hata satırı) alt menünün altında kalmasın. */
	html { scroll-padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
	.alt-menu { display: grid; }

	.ust__ic { min-height: 54px; gap: 10px; flex-wrap: wrap; }
	.ust-arama { order: 3; flex-basis: 100%; max-width: none; margin-bottom: 10px; }
	.ust__sag { gap: 4px; }
	.ust-bag__yazi { display: none; }
	/* Hesap / giriş alttaki hızlı erişim çubuğunda var; üstte tekrar
	 * edince logo ile düğmeler tek satıra sığmıyordu. */
	.ust-bag--hesap { display: none !important; }
	.logo { font-size: 17px; }

	.ilan-izgara { grid-template-columns: repeat(auto-fill, minmax(min(100%, 163px), 1fr)); gap: 10px; }
	.ilan-kart__govde { padding: 10px 11px 11px; gap: 5px; }
	.ilan-kart__baslik { font-size: 13.5px; }
	.ilan-kart__fiyat { font-size: 15px; }
	.ilan-kart__yer { font-size: 11.5px; }
	.ilan-izgara--liste .ilan-kart { flex-direction: column; }
	.ilan-izgara--liste .ilan-kart__gorsel { width: 100%; }

	.form-ikili { grid-template-columns: minmax(0, 1fr); }
	.degerleme-aralik { grid-template-columns: minmax(0, 1fr); }
	.detay-eylem__ikili { grid-template-columns: minmax(0, 1fr); }

	.sihirbaz-taban { flex-direction: column-reverse; }
	.sihirbaz-taban .dugme { width: 100%; }
	.sihirbaz-adimlar li { font-size: 11px; }

	.ilanlarim-satir { grid-template-columns: 74px minmax(0, 1fr); }
	.ilanlarim-satir__foto { width: 74px; height: 56px; }

	.hizli-arama { padding: 14px; }
	.hizli-arama__izgara { grid-template-columns: minmax(0, 1fr); }

	.alt { margin-top: 28px; }
	.alt__izgara { grid-template-columns: minmax(0, 1fr); gap: 22px; }
	.alt__cizgi { flex-direction: column; align-items: flex-start; gap: 6px; }

	.liste-ust { align-items: flex-start; }
	.liste-ust__sag { width: 100%; }
	.liste-ust__sag .alan { flex: 1 1 auto; width: auto; min-width: 0; }
}

/*
 * İlan tablosu 1280px altında satır kartına döner: tablet ve küçük
 * dizüstünde filtre paneli yanında tablonun görünen genişliği ~710px
 * kalıyor, İl/Favori/Karşılaştır sütunları kutunun dışında kalıyordu.
 */
@media (max-width: 1280px) {
	/*
	 * Tablo satırları karta dönüşür: telefonda dokuz sütunlu tablo
	 * yatay kaydırma demektir ve kimse yana kaydırmaz.
	 *
	 * Satır blok olur, fotoğraf mutlak konumlanır; küçük hücreler
	 * satır içi akarak tek çizgide birleşir. Marka ve seri gizlenir,
	 * çünkü ikisi de başlıkta zaten yazıyor.
	 */
	.ilan-tablo thead { display: none; }
	.ilan-tablo tbody tr {
		position: relative;
		display: block;
		padding: 11px 44px 11px 120px;
		min-height: 94px;
	}
	.ilan-tablo td { display: inline; padding: 0; border: 0; text-align: start !important; }

	.h-gorsel {
		position: absolute;
		inset-inline-start: 11px;
		top: 11px;
		display: block !important;
		width: auto;
		padding: 0 !important;
	}
	.tablo-gorsel, .tablo-gorsel img { width: 98px; }
	.tablo-gorsel img { height: 74px; }

	.alan-marka, .alan-seri { display: none !important; }

	/*
	 * Değeri olmayan hücreler telefonda hiç görünmez. Masaüstü
	 * tabloda "—" sütunu hizalı tutuyor ve bilgi veriyor; kart
	 * düzeninde ise başlığın önünde sallanan bir tireye dönüşüyor.
	 */
	.ilan-tablo td.bos { display: none !important; }

	.h-favori {
		position: absolute;
		inset-inline-end: 6px;
		top: 8px;
		display: block !important;
		width: auto;
		padding: 0 !important;
	}

	.h-baslik {
		display: block !important;
		margin-bottom: 4px;
		font-size: 14px;
		line-height: 1.35;
	}
	.h-fiyat {
		display: block !important;
		margin-top: 4px;
		font-size: 16px;
	}
	/* Karşılaştır kutusu kalbin altında, sağ boşlukta durur; satır
	 * içinde kalınca ilçe adının yanına yapışıyordu. */
	.h-kiyas {
		position: absolute;
		inset-inline-end: 6px;
		top: 50px;
		display: block !important;
		width: 36px;
		padding: 0 !important;
		text-align: center !important;
	}
	.h-kiyas .kiyas-sec--tablo { min-width: 36px; min-height: 36px; }

	/* Marka ve seri gizli olduğundan modelin önünde ayraç kalmasın. */
	.ilan-tablo td.alan-model::before { content: none; }

	.h-alan, .h-tarih, .h-yer { font-size: 12.5px; color: var(--metin-soluk); }
	/* Ayraç sonrakinin başına konur: son ögeden sonra sarkan nokta olmaz. */
	.h-alan + .h-alan::before,
	.h-tarih + .h-yer::before { content: " · "; color: var(--cizgi-koyu); }
}

@media (max-width: 380px) {
	/* Logo, mesaj, "İlan ver" ve menü tek satıra sığsın. */
	.ust__ic { gap: 8px; }
	.ust__sag > .dugme--vurgu { padding-inline: 12px; gap: 6px; }

	.ilan-izgara { grid-template-columns: minmax(0, 1fr); }
	.ilan-tablo tbody tr { padding-inline-start: 100px; min-height: 82px; }
	.tablo-gorsel, .tablo-gorsel img { width: 80px; }
	.tablo-gorsel img { height: 60px; }
}
@media (max-width: 345px) {
	/* Üyede mesaj ikonu da var; en dar telefonda üstteki "İlan ver"
	 * yer bırakmıyor. Alttaki hızlı erişim çubuğunda zaten duruyor. */
	.logged-in .ust__sag > .dugme--vurgu { display: none; }
}

/* ============================================================
 * 17) ARAÇ UZMANI ASİSTANI
 *
 * Sağ altta duran açıcı düğme ve yan panel. Panel sayfayı
 * kaplamaz: kullanıcı ilanı görürken soru sorabilmeli. 720px
 * altında tam ekrana geçer, çünkü dar ekranda yan panel hem
 * paneli hem sayfayı kullanılmaz yapıyor.
 * ============================================================ */
/*
 * Açıcı düğme iki satırlı bir kart gibi kurulur: marka işareti, adı ve
 * ne işe yaradığı. Tek kelimelik bir baloncuk, kullanıcının neyle
 * karşılaşacağını söylemiyor; tıklanma oranı da orada kayboluyor.
 */
.asis-acici {
	position: fixed;
	inset-inline-end: 18px;
	bottom: 18px;
	z-index: 60;
	display: inline-flex;
	align-items: center;
	gap: 11px;
	padding: 9px 18px 9px 10px;
	font: inherit;
	color: #fff;
	background: var(--gece-900);
	border: 0;
	border-radius: var(--r-tam);
	box-shadow: 0 10px 30px rgba(7, 15, 28, .34);
	cursor: pointer;
	text-align: start;
	transition: transform var(--gecis), background var(--gecis), box-shadow var(--gecis);
}
.asis-acici:hover {
	transform: translateY(-2px);
	background: #14243a;
	box-shadow: 0 14px 34px rgba(7, 15, 28, .42);
}
.asis-acici:focus-visible { outline: 3px solid var(--turuncu-500); outline-offset: 3px; }
.asis-acici[hidden] { display: none; }

/* İşaretin arkasındaki açık daire, marka turuncusunu koyu zeminde taşır. */
.asis-acici__isaret {
	position: relative;
	display: grid;
	place-items: center;
	width: 38px; height: 38px;
	flex: none;
	background: rgba(249, 115, 22, .14);
	border-radius: var(--r-tam);
}
.asis-acici__isaret::after {
	content: "";
	position: absolute;
	inset-inline-end: 1px;
	bottom: 1px;
	width: 9px; height: 9px;
	background: #22c55e;
	border: 2px solid var(--gece-900);
	border-radius: var(--r-tam);
}
.asis-acici__yazi { display: flex; flex-direction: column; line-height: 1.25; }
.asis-acici__ad { font-size: 14px; font-weight: 700; }
.asis-acici__alt { font-size: 11.5px; font-weight: 500; color: rgba(255, 255, 255, .62); }

.asis {
	position: fixed;
	inset-inline-end: 18px;
	bottom: 18px;
	z-index: 70;
	display: flex;
	flex-direction: column;
	width: min(400px, calc(100vw - 36px));
	height: min(620px, calc(100vh - 36px));
	background: #fff;
	border: 1px solid var(--cizgi);
	border-radius: var(--r-lg);
	box-shadow: 0 18px 50px rgba(7, 15, 28, .28);
	overflow: hidden;
}
.asis[hidden] { display: none; }

.asis__basi {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 12px 14px;
	color: #fff;
	background: var(--gece-900);
	flex: none;
}
.asis__kimlik { display: flex; align-items: center; gap: 10px; min-width: 0; }
.asis__rozet {
	display: grid;
	place-items: center;
	width: 36px; height: 36px;
	flex: none;
	background: rgba(249, 115, 22, .16);
	border-radius: var(--r-tam);
}
.asis__ad { margin: 0; font-size: 14.5px; font-weight: 700; }
.asis__alt { margin: 1px 0 0; font-size: 12px; color: rgba(255, 255, 255, .7); }
.asis__kapat {
	display: grid;
	place-items: center;
	width: 30px; height: 30px;
	flex: none;
	color: rgba(255, 255, 255, .8);
	background: none;
	border: 0;
	border-radius: var(--r-xs);
	cursor: pointer;
}
.asis__kapat:hover { color: #fff; background: rgba(255, 255, 255, .12); }

.asis__akis {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	background: var(--yuzey-2);
	overscroll-behavior: contain;
}
.asis__karsilama { font-size: 13.5px; line-height: 1.6; color: var(--metin-orta); }
.asis__karsilama p { margin: 0 0 10px; }
.asis__oneriler { display: flex; flex-wrap: wrap; gap: 7px; }
.asis__oneri {
	padding: 7px 12px;
	font: inherit;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--mavi-700);
	background: #fff;
	border: 1px solid var(--cizgi-koyu);
	border-radius: var(--r-tam);
	cursor: pointer;
	transition: border-color var(--gecis), background var(--gecis);
}
.asis__oneri:hover { border-color: var(--mavi-600); background: var(--mavi-50); }

.asis__balon {
	max-width: 88%;
	padding: 10px 13px;
	font-size: 13.5px;
	line-height: 1.62;
	border-radius: 13px;
	overflow-wrap: anywhere;
}
.asis__balon--ben {
	align-self: flex-end;
	color: #fff;
	background: var(--mavi-600);
	border-end-end-radius: 4px;
}
.asis__balon--asistan {
	align-self: flex-start;
	color: var(--metin);
	background: #fff;
	border: 1px solid var(--cizgi);
	border-end-start-radius: 4px;
}
.asis__balon--hata {
	align-self: stretch;
	max-width: 100%;
	color: var(--kirmizi-600);
	background: #fef2f2;
	border: 1px solid #fecaca;
}
.asis__balon p { margin: 0 0 8px; }
.asis__balon p:last-child { margin-bottom: 0; }
.asis__balon ul, .asis__balon ol { margin: 0 0 8px; padding-inline-start: 20px; }
.asis__balon li { margin-bottom: 3px; }
.asis__balon img { max-width: 100%; border-radius: 9px; display: block; }
.asis__balon strong { font-weight: 700; }

.asis__dugmeler { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.asis__kaynaklar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 8px; font-size: 12px; color: var(--metin-soluk); }
.asis__kaynaklar-baslik { font-weight: 600; }
.asis__kaynaklar a { color: var(--mavi-700); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.asis__bag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 12px;
	font-size: 12.5px;
	font-weight: 650;
	border-radius: var(--r-tam);
	border: 1px solid var(--cizgi-koyu);
	color: var(--metin-orta);
	background: #fff;
	transition: border-color var(--gecis), color var(--gecis);
}
.asis__bag:hover { border-color: var(--mavi-600); color: var(--mavi-700); }
.asis__bag--video { color: #b4211c; border-color: #f3c6c4; }
.asis__bag--video:hover { border-color: #d92c26; color: #b4211c; }

.asis__yaziyor { display: inline-flex; gap: 4px; padding: 4px 0; }
.asis__yaziyor span {
	width: 7px; height: 7px;
	background: var(--metin-soluk);
	border-radius: 50%;
	animation: asis-zipla 1.1s infinite ease-in-out;
}
.asis__yaziyor span:nth-child(2) { animation-delay: .15s; }
.asis__yaziyor span:nth-child(3) { animation-delay: .3s; }
@keyframes asis-zipla {
	0%, 60%, 100% { transform: translateY(0); opacity: .45; }
	30%           { transform: translateY(-4px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.asis__yaziyor span { animation: none; }
	.asis-acici:hover { transform: none; }
}

.asis__onizleme {
	position: relative;
	flex: none;
	padding: 10px 14px 0;
	background: #fff;
}
.asis__onizleme img { max-height: 84px; border-radius: 9px; display: block; }
.asis__onizleme-sil {
	position: absolute;
	inset-inline-start: 62px;
	top: 4px;
	display: grid;
	place-items: center;
	width: 22px; height: 22px;
	color: #fff;
	background: rgba(7, 15, 28, .78);
	border: 0;
	border-radius: var(--r-tam);
	cursor: pointer;
}

.asis__yaz {
	display: flex;
	align-items: flex-end;
	gap: 6px;
	flex: none;
	padding: 10px 12px;
	background: #fff;
	border-top: 1px solid var(--cizgi);
}
.asis__arac,
.asis__gonder {
	display: grid;
	place-items: center;
	width: 34px; height: 34px;
	flex: none;
	border: 0;
	border-radius: var(--r-tam);
	cursor: pointer;
	transition: color var(--gecis), background var(--gecis);
}
.asis__arac { color: var(--metin-soluk); background: none; }
.asis__arac:hover { color: var(--mavi-700); background: var(--yuzey-2); }
.asis__arac[data-dinliyor="1"] { color: #fff; background: var(--kirmizi-600); }
.asis__gonder { color: #fff; background: var(--turuncu-600); }
.asis__gonder:hover { background: var(--turuncu-700); }
.asis__gonder[disabled] { opacity: .45; cursor: default; }

.asis__alan {
	flex: 1 1 auto;
	min-width: 0;
	max-height: 116px;
	padding: 8px 10px;
	font: inherit;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--metin);
	background: var(--yuzey-2);
	border: 1px solid var(--cizgi);
	border-radius: 11px;
	resize: none;
}
.asis__alan:focus { outline: 2px solid var(--mavi-500); outline-offset: 1px; }

.asis__dip {
	margin: 0;
	padding: 0 14px 10px;
	flex: none;
	font-size: 11.5px;
	line-height: 1.45;
	color: var(--metin-soluk);
	background: #fff;
}
.asis__dip-ayrac { margin: 0 4px; }

@media (max-width: 720px) {
	.asis {
		inset: 0;
		width: 100%;
		height: 100%;
		max-height: none;
		border: 0;
		border-radius: 0;
	}
	.asis-acici { bottom: 70px; padding: 10px 14px; font-size: 13px; }
}

@media (max-width: 420px) {
	/* Dar ekranda yalnız işaret kalır; metin yerini içeriğe bırakır. */
	.asis-acici__yazi { display: none; }
	.asis-acici { padding: 8px; gap: 0; }
}

/* Kısa süreli bilgi şeridi (fotoğrafla bul ve benzeri hatalar). */
.site-uyari {
	position: fixed;
	inset-inline: 12px;
	bottom: 18px;
	z-index: 90;
	max-width: 440px;
	margin-inline: auto;
	padding: 11px 16px;
	font-size: 13.5px;
	line-height: 1.45;
	text-align: center;
	color: #fff;
	background: var(--gece-900);
	border-radius: var(--r-md);
	box-shadow: 0 10px 30px rgba(7, 15, 28, .3);
	opacity: 0;
	transform: translateY(8px);
	pointer-events: none;
	transition: opacity .2s ease, transform .2s ease;
}
.site-uyari.gorunur { opacity: 1; transform: translateY(0); }
@media (max-width: 720px) { .site-uyari { bottom: 130px; } }

/* ------------------------------------------------------------------
   Boya-değişen şeması
   Üstten görünüş, ön yukarıda. Panele tıkla → menü. Asıl veri listedeki
   <select> alanlarında; şema yalnız görselleştirir. Renkler ve kod
   harfleri (LB/B/D) ekspertiz raporlarının diliyle uyumlu; renk körü
   kullanıcı için harf, renk için ikinci sinyaldir.
   Kaynak: arastirma/22-sema-tasarimlari.md
   ------------------------------------------------------------------ */
:root {
	--h-orj: #ffffff;  --h-orj-k: #8b97a5;
	--h-lb:  #fdf0b8;  --h-lb-k:  #c9a227;  --h-lb-m:  #6b4e00;
	--h-b:   #f5c518;  --h-b-k:   #b88a00;  --h-b-m:   #4a3500;
	--h-d:   #d13438;  --h-d-k:   #9b1c22;  --h-d-m:   #ffffff;
}
.hasar-secim { margin: 20px 0; border: 1px solid var(--cizgi); border-radius: 10px; background: var(--yuzey); }
.hasar-secim--acik { padding: 4px 0 0; }
.hasar-secim__baslik { padding: 14px 16px; font-weight: 600; cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.hasar-secim__baslik::-webkit-details-marker { display: none; }
.hasar-secim__baslik::before { content: "▸"; margin-inline-end: 4px; color: var(--metin-orta); transition: transform .15s; display: inline-block; }
.hasar-secim[open] .hasar-secim__baslik::before { transform: rotate(90deg); }
.hasar-secim__ipucu { font-weight: 400; font-size: .86rem; color: var(--metin-orta); }
.hasar-secim__ayar { padding: 0 16px 16px; }

.hasar { position: relative; display: grid; grid-template-columns: minmax(280px, 460px) minmax(240px, 1fr); gap: 28px; padding: 0 16px 16px; }
.hasar__sema-sar { text-align: center; }
.hasar-sema { width: 100%; max-width: 460px; height: auto; display: block; margin: 0 auto; }

/* Renk lejantı: ekspertiz raporlarındaki gibi renk şeridi + ad (+ kod). */
.hasar-lejant {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	max-width: 460px;
	margin: 0 auto 12px;
	padding: 0;
	list-style: none;
	border: 1px solid var(--cizgi-koyu);
	border-radius: 8px;
	overflow: hidden;
	background: var(--yuzey);
}
.hasar-lejant li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	padding: 7px 4px 8px;
	font-size: .76rem;
	font-weight: 600;
	letter-spacing: .02em;
	color: #334155;
	text-align: center;
	text-transform: uppercase;
}
.hasar-lejant li + li { border-inline-start: 1px solid var(--cizgi); }
.hasar-lejant__renk { width: 100%; max-width: 72px; height: 9px; border-radius: 2px; border: 1px solid var(--h-orj-k); background: var(--h-orj); }
.hasar-lejant__renk--lokal-boyali { background: var(--h-lb); border-color: var(--h-lb-k); }
.hasar-lejant__renk--boyali { background: var(--h-b); border-color: var(--h-b-k); }
.hasar-lejant__renk--degisen { background: var(--h-d); border-color: var(--h-d-k); }
.hasar-lejant small { font-size: .68rem; font-weight: 700; color: var(--metin-soluk); }

.hasar-sema__teker { fill: #1f2937; }
.hasar-sema__jant { fill: #cbd5e1; stroke: #64748b; stroke-width: 1.5; }
.hasar-sema__gobek { fill: #64748b; }
.hasar-sema__izgara { fill: #475569; }
.hasar-sema__plaka { fill: #fff; stroke: #64748b; stroke-width: 1.2; }
.hasar-sema__kol { fill: #94a3b8; }
.hasar-sema__cizgi { fill: none; stroke: #94a3b8; stroke-width: 1.4; stroke-linecap: round; }
.hasar-sema__kol-jant { stroke: #64748b; stroke-width: 3; stroke-linecap: round; }
.hasar-sema__direk { fill: #94a3b8; }
.hasar-sema__izgara-cubuk { fill: none; stroke: #94a3b8; stroke-width: 1.2; }
.hasar-sema__amblem { fill: #e2e8f0; stroke: #64748b; stroke-width: 1.2; }
.hasar-sema__sis { fill: #f8fafc; stroke: #64748b; stroke-width: 1.2; }
.hasar-sema__egzoz { fill: #334155; }
/* Yön yazıları (ÖN/ARKA/SOL/SAĞ) x koordinatına ortalanır; yoksa
 * "SAĞ" çizimin sağ kenarından taşıp "SA" diye kesiliyordu. */
.hasar-sema__yon,
.hasar-sema__gorunus { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-anchor: middle; fill: var(--metin-soluk); }
.hasar-sema__govde { fill: #f8fafc; stroke: #475569; stroke-width: 2; stroke-linejoin: round; }
.hasar-sema__cam { fill: #d6dde5; stroke: #8492a3; stroke-width: 1.2; stroke-linejoin: round; }
.hasar-sema__ayna { fill: #cbd5e1; stroke: #64748b; stroke-width: 1.2; }
.hasar-sema__far { fill: #f8fafc; stroke: #64748b; stroke-width: 1.2; }
.hasar-sema__stop { fill: #e5484d; stroke: #a51d24; stroke-width: 1; }
.hasar-sema__sabit, .hasar-sema__sus { pointer-events: none; }

.hasar-sema__kutu { fill: var(--h-orj); stroke: var(--h-orj-k); stroke-width: 1.5; stroke-linejoin: round; transition: fill .12s, stroke .12s; }
.hasar-sema__yazi { font-size: 15px; text-anchor: middle; fill: #475569; pointer-events: none; user-select: none; }
.hasar-sema__parca { cursor: pointer; outline: none; }
.hasar-sema__parca:hover .hasar-sema__kutu,
.hasar-sema__parca--acik .hasar-sema__kutu { stroke: var(--turuncu-600); stroke-width: 3; }
.hasar-sema__parca:focus-visible .hasar-sema__kutu { stroke: var(--turuncu-600); stroke-width: 3.5; stroke-dasharray: 6 3; }
.hasar-sema__parca--lokal-boyali .hasar-sema__kutu { fill: var(--h-lb); stroke: var(--h-lb-k); }
.hasar-sema__parca--lokal-boyali .hasar-sema__yazi { fill: var(--h-lb-m); font-weight: 600; }
.hasar-sema__parca--boyali .hasar-sema__kutu { fill: var(--h-b); stroke: var(--h-b-k); }
.hasar-sema__parca--boyali .hasar-sema__yazi { fill: var(--h-b-m); font-weight: 600; }
.hasar-sema__parca--degisen .hasar-sema__kutu { fill: var(--h-d); stroke: var(--h-d-k); }
.hasar-sema__parca--degisen .hasar-sema__yazi { fill: var(--h-d-m); font-weight: 600; }
.hasar-sema__kod { pointer-events: none; }
.hasar-sema__kod-zemin { fill: #fff; stroke: currentColor; stroke-width: 1.5; }
.hasar-sema__kod-yazi { font-size: 12px; font-weight: 700; text-anchor: middle; fill: #1f2937; }
.hasar-sema__parca--lokal-boyali .hasar-sema__kod { color: var(--h-lb-k); }
.hasar-sema__parca--boyali .hasar-sema__kod { color: var(--h-b-k); }
.hasar-sema__parca--degisen .hasar-sema__kod { color: var(--h-d-k); }

/* Görselli şema (ekspertiz şablonu): görsel arkada; parça rengi "multiply"
 * ile boyanır, çizgiler rengin altından görünür. Orijinal şeffaf ama tıklanır. */
.hasar-sema--resim { max-width: 520px; }
.hasar-sema--resim .hasar-sema__kutu { fill: #fff; fill-opacity: 0; stroke: none; pointer-events: all; mix-blend-mode: multiply; }
.hasar-sema--resim .hasar-sema__parca--lokal-boyali .hasar-sema__kutu { fill: var(--h-lb); fill-opacity: .95; }
.hasar-sema--resim .hasar-sema__parca--boyali .hasar-sema__kutu { fill: var(--h-b); fill-opacity: .9; }
.hasar-sema--resim .hasar-sema__parca--degisen .hasar-sema__kutu { fill: var(--h-d); fill-opacity: .85; }
.hasar-sema--resim .hasar-sema__parca:hover .hasar-sema__kutu,
.hasar-sema--resim .hasar-sema__parca--acik .hasar-sema__kutu { stroke: var(--turuncu-600); stroke-width: 2; mix-blend-mode: normal; }
.hasar-sema--resim .hasar-sema__parca:hover:not(.hasar-sema__parca--orijinal) .hasar-sema__kutu,
.hasar-sema--resim .hasar-sema__parca--acik:not(.hasar-sema__parca--orijinal) .hasar-sema__kutu { mix-blend-mode: multiply; }
.hasar-sema--resim .hasar-sema__parca:focus-visible .hasar-sema__kutu { stroke: var(--turuncu-600); stroke-width: 2.4; stroke-dasharray: 5 3; }
.hasar-sema--resim .hasar-sema__yazi { font-size: 13px; font-weight: 500; fill: #3a4450; }
.hasar-sema--resim .hasar-sema__parca--degisen .hasar-sema__yazi { fill: #fff; }
.hasar-sema--resim .hasar-sema__resim { pointer-events: none; }
.hasar-sema__isabet { fill: none; stroke: transparent; stroke-width: 24; stroke-linejoin: round; pointer-events: stroke; }

.hasar__ozet { margin: 10px 0 2px; font-weight: 600; }
.hasar__ipucu { margin: 0 0 10px; font-size: .82rem; color: var(--metin-orta); }

.hasar__liste { align-content: start; }
.hasar__liste[hidden] { display: none; }
.hasar__liste-ac { margin: 0 0 10px; }
.hasar__satir { display: grid; grid-template-columns: 1fr 138px; align-items: center; gap: 10px; padding: 3px 0; }
.hasar__ad { font-size: .9rem; }
.hasar__satir--secili .hasar__ad { font-weight: 600; }
.alan--kucuk { padding: 6px 8px; font-size: .88rem; }
.form-satir--onay { display: flex; align-items: flex-end; }
.onay { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.form-izgara--uclu { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

/* Tıklayınca açılan menü: masaüstünde panelin yanında, mobilde alttan. */
.hasar-menu {
	position: absolute; z-index: 40; min-width: 210px; padding: 6px;
	background: var(--yuzey); border: 1px solid var(--cizgi-koyu); border-radius: 12px;
	box-shadow: 0 12px 32px rgba(15, 23, 42, .18);
}
.hasar-menu__baslik { font-size: .8rem; font-weight: 600; color: var(--metin-orta); padding: 6px 10px 4px; }
.hasar-menu__secenek {
	display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 10px;
	width: 100%; min-height: 44px; padding: 8px 10px; border: 0; border-radius: 8px;
	background: transparent; color: var(--metin); font: inherit; text-align: left; cursor: pointer;
}
.hasar-menu__secenek:hover, .hasar-menu__secenek:focus-visible { background: var(--zemin); outline: none; }
.hasar-menu__secenek[aria-checked="true"] { background: var(--zemin); font-weight: 600; }
.hasar-menu__secenek[aria-checked="true"] .hasar-menu__ad::after { content: " ✓"; color: var(--turuncu-600); }
.hasar-menu__renk { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--h-orj-k); background: var(--h-orj); }
.hasar-menu__secenek--lokal-boyali .hasar-menu__renk { background: var(--h-lb); border-color: var(--h-lb-k); }
.hasar-menu__secenek--boyali .hasar-menu__renk { background: var(--h-b); border-color: var(--h-b-k); }
.hasar-menu__secenek--degisen .hasar-menu__renk { background: var(--h-d); border-color: var(--h-d-k); }
.hasar-menu__kod { font-size: .72rem; font-weight: 700; color: var(--metin-soluk); border: 1px solid var(--cizgi-koyu); border-radius: 999px; padding: 1px 7px; }
.hasar-menu__perde { position: fixed; inset: 0; z-index: 39; background: transparent; }
/* Dar ekranda alt çekmece, mobil alt menünün (z 70) ve asistan düğmesinin (z 60) ÜSTÜNDE durmalı. */

@media (max-width: 720px) {
	.hasar { grid-template-columns: 1fr; gap: 18px; }
	.hasar-menu {
		position: fixed; left: 0 !important; right: 0; bottom: 0; top: auto !important; transform: none !important;
		z-index: 95; width: auto; min-width: 0; border-radius: 16px 16px 0 0;
		padding: 10px 12px calc(14px + env(safe-area-inset-bottom));
		box-shadow: 0 -8px 32px rgba(15, 23, 42, .25);
	}
	.hasar-menu__perde { z-index: 94; }
	.hasar-menu__baslik { font-size: .95rem; padding: 6px 10px 8px; color: var(--metin); }
	.hasar-menu__secenek { min-height: 50px; font-size: 1rem; }
	.hasar-menu__perde { background: rgba(15, 23, 42, .35); }
}

/* Sonuç: hasarsız ↔ hasarlı karşılaştırması */
.deger-kiyas {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 14px;
	margin: 16px 0;
}
.deger-kiyas__kutu {
	border: 1px solid var(--cizgi);
	border-radius: 10px;
	padding: 14px;
	text-align: center;
	background: var(--yuzey);
}
.deger-kiyas__kutu--vurgu { border-color: var(--turuncu-600); border-width: 2px; }
.deger-kiyas__etiket { display: block; font-size: .82rem; color: var(--metin-orta); }
.deger-kiyas__tutar { display: block; font-size: 1.5rem; margin: 4px 0; }
.deger-kiyas__bant { display: block; font-size: .8rem; color: var(--metin-orta); }
.deger-kiyas__ok { font-size: 1.6rem; color: var(--metin-orta); }

.deger-fark { font-size: 1.05rem; margin: 10px 0 18px; }
.deger-fark__yuzde { color: var(--metin-orta); }

.deger-gerekce { margin: 8px 0 18px; padding-inline-start: 20px; }
.deger-gerekce li { margin-bottom: 6px; line-height: 1.55; }

.deger-tablo { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: .9rem; }
.deger-tablo th, .deger-tablo td { padding: 8px 10px; text-align: right; border-bottom: 1px solid var(--cizgi); }
.deger-tablo th:first-child, .deger-tablo td:first-child,
.deger-tablo th:nth-child(2), .deger-tablo td:nth-child(2) { text-align: left; }
.deger-tablo thead th { font-size: .82rem; color: var(--metin-orta); font-weight: 600; }
.deger-tablo tfoot td { border-bottom: 0; padding-top: 10px; }
.deger-tablo__eksik { color: var(--metin-orta); }
.deger-tablo__not { text-align: left !important; font-style: italic; }
.deger-tablo__aciklama { font-size: .85rem; color: var(--metin-orta); line-height: 1.55; }

@media (max-width: 720px) {
	.deger-kiyas { grid-template-columns: 1fr; }
	.deger-kiyas__ok { transform: rotate(90deg); justify-self: center; }
	.deger-tablo { font-size: .82rem; }
	.deger-tablo th, .deger-tablo td { padding: 6px 5px; }
}
/* Asistan: kanal düğmesi — kanal adı öne, arama terimi altta. */
.asis__bag--kanal {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1px;
	line-height: 1.25;
	border-color: #c4302b;
	background: #fff5f5;
}
.asis__bag--kanal:hover { background: #ffe9e9; }
.asis__bag-kanal { font-weight: 650; color: #b3261e; }
.asis__bag-terim { font-size: .78rem; color: var(--metin-orta); }

.ilanlarim-satir__red { display:block; font-size:13px; color: var(--kirmizi-600); margin-top: 4px; }

/* ============================================================
 * 30) ERİŞİLEBİLİRLİK — DOKUNMA HEDEFLERİ
 *
 * Küçük ikon düğmeleri masaüstünde 32-40 px ile rahat tıklanıyor;
 * sorun parmakla kullanımda. Bu yüzden büyütme YALNIZ dokunmatik
 * girdide (pointer: coarse) yapılır: fare kullanan düzen birebir
 * korunur, dokunmatikte hedefler 40-44 px'e çıkar.
 *
 * Görünmez bir ::after katmanıyla hedef büyütmek denendi ve terk
 * edildi: katman komşu düğmelerin üstüne taşıp onların dokunuşunu
 * yutuyordu (ilan tablosunda "Aramayı kaydet" tıklanamaz oluyordu).
 * Gerçek boyutu büyütmek hem dürüst hem öngörülebilir.
 *
 * İlan tablosu sıkışık bir düzendir; orada büyütme yapılmaz, hedefler
 * 32-36 px ile AA eşiği olan 24 px'in üstünde kalır.
 * ============================================================ */

@media (pointer: coarse) {

	/* İkon düğmeleri: kare hedef. */
	.favori-dugme,
	.ust-arama__foto,
	.ust-arama__dugme,
	.gorunum-dugme,
	.mobil-dugme,
	.galeri__ok {
		width: 40px;
		height: 40px;
	}

	/* Yazı düğmeleri, form alanları ve bağlantı düğmeleri. */
	.dugme,
	.alan,
	select.alan,
	.gb__dugme,
	.atla,
	.ust-bag,
	.logo,
	.uye-kutu__unuttum {
		min-height: 44px;
	}

	.logo,
	.ust-bag,
	.uye-kutu__unuttum {
		display: inline-flex;
		align-items: center;
	}

	.dugme--kucuk {
		min-height: 40px;
	}

	/* Kart üstündeki karşılaştırma rozeti: dolgu ile büyür. */
	.kiyas-sec {
		padding: 9px 12px;
	}

	/* Kırıntı yolu bağlantıları tek satır yüksekliğinde kalıyordu. */
	.kirinti a {
		display: inline-flex;
		align-items: center;
		min-height: 32px;
	}

	/* Onay kutusu ve radyo düğmesinin gerçek hedefi onları saran etikettir. */
	.form-onay,
	.hesap-tipi__secenek {
		min-height: 44px;
		align-items: center;
	}

	/* İlan tablosu: hücreler dar, büyütme komşu hedefi yutar. */
	.ilan-tablo-sar .favori-dugme,
	.favori-dugme--tablo {
		width: 36px;
		height: 36px;
	}
	.ilan-tablo-sar .kiyas-sec,
	.kiyas-sec--tablo {
		padding: 6px;
	}
}

/* ============================================================
 * 17) DONANIM, KİRALIK, KOŞULLU ALANLAR (Ekim 2026)
 * ============================================================ */
.rozet--kiralik { background: var(--mavi-600); }
.detay-islem { margin: 0 0 6px; }
.detay-depozito { margin: -8px 0 12px; font-size: 13px; color: var(--metin-orta); }

/* Filtre panelinde çoklu alan: başlıklı, açılır alt gruplar. */
.filtre-not { margin: 0 0 8px; font-size: 12px; color: var(--metin-soluk); }
.filtre-grup__secili {
	margin-inline-start: auto;
	padding: 1px 7px;
	font-size: 11px;
	font-weight: 700;
	color: #fff;
	background: var(--mavi-600);
	border-radius: var(--r-tam);
}
.filtre-alt-grup { border-top: 1px solid var(--cizgi); padding: 4px 0; }
.filtre-alt-grup:first-of-type { border-top: 0; }
.filtre-alt-grup > summary {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--metin);
	cursor: pointer;
	list-style: none;
}
.filtre-alt-grup > summary::-webkit-details-marker { display: none; }
.filtre-alt-grup > summary::before { content: "+"; width: 1.1em; color: var(--metin-soluk); font-weight: 700; }
.filtre-alt-grup[open] > summary::before { content: "–"; }
.filtre-alt-grup > summary span { font-weight: 400; color: var(--metin-soluk); font-size: 12px; }
.filtre-alt-grup .filtre-secenek { padding-inline-start: 18px; }

/* İlan formunda donanım seçimi. */
.donanim-secim { display: grid; gap: 8px; margin-bottom: 8px; }
.donanim-grup { border: 1px solid var(--cizgi); border-radius: var(--r-md); background: var(--yuzey); }
.donanim-grup > summary {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 11px 16px;
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
	list-style: none;
}
.donanim-grup > summary::-webkit-details-marker { display: none; }
.donanim-grup > summary::before { content: "+"; width: 1.2em; font-weight: 700; color: var(--metin-soluk); }
.donanim-grup[open] > summary::before { content: "–"; }
.donanim-grup__sayi { margin-inline-start: auto; font-size: 12px; font-weight: 600; color: var(--mavi-700); }
.donanim-izgara {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: 4px 14px;
	padding: 4px 16px 14px;
}
.donanim-kutu {
	display: flex;
	align-items: center;
	gap: 9px;
	min-height: 36px;
	font-size: 13.5px;
	color: var(--metin-orta);
	cursor: pointer;
}
.donanim-kutu input { width: 17px; height: 17px; flex: none; accent-color: var(--mavi-600); }
.donanim-kutu:hover { color: var(--mavi-700); }

/* İlan sayfasında donanım listesi. */
.donanim-liste {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
	gap: 4px 18px;
	margin: 0 0 6px;
	padding: 0;
	list-style: none;
	font-size: 13.5px;
}
.donanim-liste li { display: flex; align-items: center; gap: 7px; padding: 4px 0; }
.donanim-liste svg { flex: none; color: var(--yesil-600); }

/* Ana sayfa özel vitrin kısayolları (kiralık, elektrikli, klasik, hasarlı). */
.ozel-vitrin {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: 10px;
	margin-top: 14px;
}
.ozel-vitrin__kart {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 11px 14px;
	background: var(--yuzey-2);
	border: 1px dashed var(--cizgi-koyu);
	border-radius: var(--r-md);
	transition: border-color var(--gecis), background var(--gecis);
}
.ozel-vitrin__kart:hover { border-color: var(--mavi-500); background: var(--mavi-50); border-style: solid; }
.ozel-vitrin__ikon { display: grid; place-items: center; width: 36px; height: 36px; flex: none; color: var(--turuncu-600); background: var(--turuncu-100); border-radius: var(--r-sm); }
.ozel-vitrin__ad { font-size: 14px; font-weight: 650; }
.ozel-vitrin__alt { font-size: 12.5px; color: var(--metin-soluk); }

/* ============================================================
 * 18) EKSPERTİZ RAPORU (Ekim 2026)
 * ============================================================ */
.rozet--ekspertiz { background: var(--yesil-600); }

.detay-ekspertiz {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px;
	padding: 10px 12px;
	color: var(--yesil-600);
	text-decoration: none;
	background: var(--yesil-100);
	border: 1px solid color-mix(in srgb, var(--yesil-600) 30%, transparent);
	border-radius: var(--r-sm);
}
.detay-ekspertiz > span { display: flex; flex-direction: column; line-height: 1.3; }
.detay-ekspertiz strong { font-size: 14px; }
.detay-ekspertiz > span > span { font-size: 12.5px; color: var(--metin-orta); text-decoration: underline; }
.detay-ekspertiz:hover > span > span,
.detay-ekspertiz:focus-visible > span > span { color: var(--yesil-600); }

.ekspertiz-yukle { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--cizgi); }
.ekspertiz-yukle__ek { margin-inline-start: 6px; font-size: 12px; font-weight: 500; color: var(--metin-soluk); }
.ekspertiz-yukle__mevcut {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 10px 0;
	padding: 8px 12px;
	color: var(--yesil-600);
	background: var(--yesil-100);
	border-radius: var(--r-sm);
}
.ekspertiz-yukle__mevcut a { min-width: 0; overflow-wrap: anywhere; color: inherit; font-weight: 600; }
.ekspertiz-yukle__mevcut form { margin-inline-start: auto; }
.ekspertiz-yukle__form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; }
.ekspertiz-yukle__form input[type="file"] { max-width: 100%; font-size: 14px; }

/* ============================================================
 * 19) TAŞIT KREDİSİ HESAPLAYICI (Ekim 2026)
 * ============================================================ */
.kredi__form {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin: 14px 0 16px;
}
.kredi__alan { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.kredi__alan label { font-size: 13px; font-weight: 600; color: var(--metin-orta); }
.kredi__alan input,
.kredi__alan select {
	width: 100%;
	min-height: 42px;
	padding: 8px 10px;
	font: inherit;
	font-variant-numeric: tabular-nums;
	color: var(--metin);
	background: var(--yuzey, #fff);
	border: 1px solid var(--cizgi-koyu);
	border-radius: var(--r-sm);
}
.kredi__alan input[aria-invalid="true"] { border-color: var(--kirmizi-600); }
.kredi__ipucu { font-size: 12px; color: var(--metin-soluk); }
.kredi__sonuc {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	margin: 0;
}
.kredi__sonuc > div { padding: 10px 12px; background: var(--zemin, #f8fafc); border-radius: var(--r-sm); }
.kredi__sonuc dt { font-size: 12px; color: var(--metin-soluk); }
.kredi__sonuc dd { margin: 2px 0 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.kredi__sonuc .kredi__sonuc-ana { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; background: var(--mavi-50); }
.kredi__sonuc .kredi__sonuc-ana dd { font-size: 24px; color: var(--mavi-700, var(--mavi-600)); }
.kredi__not { margin: 12px 0 0; font-size: 12.5px; color: var(--metin-soluk); }
@media (max-width: 640px) {
	.kredi__form,
	.kredi__sonuc { grid-template-columns: 1fr; }
	.kredi__sonuc .kredi__sonuc-ana dd { font-size: 21px; }
}

/* ============================================================
 * 20) ÖNE ÇIKARMA: RENKLİ ÇERÇEVE (Ekim 2026)
 * Vitrinin turuncusundan ayrışsın diye mavi; kalın başlık ikinci işaret.
 * ============================================================ */
.ilan-kart--vurgu { border: 2px solid var(--mavi-600); box-shadow: 0 0 0 3px var(--mavi-50); }
.ilan-kart--vurgu .ilan-kart__baslik a { font-weight: 800; color: var(--mavi-700); }
.ilan-tablo tbody tr.vurgu { box-shadow: inset 3px 0 0 var(--mavi-600); background: var(--mavi-50); }
.ilan-tablo tbody tr.vurgu .h-baslik a { font-weight: 800; }

/* ============================================================
 * 21) SATICI DEĞERLENDİRMESİ (Ekim 2026)
 * ============================================================ */
.yildiz { display: inline-flex; gap: 1px; line-height: 1; vertical-align: -1px; }
.yildiz__o { color: var(--cizgi-koyu); font-size: 15px; }
.yildiz__o--dolu { color: #e0a100; }

.satici-kutu__puan {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 0 0 12px;
	font-size: 13.5px;
	color: var(--metin);
	text-decoration: none;
}
.satici-kutu__puan span:last-child { color: var(--metin-soluk); }
.satici-kutu__puan:hover span:last-child { text-decoration: underline; }
.satici-profil__puan-adet { font-weight: 500; color: var(--metin-soluk); }

.degerlendirme { margin-top: 24px; padding: 20px; }
.degerlendirme__ozet { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; margin: 4px 0 18px; }
.degerlendirme__not { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.degerlendirme__not strong { font-size: 34px; line-height: 1; }
.degerlendirme__not .yildiz__o { font-size: 18px; }
.degerlendirme__not > span:last-child { font-size: 13px; color: var(--metin-soluk); }
.degerlendirme__dagilim { flex: 1 1 240px; max-width: 360px; margin: 0; padding: 0; list-style: none; }
.degerlendirme__dagilim li { display: grid; grid-template-columns: 34px 1fr 28px; align-items: center; gap: 8px; font-size: 12.5px; color: var(--metin-orta); }
.degerlendirme__dagilim li + li { margin-top: 4px; }
.degerlendirme__cubuk { height: 7px; overflow: hidden; background: var(--zemin); border-radius: 4px; }
.degerlendirme__cubuk span { display: block; height: 100%; background: #e0a100; border-radius: 4px; }

.degerlendirme__liste { margin: 0; padding: 0; list-style: none; }
.degerlendirme__oge { padding: 14px 0; border-top: 1px solid var(--cizgi); }
.degerlendirme__bas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; }
.degerlendirme__tarih { font-size: 12.5px; color: var(--metin-soluk); }
.degerlendirme__metin { margin: 6px 0 0; overflow-wrap: anywhere; white-space: pre-line; }
.degerlendirme__yanit { margin: 10px 0 0 14px; padding: 10px 12px; font-size: 14px; background: var(--zemin); border-inline-start: 3px solid var(--mavi-600); border-radius: var(--r-sm); }
.degerlendirme__yanit p { margin: 4px 0 0; white-space: pre-line; overflow-wrap: anywhere; }
.degerlendirme__yanitla { margin-top: 8px; }
.degerlendirme__yanitla summary { cursor: pointer; font-size: 13.5px; color: var(--mavi-700); }
.degerlendirme__yanitla form { display: grid; gap: 8px; margin-top: 8px; }
.degerlendirme__yanitla textarea,
.degerlendirme__form textarea { width: 100%; padding: 10px; font: inherit; border: 1px solid var(--cizgi-koyu); border-radius: var(--r-sm); }

.degerlendirme__form { display: grid; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--cizgi); }
.degerlendirme__form .dugme { justify-self: start; }

/* Yıldız seçimi: sağdan sola dizilmiş radyo; seçilen ve solundakiler dolar. */
.puan-sec { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; margin: 0; padding: 0; border: 0; }
.puan-sec legend { float: left; width: 100%; margin-bottom: 4px; font-size: 13px; font-weight: 600; color: var(--metin-orta); }
.puan-sec input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.puan-sec label { cursor: pointer; padding: 2px; font-size: 30px; line-height: 1; color: var(--cizgi-koyu); }
.puan-sec input:checked ~ label,
.puan-sec label:hover,
.puan-sec label:hover ~ label { color: #e0a100; }
.puan-sec input:focus-visible + label { outline: 2px solid var(--mavi-600); outline-offset: 2px; border-radius: 4px; }

/* ============================================================
 * 22) YAKINIMDAKİLER (Ekim 2026)
 * ============================================================ */
.filtre-yakin {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	margin: 0 0 8px;
	padding: 9px 12px;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--mavi-700);
	background: var(--mavi-50);
	border: 1px dashed var(--mavi-500);
	border-radius: var(--r-sm);
	cursor: pointer;
}
.filtre-yakin:hover { border-style: solid; }
.filtre-yakin:disabled { opacity: .6; cursor: progress; }