/**
 * Oto İlan — Ultra Modern Frontend CSS
 *
 * @package OtoIlan
 */

/* ==========================================================================
   Google Fonts — Inter
   ========================================================================== */

/* Google Font — ayarlardan veya varsayılan Inter yüklenir (Frontend.php). */

/* ==========================================================================
   SVG İkonlar
   ========================================================================== */

.oto-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	line-height: 0;
	color: inherit;
	vertical-align: middle;
}

.oto-icon__svg {
	display: block;
	width: 1.15em;
	height: 1.15em;
}

/* ==========================================================================
   CSS Değişkenleri
   ========================================================================== */

:root {
	/* Renkler */
	--oi-primary:        #E31F2E;
	--oi-primary-light:  #f14754;
	--oi-primary-dark:   #c11a27;
	--oi-primary-glow:   rgba( 227, 31, 46, 0.25 );
	--oi-accent:         #f97316;
	--oi-accent-light:   #fb923c;
	--oi-success:        #10b981;
	--oi-danger:         #ef4444;
	--oi-warning:        #f59e0b;

	/* Nötr */
	--oi-white:          #ffffff;
	--oi-gray-50:        #f8fafc;
	--oi-gray-100:       #f1f5f9;
	--oi-gray-200:       #e2e8f0;
	--oi-gray-300:       #cbd5e1;
	--oi-gray-400:       #94a3b8;
	--oi-gray-500:       #64748b;
	--oi-gray-600:       #475569;
	--oi-gray-700:       #334155;
	--oi-gray-800:       #1e293b;
	--oi-gray-900:       #0f172a;

	/* Gradyanlar */
	--oi-gradient-hero:  linear-gradient( 135deg, #0f172a 0%, #4a1519 50%, #a81824 100% );
	--oi-gradient-card:  linear-gradient( 145deg, #ffffff 0%, #f8fafc 100% );
	--oi-gradient-price: linear-gradient( 135deg, #E31F2E 0%, #c11a27 100% );
	--oi-gradient-btn:   linear-gradient( 135deg, #E31F2E 0%, #c11a27 100% );

	/* Gölgeler */
	--oi-shadow-xs:      0 1px 2px rgba( 0, 0, 0, 0.05 );
	--oi-shadow-sm:      0 2px 8px rgba( 0, 0, 0, 0.08 );
	--oi-shadow-md:      0 4px 16px rgba( 0, 0, 0, 0.10 );
	--oi-shadow-lg:      0 8px 32px rgba( 0, 0, 0, 0.12 );
	--oi-shadow-xl:      0 16px 48px rgba( 0, 0, 0, 0.16 );
	--oi-shadow-card:    0 4px 24px rgba( 227, 31, 46, 0.08 );
	--oi-shadow-hover:   0 12px 40px rgba( 227, 31, 46, 0.18 );

	/* Tipografi */
	--oi-font:           'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	/* Boyutlar */
	--oi-radius-sm:      6px;
	--oi-radius:         12px;
	--oi-radius-lg:      16px;
	--oi-radius-xl:      24px;
	--oi-radius-full:    9999px;

	/* Form kontrolleri */
	--oi-form-control-h:   36px;
	--oi-form-control-px:  10px;
	--oi-form-control-fs:  12px;
	--oi-form-label-fs:    8px;
	--oi-form-label-gap:   4px;
	--oi-form-field-gap:   10px;

	/* Geçişler */
	--oi-transition:     0.25s cubic-bezier( 0.4, 0, 0.2, 1 );
	--oi-transition-slow: 0.4s cubic-bezier( 0.4, 0, 0.2, 1 );
}

/* ==========================================================================
   Temel Reset
   ========================================================================== */

.oto-ilan-archive,
.oto-ilan-single,
.oto-ilan-listings-wrap,
.oto-ilan-search-widget,
.oto-ilan-featured {
	font-family: var( --oi-font );
	color: var( --oi-gray-800 );
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	margin: 50px 0;
}

/* ==========================================================================
   Container
   ========================================================================== */

.oto-ilan-container {
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 24px;
}

/* ==========================================================================
   Butonlar
   ========================================================================== */

.oto-ilan-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 24px;
	border-radius: var( --oi-radius-full );
	font-family: var( --oi-font );
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	border: 2px solid transparent;
	transition: all var( --oi-transition );
	white-space: nowrap;
	letter-spacing: -0.01em;
}

.oto-ilan-btn--primary {
	background: var( --oi-gradient-btn );
	color: var( --oi-white );
	box-shadow: 0 4px 14px var( --oi-primary-glow );
}

.oto-ilan-btn--primary:hover {
	transform: translateY( -1px );
	box-shadow: 0 6px 20px var( --oi-primary-glow );
	color: var( --oi-white );
}

.oto-ilan-btn--primary:active {
	transform: translateY( 0 );
}

.oto-ilan-btn--outline {
	background: transparent;
	color: var( --oi-primary );
	border-color: var( --oi-primary );
}

.oto-ilan-btn--outline:hover {
	background: var( --oi-primary );
	color: var( --oi-white );
	box-shadow: 0 4px 14px var( --oi-primary-glow );
}

.oto-ilan-btn--ghost {
	background: var( --oi-gray-100 );
	color: var( --oi-gray-700 );
	border-color: transparent;
}

.oto-ilan-btn--ghost:hover {
	background: var( --oi-gray-200 );
	color: var( --oi-gray-900 );
}

.oto-ilan-btn--phone {
	background: linear-gradient( 135deg, #10b981 0%, #059669 100% );
	color: var( --oi-white );
	box-shadow: 0 4px 14px rgba( 16, 185, 129, 0.3 );
	font-size: 15px;
	padding: 13px 24px;
}

.oto-ilan-btn--phone:hover {
	transform: translateY( -1px );
	box-shadow: 0 6px 20px rgba( 16, 185, 129, 0.4 );
	color: var( --oi-white );
}

.oto-ilan-btn--whatsapp {
	background: linear-gradient( 135deg, #25d366 0%, #128c7e 100% );
	color: var( --oi-white );
	box-shadow: 0 4px 14px rgba( 37, 211, 102, 0.3 );
}

.oto-ilan-btn--whatsapp:hover {
	transform: translateY( -1px );
	box-shadow: 0 6px 20px rgba( 37, 211, 102, 0.4 );
	color: var( --oi-white );
}

.oto-ilan-btn--full { width: 100%; }

.oto-ilan-btn svg,
.oto-ilan-btn .oto-icon {
	font-size: 16px;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

/* ==========================================================================
   Spinner
   ========================================================================== */

.oto-ilan-spinner {
	display: inline-block;
	width: 18px;
	height: 18px;
	border: 2px solid rgba( 255, 255, 255, 0.3 );
	border-top-color: currentColor;
	border-radius: 50%;
	animation: oi-spin 0.65s linear infinite;
}

@keyframes oi-spin {
	to { transform: rotate( 360deg ); }
}

.oto-ilan-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 60px 20px;
	color: var( --oi-gray-500 );
	font-size: 14px;
	font-weight: 500;
}

.oto-ilan-loading .oto-ilan-spinner {
	border-color: var( --oi-gray-200 );
	border-top-color: var( --oi-primary );
	width: 24px;
	height: 24px;
}

/* ==========================================================================
   Breadcrumb
   ========================================================================== */

.oto-ilan-breadcrumb {
	margin-bottom: 24px;
}

.oto-ilan-breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 13px;
	color: var( --oi-gray-400 );
}

.oto-ilan-breadcrumb__list li:not( :last-child )::after {
	content: "/";
	margin-left: 4px;
	color: var( --oi-gray-300 );
}

.oto-ilan-breadcrumb__list a {
	color: var( --oi-gray-500 );
	text-decoration: none;
	transition: color var( --oi-transition );
}

.oto-ilan-breadcrumb__list a:hover {
	color: var( --oi-primary );
}

.oto-ilan-breadcrumb__list li:last-child {
	color: var( --oi-gray-700 );
	font-weight: 500;
}

/* ==========================================================================
   ARAÇ KARTI — Ultra Modern
   ========================================================================== */

.oto-ilan-card {
	position: relative;
	background: var( --oi-white );
	border-radius: var( --oi-radius-lg );
	box-shadow: var( --oi-shadow-card );
	overflow: hidden;
	transition: transform var( --oi-transition ), box-shadow var( --oi-transition );
	display: flex;
	flex-direction: column;
	border: 1px solid var( --oi-gray-100 );
}

.oto-ilan-card:hover {
	transform: translateY( -6px );
	box-shadow: var( --oi-shadow-hover );
	border-color: rgba( 37, 99, 235, 0.15 );
}

.oto-ilan-card--featured {
	border-color: var( --oi-accent );
	box-shadow: 0 4px 24px rgba( 249, 115, 22, 0.15 );
}

.oto-ilan-card--featured:hover {
	box-shadow: 0 12px 40px rgba( 249, 115, 22, 0.25 );
}

/* Görsel */
.oto-ilan-card__image-wrap {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var( --oi-gray-100 );
}

.oto-ilan-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var( --oi-transition-slow );
}

.oto-ilan-card:hover .oto-ilan-card__image {
	transform: scale( 1.06 );
}

.oto-ilan-card__image--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient( 135deg, var( --oi-gray-100 ) 0%, var( --oi-gray-200 ) 100% );
}

.oto-ilan-card__image--placeholder .oto-icon {
	font-size: 52px;
	width: 52px;
	height: 52px;
	color: var( --oi-gray-300 );
}

/* Görsel üstü overlay */
.oto-ilan-card__image-wrap::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient( to top, rgba( 0, 0, 0, 0.35 ) 0%, transparent 50% );
	opacity: 0;
	transition: opacity var( --oi-transition );
}

.oto-ilan-card:hover .oto-ilan-card__image-wrap::after {
	opacity: 1;
}

/* Badge'ler */
.oto-ilan-card__badges {
	position: absolute;
	top: 12px;
	left: 12px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	z-index: 2;
}

.oto-ilan-card__badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	border-radius: var( --oi-radius-full );
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	backdrop-filter: blur( 8px );
}

.oto-ilan-card__badge--featured {
	background: rgba( 249, 115, 22, 0.9 );
	color: var( --oi-white );
}

.oto-ilan-card__badge--sold {
	background: rgba( 239, 68, 68, 0.9 );
	color: var( --oi-white );
}

.oto-ilan-card__badge--new {
	background: rgba( 16, 185, 129, 0.9 );
	color: var( --oi-white );
}

/* İçerik */
.oto-ilan-card__body {
	padding: 16px 18px 12px;
	flex: 1;
}

/* Marka + Model etiketi */
.oto-ilan-card__meta {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 6px;
}

.oto-ilan-card__brand-tag {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	color: var( --oi-primary );
	background: rgba( 37, 99, 235, 0.08 );
	padding: 2px 8px;
	border-radius: var( --oi-radius-full );
}

.oto-ilan-card__year-tag {
	font-size: 11px;
	font-weight: 600;
	color: var( --oi-gray-500 );
	background: var( --oi-gray-100 );
	padding: 2px 8px;
	border-radius: var( --oi-radius-full );
}

/* Başlık */
.oto-ilan-card__title {
	margin: 0 0 12px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -0.02em;
}

.oto-ilan-card__title a {
	color: var( --oi-gray-900 );
	text-decoration: none;
	transition: color var( --oi-transition );
}

.oto-ilan-card__title a:hover {
	color: var( --oi-primary );
}

/* Özellikler */
.oto-ilan-card__specs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.oto-ilan-card__spec {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 12px;
	color: var( --oi-gray-500 );
	font-weight: 500;
}

.oto-ilan-card__spec-icon {
	font-size: 13px;
	width: 13px;
	height: 13px;
	color: var( --oi-primary-light );
	flex-shrink: 0;
}

/* Footer */
.oto-ilan-card__footer {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 12px 16px 14px;
	border-top: 1px solid var( --oi-gray-100 );
	margin-top: auto;
}

.oto-ilan-card__price-block,
.oto-ilan-card__price-wrap {
	display: flex;
	flex-direction: column;
	gap: 2px;
	width: 100%;
}

.oto-ilan-card__price {
	font-size: 20px;
	font-weight: 900;
	letter-spacing: -0.03em;
	background: var( --oi-gradient-price );
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	line-height: 1;
}

.oto-ilan-card__price-note {
	font-size: 10px;
	font-weight: 500;
	color: var( --oi-gray-400 );
	margin-top: 2px;
}

.oto-ilan-card__btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 8px 16px;
	background: var( --oi-gradient-btn );
	color: var( --oi-white );
	border-radius: var( --oi-radius-full );
	font-size: 12px;
	font-weight: 700;
	text-decoration: none;
	transition: all var( --oi-transition );
	box-shadow: 0 2px 8px var( --oi-primary-glow );
	letter-spacing: 0.01em;
}

.oto-ilan-card__btn:hover {
	transform: translateY( -1px );
	box-shadow: 0 4px 14px var( --oi-primary-glow );
	color: var( --oi-white );
}

.oto-ilan-card__btn .oto-icon {
	font-size: 13px;
	width: 13px;
	height: 13px;
}

/* ==========================================================================
   ARAÇ GRİD
   ========================================================================== */

.oto-ilan-grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 24px;
}

.oto-ilan-grid--cols-1 { grid-template-columns: 1fr; }
.oto-ilan-grid--cols-2 { grid-template-columns: repeat( 2, 1fr ); }
.oto-ilan-grid--cols-3 { grid-template-columns: repeat( 3, 1fr ); }
.oto-ilan-grid--cols-4 { grid-template-columns: repeat( 4, 1fr ); }

@media ( max-width: 1200px ) {
	.oto-ilan-grid--cols-4 { grid-template-columns: repeat( 3, 1fr ); }
}

@media ( max-width: 1024px ) {
	.oto-ilan-grid,
	.oto-ilan-grid--cols-3,
	.oto-ilan-grid--cols-4 { grid-template-columns: repeat( 2, 1fr ); }
}

@media ( max-width: 600px ) {
	.oto-ilan-grid,
	.oto-ilan-grid--cols-2,
	.oto-ilan-grid--cols-3,
	.oto-ilan-grid--cols-4 { grid-template-columns: 1fr; }
}

/* Liste görünümü */
.oto-ilan-grid--list {
	grid-template-columns: 1fr;
	gap: 16px;
}

.oto-ilan-grid--list .oto-ilan-card {
	flex-direction: row;
	align-items: stretch;
	min-height: 168px;
}

.oto-ilan-grid--list .oto-ilan-card__image-wrap {
	width: 260px;
	flex-shrink: 0;
	aspect-ratio: unset;
	align-self: stretch;
	min-height: 168px;
	height: auto;
	position: relative;
	overflow: hidden;
}

.oto-ilan-grid--list .oto-ilan-card__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.oto-ilan-grid--list .oto-ilan-card:hover .oto-ilan-card__image {
	transform: none;
}

.oto-ilan-grid--list .oto-ilan-card__image--placeholder {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.oto-ilan-grid--list .oto-ilan-card__body {
	flex: 1;
	min-width: 0;
	padding: 16px 20px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.oto-ilan-grid--list .oto-ilan-card__specs {
	grid-template-columns: repeat( 4, 1fr );
}

.oto-ilan-grid--list .oto-ilan-card__footer {
	width: 200px;
	flex-shrink: 0;
	margin-top: 0;
	border-top: none;
	border-left: 1px solid var( --oi-gray-100 );
	padding: 16px;
	justify-content: center;
}

/* Sonuç yok */
.oto-ilan-no-results {
	grid-column: 1 / -1;
	text-align: center;
	padding: 80px 20px;
}

.oto-ilan-no-results__icon {
	width: 80px;
	height: 80px;
	background: var( --oi-gray-100 );
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 20px;
}

.oto-ilan-no-results__icon .oto-icon {
	font-size: 36px;
	width: 36px;
	height: 36px;
	color: var( --oi-gray-400 );
}

.oto-ilan-no-results h3 {
	font-size: 18px;
	font-weight: 700;
	color: var( --oi-gray-700 );
	margin: 0 0 8px;
}

.oto-ilan-no-results p {
	color: var( --oi-gray-500 );
	margin: 0 0 20px;
}

/* ==========================================================================
   FİLTRE — Modern Horizontal
   ========================================================================== */

.oto-ilan-filter {
	background: var( --oi-white );
	border-radius: var( --oi-radius-xl );
	box-shadow: var( --oi-shadow-lg );
	margin-bottom: 32px;
	overflow: hidden;
	border: 1px solid var( --oi-gray-100 );
}

.oto-ilan-filter__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 14px;
	background: var( --oi-gradient-hero );
	color: var( --oi-white );
}

.oto-ilan-filter__mobile-close {
	display: none;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	background: rgba( 255, 255, 255, 0.15 );
	border: none;
	border-radius: var( --oi-radius-sm );
	color: #fff;
	cursor: pointer;
	transition: background var( --oi-transition );
}

.oto-ilan-filter__mobile-close:hover {
	background: rgba( 255, 255, 255, 0.25 );
}

.oto-ilan-filter__mobile-close .oto-icon {
	width: 16px;
	height: 16px;
}

.oto-ilan-archive__filter-toggle {
	display: none;
}

.oto-ilan-filter__title {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	display: flex;
	align-items: center;
	gap: 8px;
	letter-spacing: -0.02em;
	color: #fff;
}

.oto-ilan-filter__title .oto-icon {
	font-size: 16px;
	width: 16px;
	height: 16px;
	opacity: 0.9;
}

.oto-ilan-filter__body {
	padding: 14px 14px 12px;
}

.oto-ilan-filter__row {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 140px, 1fr ) );
	gap: var( --oi-form-field-gap );
	margin-bottom: var( --oi-form-field-gap );
}

.oto-ilan-filter__row:last-child {
	margin-bottom: 0;
}

.oto-ilan-filter__row--ranges {
	grid-template-columns: repeat( auto-fill, minmax( 190px, 1fr ) );
}

.oto-ilan-filter__field label {
	display: block;
	font-size: var( --oi-form-label-fs );
	font-weight: 600;
	color: var( --oi-gray-400 );
	margin-bottom: var( --oi-form-label-gap );
	text-transform: uppercase;
	letter-spacing: 0.55px;
	line-height: 1.2;
}

.oto-ilan-filter__select,
.oto-ilan-filter__input {
	width: 100%;
	height: var( --oi-form-control-h );
	min-height: var( --oi-form-control-h );
	padding: 0 var( --oi-form-control-px );
	border: 1px solid var( --oi-gray-200 );
	border-radius: 8px;
	font-family: var( --oi-font );
	font-size: var( --oi-form-control-fs ) !important;
	font-weight: 400 !important;
	line-height: calc( var( --oi-form-control-h ) - 2px ) !important;
	color: var( --oi-gray-700 ) !important;
	background-color: var( --oi-white );
	transition: border-color var( --oi-transition ), box-shadow var( --oi-transition ), background-color var( --oi-transition );
	appearance: none !important;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M1 1l3 3 3-3' stroke='%2394a3b8' stroke-width='1.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 7px center;
	background-size: 8px 5px;
	padding-right: 22px;
	box-sizing: border-box;
}

.oto-ilan-filter__input {
	background-image: none;
	padding-right: var( --oi-form-control-px );
}

.oto-ilan-filter__select::placeholder,
.oto-ilan-filter__input::placeholder {
	color: var( --oi-gray-400 );
	font-size: var( --oi-form-control-fs );
	opacity: 1;
}

.oto-ilan-filter__select:hover,
.oto-ilan-filter__input:hover {
	border-color: var( --oi-gray-300 );
}

.oto-ilan-filter__select:focus,
.oto-ilan-filter__input:focus {
	outline: none;
	border-color: var( --oi-primary );
	background-color: var( --oi-white );
	box-shadow: 0 0 0 2px var( --oi-primary-glow );
}

.oto-ilan-filter__field--range .oto-ilan-filter__range-inputs {
	display: flex;
	align-items: center;
	gap: 6px;
}

.oto-ilan-filter__range-inputs .oto-ilan-filter__select,
.oto-ilan-filter__range-inputs .oto-ilan-filter__input {
	flex: 1;
	min-width: 0;
}

.oto-ilan-filter__range-sep {
	color: var( --oi-gray-300 );
	flex-shrink: 0;
	font-weight: 500;
	font-size: 10px;
}

.oto-ilan-filter__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 12px 14px 14px;
	border-top: 1px solid var( --oi-gray-100 );
}

.oto-ilan-filter__actions .oto-ilan-btn {
	flex: 1 1 calc( 50% - 4px );
	min-width: 0;
	justify-content: center;
	padding: 8px 10px;
	font-size: 10px;
	font-weight: 600;
	white-space: nowrap;
}

.oto-ilan-filter__actions .oto-ilan-btn .oto-icon {
	width: 14px;
	height: 14px;
	font-size: 14px;
	flex-shrink: 0;
}

.oto-ilan-listings-sidebar .oto-ilan-filter__body {
	padding: 12px 12px 10px;
}

.oto-ilan-listings-sidebar .oto-ilan-filter__row {
	grid-template-columns: 1fr;
	gap: 8px;
	margin-bottom: 8px;
}

.oto-ilan-listings-sidebar .oto-ilan-filter__actions {
	padding: 10px 12px 12px;
}

/* Filtre + arama + toolbar sıralama — Select2 minimal */
.oto-ilan-filter .select2-container,
.oto-ilan-search-widget .select2-container,
.oto-ilan-archive__orderby .select2-container {
	font-size: var( --oi-form-control-fs );
}

.oto-ilan-filter .select2-container .select2-selection--single,
.oto-ilan-search-widget .select2-container .select2-selection--single,
.oto-ilan-archive__orderby .select2-container .select2-selection--single {
	height: var( --oi-form-control-h );
	min-height: var( --oi-form-control-h );
	border: 1px solid var( --oi-gray-200 );
	border-radius: 8px;
	background-color: var( --oi-white );
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M1 1l3 3 3-3' stroke='%2394a3b8' stroke-width='1.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 7px center;
	background-size: 8px 5px;
}

.oto-ilan-filter .select2-container--default .select2-selection--single .select2-selection__rendered,
.oto-ilan-search-widget .select2-container--default .select2-selection--single .select2-selection__rendered,
.oto-ilan-archive__orderby .select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: calc( var( --oi-form-control-h ) - 2px );
	padding-left: var( --oi-form-control-px );
	padding-right: 22px;
	font-size: var( --oi-form-control-fs );
	font-weight: 400;
	color: var( --oi-gray-700 );
}

.oto-ilan-filter .select2-container--default .select2-selection--single .select2-selection__placeholder,
.oto-ilan-search-widget .select2-container--default .select2-selection--single .select2-selection__placeholder,
.oto-ilan-archive__orderby .select2-container--default .select2-selection--single .select2-selection__placeholder {
	color: var( --oi-gray-400 );
	font-size: var( --oi-form-control-fs );
}

.oto-ilan-filter .select2-container--default .select2-selection--single .select2-selection__arrow,
.oto-ilan-search-widget .select2-container--default .select2-selection--single .select2-selection__arrow,
.oto-ilan-archive__orderby .select2-container--default .select2-selection--single .select2-selection__arrow {
	width: 18px;
	height: 100%;
	top: 0;
	right: 0;
	display: none;
}

.oto-ilan-filter .select2-container--default .select2-selection--single .select2-selection__arrow b,
.oto-ilan-search-widget .select2-container--default .select2-selection--single .select2-selection__arrow b,
.oto-ilan-archive__orderby .select2-container--default .select2-selection--single .select2-selection__arrow b {
	display: none !important;
}

.oto-ilan-filter .select2-container--default.select2-container--open .select2-selection--single,
.oto-ilan-search-widget .select2-container--default.select2-container--open .select2-selection--single,
.oto-ilan-archive__orderby .select2-container--default.select2-container--open .select2-selection--single {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M1 4l3-3 3 3' stroke='%2394a3b8' stroke-width='1.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.oto-ilan-filter .select2-container--default.select2-container--focus .select2-selection--single,
.oto-ilan-filter .select2-container--default.select2-container--open .select2-selection--single,
.oto-ilan-search-widget .select2-container--default.select2-container--focus .select2-selection--single,
.oto-ilan-search-widget .select2-container--default.select2-container--open .select2-selection--single,
.oto-ilan-archive__orderby .select2-container--default.select2-container--focus .select2-selection--single,
.oto-ilan-archive__orderby .select2-container--default.select2-container--open .select2-selection--single {
	border-color: var( --oi-primary );
	box-shadow: 0 0 0 2px var( --oi-primary-glow );
}

.oto-ilan-filter .select2-container--default .select2-selection--single .select2-selection__clear,
.oto-ilan-search-widget .select2-container--default .select2-selection--single .select2-selection__clear,
.oto-ilan-archive__orderby .select2-container--default .select2-selection--single .select2-selection__clear {
	font-size: 12px;
	line-height: calc( var( --oi-form-control-h ) - 2px );
	margin-right: 4px;
}

/* ==========================================================================
   ARŞİV SAYFASI
   ========================================================================== */

.oto-ilan-archive__header {
	background: var( --oi-gradient-hero );
	color: var( --oi-white );
	padding: 56px 0;
	margin-bottom: 40px;
	position: relative;
	overflow: hidden;
}

/* Dekoratif arka plan deseni */
.oto-ilan-archive__header::before {
	content: "";
	position: absolute;
	top: -50%;
	right: -10%;
	width: 600px;
	height: 600px;
	background: radial-gradient( circle, rgba( 227, 31, 46, 0.3 ) 0%, transparent 70% );
	pointer-events: none;
}

.oto-ilan-archive__header::after {
	content: "";
	position: absolute;
	bottom: -30%;
	left: -5%;
	width: 400px;
	height: 400px;
	background: radial-gradient( circle, rgba( 249, 115, 22, 0.15 ) 0%, transparent 70% );
	pointer-events: none;
}

.oto-ilan-archive__header .oto-ilan-container {
	position: relative;
	z-index: 1;
}

.oto-ilan-archive__title {
	margin: 0 0 10px;
	font-size: 36px;
	font-weight: 900;
	color: var( --oi-white );
	letter-spacing: -0.04em;
	line-height: 1.1;
}

.oto-ilan-archive__subtitle {
	font-size: 16px;
	color: rgba( 255, 255, 255, 0.7 );
	margin: 0;
}

.oto-ilan-archive__description {
	font-size: 15px;
	color: var( --oi-text-muted, #64748b );
	margin: 0 0 16px;
}

.oto-ilan-archive__sub-terms {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 16px;
}

.oto-ilan-tag {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 14px;
	background: var( --oi-bg-soft, #f1f5f9 );
	border: 1px solid var( --oi-border, #e2e8f0 );
	border-radius: var( --oi-radius-full );
	color: var( --oi-text, #0f172a );
	text-decoration: none;
	font-size: 13px;
	font-weight: 600;
	transition: all var( --oi-transition );
}

.oto-ilan-tag:hover {
	background: var( --oi-primary-light, #dbeafe );
	border-color: var( --oi-primary, #E31F2E );
	color: var( --oi-primary, #E31F2E );
	transform: translateY( -1px );
}

.oto-ilan-tag__count {
	background: var( --oi-white, #fff );
	border-radius: var( --oi-radius-full );
	padding: 1px 6px;
	font-size: 10px;
	color: var( --oi-text-muted, #64748b );
}

/* Araçlar sayfası — başlık + kısa açıklama */
.oto-ilan-listings-intro {
	margin: 0 0 24px;
}

.oto-ilan-listings-intro__title {
	margin: 0 0 6px;
	font-size: 28px;
	font-weight: 800;
	letter-spacing: -0.03em;
	color: var( --oi-gray-900 );
	line-height: 1.2;
}

.oto-ilan-listings-intro__lead {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: var( --oi-gray-600 );
	max-width: 640px;
}

/* Arşiv Layout */
.oto-ilan-archive__layout {
	display: grid;
	grid-template-columns: 280px minmax( 0, 1fr );
	gap: 28px;
	align-items: start;
}

.oto-ilan-archive__sidebar {
	position: sticky;
	top: 24px;
	align-self: start;
	z-index: 5;
	max-height: calc( 100vh - 48px );
	overflow-y: auto;
	scrollbar-width: thin;
}

.oto-ilan-archive__sidebar .oto-ilan-filter {
	margin-bottom: 0;
}

@media ( max-width: 960px ) {
	.oto-ilan-archive__layout { grid-template-columns: 1fr; }

	.oto-ilan-filter-sidebar {
		display: none !important;
	}

	.oto-ilan-archive__filter-toggle {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		padding: 6px 10px;
		background: var( --oi-white );
		border: 1px solid var( --oi-gray-200 );
		border-radius: var( --oi-radius-sm );
		color: var( --oi-gray-700 );
		font-size: 12px;
		font-weight: 600;
		line-height: 1;
		cursor: pointer;
		transition: all var( --oi-transition );
		flex-shrink: 0;
	}

	.oto-ilan-archive__filter-toggle:hover,
	.oto-ilan-archive__filter-toggle[aria-expanded="true"] {
		border-color: var( --oi-primary );
		color: var( --oi-primary );
	}

	.oto-ilan-archive__filter-toggle .oto-icon {
		width: 16px;
		height: 16px;
	}

	.oto-ilan-filter__mobile-close {
		display: inline-flex;
	}

	body.oto-ilan-filter-open {
		overflow: hidden;
	}

	body.oto-ilan-filter-open .oto-ilan-filter-sidebar {
		display: flex !important;
		position: fixed;
		inset: 0;
		z-index: 10050;
		padding: 12px;
		background: rgba( 15, 23, 42, 0.45 );
		overflow-y: auto;
		align-items: flex-start;
		justify-content: center;
		max-height: none;
		top: 0;
	}

	body.oto-ilan-filter-open .oto-ilan-filter-sidebar .oto-ilan-filter {
		width: 100%;
		max-width: 420px;
		margin: auto 0;
		max-height: calc( 100vh - 24px );
		overflow-y: auto;
		flex-shrink: 0;
	}

	body.oto-ilan-filter-open .select2-container--open {
		z-index: 10060 !important;
	}
}

/* Toolbar */
.oto-ilan-archive__toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
	padding: 12px 16px;
	background: var( --oi-white );
	border-radius: var( --oi-radius );
	border: 1px solid var( --oi-gray-100 );
	box-shadow: var( --oi-shadow-xs );
}

.oto-ilan-archive__result-count {
	font-size: 13px;
	font-weight: 600;
	color: var( --oi-gray-600 );
}

.oto-ilan-archive__toolbar-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

.oto-ilan-archive__orderby {
	flex: 0 1 auto;
	min-width: 0;
	max-width: 200px;
}

.oto-ilan-archive__orderby-select {
	width: 100%;
	min-width: 168px;
}

.oto-ilan-archive__orderby .select2-container {
	min-width: 168px !important;
	max-width: 200px;
}

.oto-ilan-archive__view-toggle {
	display: flex;
	gap: 4px;
	background: var( --oi-gray-100 );
	padding: 3px;
	border-radius: var( --oi-radius-sm );
}

.oto-ilan-view-btn {
	padding: 6px 10px;
	background: none;
	border: none;
	border-radius: var( --oi-radius-sm );
	cursor: pointer;
	color: var( --oi-gray-400 );
	transition: all var( --oi-transition );
	display: flex;
	align-items: center;
}

.oto-ilan-view-btn.is-active,
.oto-ilan-view-btn:hover {
	background: var( --oi-white );
	color: var( --oi-primary );
	box-shadow: var( --oi-shadow-xs );
}

@media ( max-width: 600px ) {
	.oto-ilan-archive__toolbar {
		flex-wrap: wrap;
		gap: 10px;
	}

	.oto-ilan-archive__toolbar-actions {
		width: 100%;
		justify-content: space-between;
	}

	.oto-ilan-archive__orderby {
		flex: 1;
		max-width: none;
	}

	.oto-ilan-archive__orderby .select2-container {
		max-width: none !important;
		width: 100% !important;
	}
}

/* ==========================================================================
   SAYFALAMA
   ========================================================================== */

.oto-ilan-pagination {
	margin-top: 40px;
	display: flex;
	justify-content: center;
}

.oto-ilan-pagination .page-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
	align-items: center;
}

.oto-ilan-pagination .page-numbers li { margin: 0; }

.oto-ilan-pagination .page-numbers a,
.oto-ilan-pagination .page-numbers span {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border-radius: var( --oi-radius );
	font-family: var( --oi-font );
	font-size: 14px;
	font-weight: 600;
	color: var( --oi-gray-600 );
	text-decoration: none;
	background: var( --oi-white );
	border: 1.5px solid var( --oi-gray-200 );
	transition: all var( --oi-transition );
}

.oto-ilan-pagination .page-numbers a:hover {
	background: var( --oi-primary );
	border-color: var( --oi-primary );
	color: var( --oi-white );
	box-shadow: 0 4px 12px var( --oi-primary-glow );
	transform: translateY( -1px );
}

.oto-ilan-pagination .page-numbers .current {
	background: var( --oi-gradient-btn );
	border-color: var( --oi-primary );
	color: var( --oi-white );
	box-shadow: 0 4px 12px var( --oi-primary-glow );
}

.oto-ilan-pagination .page-numbers a {
	gap: 6px;
}

.oto-ilan-pagination .page-numbers .oto-icon {
	width: 1.1em;
	height: 1.1em;
}

.oto-ilan-pagination .page-numbers .oto-icon__svg {
	width: 1.1em;
	height: 1.1em;
}

/* ==========================================================================
   ARAÇ DETAY SAYFASI
   ========================================================================== */

.oto-ilan-single {
	--oi-detail-cols: minmax( 0, 1.15fr ) minmax( 320px, 0.85fr );
	padding: 32px 0 64px;
	background: var( --oi-gray-50 );
	min-height: 60vh;
}

/*
 * Detay üst bölüm
 * Mobil (≤1024): başlık/fiyat → galeri → ilan detayı → açıklama
 * Masaüstü: sol — galeri + açıklama; sağ — başlık/fiyat + teknik detay
 */
.oto-ilan-single__hero {
	display: grid;
	grid-template-columns: var( --oi-detail-cols );
	grid-template-rows: auto auto;
	gap: 28px;
	align-items: start;
	margin-bottom: 28px;
	min-width: 0;
	max-width: 100%;
}

.oto-ilan-single__intro {
	grid-column: 2;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

.oto-ilan-single__gallery-col {
	grid-column: 1;
	grid-row: 1 / 3;
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
	max-width: 100%;
}

.oto-ilan-single__details-col {
	grid-column: 2;
	grid-row: 2;
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
	align-self: start;
}

.oto-ilan-single__description-block {
	min-width: 0;
	width: 100%;
	flex: 1;
}

@media ( max-width: 1024px ) {
	.oto-ilan-single__hero {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	/* Galeri ve açıklamayı ayrı flex öğeleri yap — mobil sıra kontrolü */
	.oto-ilan-single__gallery-col {
		display: contents;
	}

	.oto-ilan-single__intro {
		order: 1;
		grid-column: auto;
		grid-row: auto;
		width: 100%;
		max-width: 100%;
	}

	.oto-ilan-single__gallery-col > .oto-ilan-gallery {
		order: 2;
		width: 100%;
		max-width: 100%;
	}

	.oto-ilan-single__details-col {
		order: 3;
		grid-column: auto;
		grid-row: auto;
		width: 100%;
		max-width: 100%;
	}

	.oto-ilan-single__description-block {
		order: 4;
		flex: none;
		grid-column: auto;
		grid-row: auto;
		width: 100%;
		max-width: 100%;
	}
}

@media ( max-width: 768px ) {
	.oto-ilan-single__title {
		font-size: 20px;
	}
}

.oto-ilan-single__gallery-col .oto-ilan-gallery {
	margin-bottom: 0;
}

.oto-ilan-gallery__viewport {
	position: relative;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	contain: layout style paint;
}

.oto-ilan-single__title-block {
	width: 100%;
}

.oto-ilan-single__title {
	font-size: 22px;
	font-weight: 800;
	margin: 0;
	line-height: 1.3;
	letter-spacing: -0.02em;
	color: var( --oi-gray-900 );
}

.oto-ilan-single__price-inline {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 10px;
}

.oto-ilan-single__price-value {
	font-size: 30px;
	font-weight: 900;
	letter-spacing: -0.03em;
	background: var( --oi-gradient-price );
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	line-height: 1.1;
}

.oto-ilan-single__specs-card {
	background: var( --oi-white );
	border: 1px solid var( --oi-gray-200 );
	border-radius: var( --oi-radius-lg );
	padding: 4px 0;
	box-shadow: var( --oi-shadow-sm );
	overflow: hidden;
}

/* Öne çıkan özellik listesi */
.oto-ilan-specs-highlight {
	margin: 0;
	padding: 0;
}

.oto-ilan-specs-highlight__row {
	display: grid;
	grid-template-columns: minmax( 140px, 42% ) 1fr;
	gap: 12px;
	padding: 12px 20px;
	border-bottom: 1px solid var( --oi-gray-100 );
	align-items: center;
}

.oto-ilan-specs-highlight__row:last-child {
	border-bottom: none;
}

.oto-ilan-specs-highlight__row:nth-child( odd ) {
	background: var( --oi-gray-50 );
}

.oto-ilan-specs-highlight__label {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	color: var( --oi-gray-500 );
}

.oto-ilan-specs-highlight__value {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	color: var( --oi-gray-900 );
	word-break: break-word;
}

.oto-ilan-specs-highlight__value.is-emphasis {
	color: var( --oi-primary );
}

.oto-ilan-specs-highlight__value a {
	color: var( --oi-primary );
	text-decoration: none;
}

.oto-ilan-specs-highlight__value a:hover {
	text-decoration: underline;
}

/* Yatay sekmeler */
.oto-ilan-single__tabs {
	background: var( --oi-white );
	border: 1px solid var( --oi-gray-200 );
	border-radius: var( --oi-radius-lg );
	box-shadow: var( --oi-shadow-sm );
	overflow: hidden;
}

.oto-ilan-tabs__nav {
	display: flex;
	border-bottom: 2px solid var( --oi-gray-100 );
	background: var( --oi-gray-50 );
}

.oto-ilan-tabs__btn {
	flex: 1;
	max-width: 220px;
	padding: 14px 24px;
	border: none;
	background: transparent;
	font-family: var( --oi-font );
	font-size: 14px;
	font-weight: 700;
	color: var( --oi-gray-500 );
	cursor: pointer;
	border-bottom: 3px solid transparent;
	margin-bottom: -2px;
	transition: all var( --oi-transition );
}

.oto-ilan-tabs__btn:hover {
	color: var( --oi-primary );
	background: var( --oi-white );
}

.oto-ilan-tabs__btn.is-active {
	color: var( --oi-primary );
	background: var( --oi-white );
	border-bottom-color: var( --oi-primary );
}

.oto-ilan-tabs__panels {
	padding: 24px 28px;
}

.oto-ilan-tabs__panel[hidden] {
	display: none !important;
}

.oto-ilan-tabs__panel.is-active {
	display: block;
	animation: oi-fade-in 0.3s ease;
}

/* Açıklama — galeri sütununun altında */
.oto-ilan-single__description-block {
	background: var( --oi-white );
	border: 1px solid var( --oi-gray-200 );
	border-radius: var( --oi-radius-lg );
	padding: 20px 24px;
	box-shadow: var( --oi-shadow-sm );
}

.oto-ilan-single__description-block .oto-ilan-single__section-title {
	margin: 0 0 14px;
	font-size: 17px;
	font-weight: 800;
	color: var( --oi-gray-900 );
}

.oto-ilan-single__description-content {
	font-size: 14px;
	line-height: 1.65;
	color: var( --oi-gray-700 );
	min-height: calc( 4 * 1.65em );
}

.oto-ilan-single__description-content p:first-child {
	margin-top: 0;
}

.oto-ilan-single__description-content p:last-child {
	margin-bottom: 0;
}

/* Donanım / ekspertiz + teklif formu — hero ile aynı sütun genişlikleri */
.oto-ilan-single__content-row {
	display: grid;
	grid-template-columns: var( --oi-detail-cols );
	gap: 28px;
	align-items: stretch;
	margin-bottom: 28px;
}

@media ( max-width: 1024px ) {
	.oto-ilan-single__content-row {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	.oto-ilan-single__content-row > .oto-ilan-single__tabs,
	.oto-ilan-single__inquiry-aside {
		grid-column: auto;
		width: 100%;
		max-width: 100%;
	}

	.oto-ilan-single__tabs {
		height: auto;
	}

	.oto-ilan-single__tabs .oto-ilan-tabs__panels {
		flex: none;
	}

	.oto-ilan-single__inquiry-aside {
		position: static;
		height: auto;
	}
}

.oto-ilan-single__tabs {
	margin-bottom: 0;
	height: 100%;
	display: flex;
	flex-direction: column;
}

.oto-ilan-single__tabs .oto-ilan-tabs__panels {
	flex: 1;
}

.oto-ilan-single__inquiry-aside {
	grid-column: 2;
	position: sticky;
	top: 24px;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.oto-ilan-single__content-row > .oto-ilan-single__tabs {
	grid-column: 1;
}

.oto-ilan-single__inquiry-aside .oto-ilan-inquiry {
	flex: 1;
	margin-bottom: 0;
}

.oto-ilan-single__compare-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	min-height: 48px;
	margin-top: 12px;
	padding: 12px 20px;
	font-size: 15px;
	font-weight: 700;
	border-width: 2px;
}

.oto-ilan-single__compare-btn .oto-icon {
	flex-shrink: 0;
	font-size: 20px;
	width: 20px;
	height: 20px;
}

.oto-ilan-single__compare-btn-label {
	line-height: 1.2;
}

.oto-ilan-single__compare-btn.is-added {
	background: var( --oi-primary, #E31F2E );
	border-color: var( --oi-primary, #E31F2E );
	color: #fff;
}

.oto-ilan-single__compare-btn.is-added:hover {
	background: var( --oi-primary-dark, #c41a26 );
	border-color: var( --oi-primary-dark, #c41a26 );
	color: #fff;
}

.oto-ilan-single__contact-actions {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 12px;
}

.oto-ilan-single__contact-actions .oto-ilan-btn--full {
	flex: 1 1 0;
	min-width: 0;
	width: auto;
}

@media ( max-width: 768px ) {
	.oto-ilan-single__contact-actions {
		flex-direction: column;
	}

	.oto-ilan-single__contact-actions .oto-ilan-btn--full {
		flex: none;
		width: 100%;
	}
}

/* Galeri */
.oto-ilan-gallery {
	border-radius: var( --oi-radius-xl );
	overflow: hidden;
	background: var( --oi-gray-900 );
	margin-bottom: 24px;
	box-shadow: var( --oi-shadow-xl );
	position: relative;
	min-width: 0;
	max-width: 100%;
}

.oto-ilan-gallery__main {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: 100%;
	max-height: 100%;
	aspect-ratio: unset;
	overflow: hidden;
}

.oto-ilan-gallery__slide {
	display: none;
	width: 100%;
	height: 100%;
	max-height: 100%;
}

.oto-ilan-gallery__slide.is-active { display: block; }

.oto-ilan-gallery__main.slick-initialized .oto-ilan-gallery__slide {
	display: block;
}

.oto-ilan-gallery__main.slick-initialized .slick-list,
.oto-ilan-gallery__main.slick-initialized .slick-track {
	height: 100% !important;
	max-height: 100% !important;
}

.oto-ilan-gallery__main.slick-initialized .slick-slide,
.oto-ilan-gallery__main.slick-initialized .slick-slide > div {
	height: 100% !important;
	max-height: 100% !important;
}

.oto-ilan-gallery__zoom {
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	border: none;
	background: none;
	cursor: zoom-in;
	position: relative;
}

.oto-ilan-gallery__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	object-fit: cover;
	object-position: center;
}

.oto-ilan-gallery__zoom-icon {
	position: absolute;
	right: 12px;
	bottom: 12px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba( 15, 23, 42, 0.55 );
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity var( --oi-transition );
	pointer-events: none;
}

.oto-ilan-gallery__zoom:hover .oto-ilan-gallery__zoom-icon,
.oto-ilan-gallery__zoom:focus-visible .oto-ilan-gallery__zoom-icon {
	opacity: 1;
}

.oto-ilan-gallery__zoom-icon .oto-icon {
	width: 22px;
	height: 22px;
	font-size: 22px;
}

/* Lightbox */
body.oto-ilan-lightbox-open { overflow: hidden; }

.oto-ilan-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: rgba( 0, 0, 0, 0.92 );
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 48px 16px;
}

.oto-ilan-lightbox[hidden] { display: none !important; }

.oto-ilan-lightbox__stage {
	max-width: min( 1200px, 96vw );
	max-height: 86vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

.oto-ilan-lightbox__img {
	max-width: 100%;
	max-height: 86vh;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: var( --oi-radius-md, 8px );
	box-shadow: 0 20px 60px rgba( 0, 0, 0, 0.45 );
}

.oto-ilan-lightbox__close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 44px;
	height: 44px;
	border: none;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.12 );
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.oto-ilan-lightbox__close:hover { background: rgba( 255, 255, 255, 0.22 ); }

.oto-ilan-lightbox__nav {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	width: 48px;
	height: 48px;
	border: none;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.12 );
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.oto-ilan-lightbox__nav:hover { background: rgba( 255, 255, 255, 0.22 ); }
.oto-ilan-lightbox__nav--prev { left: 16px; }
.oto-ilan-lightbox__nav--next { right: 16px; }

.oto-ilan-lightbox__counter {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX( -50% );
	color: rgba( 255, 255, 255, 0.85 );
	font-size: 14px;
	font-weight: 600;
}

.oto-ilan-gallery__slide--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var( --oi-gray-100 );
}

.oto-ilan-gallery__slide--placeholder .oto-icon {
	font-size: 80px;
	width: 80px;
	height: 80px;
	color: var( --oi-gray-300 );
}

.oto-ilan-gallery__arrow {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	z-index: 10;
	width: 44px;
	height: 44px;
	background: rgba( 255, 255, 255, 0.9 );
	backdrop-filter: blur( 8px );
	border: none;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var( --oi-gray-700 );
	box-shadow: var( --oi-shadow-md );
	transition: all var( --oi-transition );
}

.oto-ilan-gallery__arrow:hover {
	background: var( --oi-white );
	color: var( --oi-primary );
	transform: translateY( -50% ) scale( 1.1 );
}

.oto-ilan-gallery__arrow .oto-icon__svg {
	width: 22px;
	height: 22px;
}

.oto-ilan-gallery__arrow--prev { left: 16px; }
.oto-ilan-gallery__arrow--next { right: 16px; }

.oto-ilan-compare-bar__slot-placeholder.oto-icon .oto-icon__svg {
	width: 28px;
	height: 28px;
	color: var( --oi-gray-400 );
}

.oto-ilan-gallery__thumbs {
	display: flex;
	flex-wrap: nowrap;
	gap: 6px;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	padding: 10px 12px;
	background: rgba( 0, 0, 0, 0.85 );
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}

/* Eski Slick önbelleği: track genişliği düzeni bozmasın */
.oto-ilan-gallery .slick-list,
.oto-ilan-gallery .slick-track {
	max-width: 100% !important;
}

.oto-ilan-gallery__main.slick-slider .slick-list,
.oto-ilan-gallery__main.slick-slider .slick-track,
.oto-ilan-gallery__main.slick-slider .slick-slide {
	width: 100% !important;
	max-width: 100% !important;
}

.oto-ilan-gallery--native .oto-ilan-gallery__main {
	position: absolute;
	inset: 0;
}

.oto-ilan-gallery__thumb {
	flex-shrink: 0;
	width: 80px;
	min-width: 80px;
	max-width: 80px;
	height: 60px;
	border: 2px solid transparent;
	border-radius: var( --oi-radius-sm );
	overflow: hidden;
	cursor: pointer;
	padding: 0;
	background: none;
	transition: all var( --oi-transition );
	opacity: 0.65;
}

.oto-ilan-gallery__thumbs.slick-initialized .slick-slide {
	width: 80px !important;
}

.oto-ilan-gallery__thumbs.slick-initialized .slick-slide .oto-ilan-gallery__thumb {
	width: 80px;
	min-width: 80px;
}

.oto-ilan-gallery__thumb.is-active,
.oto-ilan-gallery__thumb:hover { border-color: var( --oi-primary ); opacity: 1; }

.oto-ilan-gallery__thumb img { width: 80px; height: 60px; object-fit: cover; display: block; }

.oto-ilan-gallery__counter {
	position: absolute;
	top: 14px;
	right: 14px;
	background: rgba( 0, 0, 0, 0.55 );
	backdrop-filter: blur( 8px );
	color: var( --oi-white );
	padding: 4px 12px;
	border-radius: var( --oi-radius-full );
	font-size: 12px;
	font-weight: 600;
}

@media ( max-width: 768px ) {
	.oto-ilan-gallery__viewport {
		max-height: 70vh;
	}

	.oto-ilan-single__hero .oto-ilan-gallery,
	.oto-ilan-gallery,
	.oto-ilan-gallery__viewport,
	.oto-ilan-gallery__main,
	.oto-ilan-gallery__thumbs {
		min-width: 0;
		max-width: 100%;
	}

	.oto-ilan-gallery__thumbs {
		overflow-x: auto;
		overflow-y: hidden;
	}

	.oto-ilan-gallery__img {
		width: 100% !important;
		max-width: 100% !important;
		height: 100% !important;
		max-height: 100% !important;
	}
}

/* Detay Bölümleri */
.oto-ilan-single__section {
	background: var( --oi-white );
	border-radius: var( --oi-radius-lg );
	padding: 24px 28px;
	margin-bottom: 20px;
	border: 1px solid var( --oi-gray-100 );
	box-shadow: var( --oi-shadow-sm );
}

.oto-ilan-single__section-title {
	margin: 0 0 20px;
	font-size: 17px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var( --oi-gray-900 );
	display: flex;
	align-items: center;
	gap: 10px;
	padding-bottom: 14px;
	border-bottom: 2px solid var( --oi-gray-100 );
}

.oto-ilan-single__section-title::before {
	content: "";
	width: 4px;
	height: 20px;
	background: var( --oi-gradient-btn );
	border-radius: var( --oi-radius-full );
	flex-shrink: 0;
}

/* Teknik Özellikler */
.oto-ilan-specs-table { width: 100%; border-collapse: collapse; }

.oto-ilan-specs-table tr { transition: background var( --oi-transition ); }
.oto-ilan-specs-table tr:hover { background: var( --oi-gray-50 ); }

.oto-ilan-specs-table th,
.oto-ilan-specs-table td {
	padding: 11px 14px;
	font-size: 14px;
	text-align: left;
	border-bottom: 1px solid var( --oi-gray-100 );
}

.oto-ilan-specs-table th { width: 38%; font-weight: 600; color: var( --oi-gray-500 ); font-size: 13px; }
.oto-ilan-specs-table td { font-weight: 600; color: var( --oi-gray-800 ); }
.oto-ilan-specs-table td a { color: var( --oi-primary ); text-decoration: none; font-weight: 700; }

/* Donanım */
.oto-ilan-features-group-block {
	margin-bottom: 24px;
}

.oto-ilan-features-group-block:last-child {
	margin-bottom: 0;
}

.oto-ilan-features-group-block__title {
	display: block;
	margin: 0 0 12px;
	padding: 0 0 10px 12px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var( --oi-gray-600 );
	border-bottom: 1px solid var( --oi-gray-100 );
	position: relative;
}

.oto-ilan-features-group-block__title::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 10px;
	width: 3px;
	border-radius: var( --oi-radius-full );
	background: var( --oi-gradient-btn );
}

.oto-ilan-features-list {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 200px, 1fr ) );
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.oto-ilan-features-list__item {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 500;
	color: var( --oi-gray-700 );
	padding: 8px 12px;
	background: var( --oi-gray-50 );
	border-radius: var( --oi-radius );
	border: 1px solid var( --oi-gray-100 );
}

.oto-ilan-features-list__item .oto-icon { color: var( --oi-success ); font-size: 16px; width: 16px; height: 16px; flex-shrink: 0; }

/* Ekspertiz */
.oto-ilan-expertise-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 180px, 1fr ) );
	gap: 10px;
}

.oto-ilan-expertise__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 14px;
	background: var( --oi-gray-50 );
	border-radius: var( --oi-radius );
	border: 1px solid var( --oi-gray-100 );
	font-size: 13px;
}

.oto-ilan-expertise__part { font-weight: 600; color: var( --oi-gray-700 ); }

.oto-ilan-expertise__status {
	font-size: 11px;
	font-weight: 700;
	padding: 3px 10px;
	border-radius: var( --oi-radius-full );
	text-transform: capitalize;
}

.oto-ilan-expertise__status--original { background: #d1fae5; color: #065f46; }
.oto-ilan-expertise__status--painted  { background: #fef3c7; color: #92400e; }
.oto-ilan-expertise__status--replaced { background: #dbeafe; color: #1e40af; }
.oto-ilan-expertise__status--damaged  { background: #fee2e2; color: #991b1b; }

/* Sidebar Fiyat Kartı */
.oto-ilan-single__price-card {
	background: var( --oi-white );
	border-radius: var( --oi-radius-xl );
	padding: 24px;
	margin-bottom: 20px;
	border: 1px solid var( --oi-gray-100 );
	box-shadow: var( --oi-shadow-md );
	position: sticky;
	top: 24px;
}

.oto-ilan-single__price {
	font-size: 34px;
	font-weight: 900;
	letter-spacing: -0.04em;
	background: var( --oi-gradient-price );
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	line-height: 1;
	margin-bottom: 4px;
}

.oto-ilan-single__price-note { font-size: 12px; font-weight: 500; color: var( --oi-gray-400 ); margin-bottom: 20px; }

.oto-ilan-single__quick-specs {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	border-top: 1px solid var( --oi-gray-100 );
	padding-top: 16px;
}

.oto-ilan-single__quick-specs li {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 0;
	font-size: 13px;
	font-weight: 500;
	color: var( --oi-gray-600 );
	border-bottom: 1px solid var( --oi-gray-50 );
}

.oto-ilan-single__quick-specs li strong { color: var( --oi-gray-800 ); font-weight: 700; }
.oto-ilan-single__quick-specs .oto-icon { color: var( --oi-primary ); font-size: 15px; width: 15px; height: 15px; flex-shrink: 0; }

/* Teklif Formu */
.oto-ilan-inquiry {
	background: var( --oi-white );
	border-radius: var( --oi-radius-lg );
	padding: 24px;
	margin-bottom: 20px;
	border: 1px solid var( --oi-gray-200 );
	box-shadow: var( --oi-shadow-sm );
}

.oto-ilan-inquiry__title {
	margin: 0 0 18px;
	font-size: 16px;
	font-weight: 800;
	display: flex;
	align-items: center;
	gap: 8px;
	color: var( --oi-gray-900 );
	letter-spacing: -0.02em;
}

.oto-ilan-inquiry__title .oto-icon { color: var( --oi-primary ); font-size: 20px; width: 20px; height: 20px; }

.oto-ilan-inquiry__divider {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 14px 0;
	color: var( --oi-gray-400 );
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.oto-ilan-inquiry__divider::before,
.oto-ilan-inquiry__divider::after { content: ""; flex: 1; height: 1px; background: var( --oi-gray-200 ); }

.oto-ilan-inquiry__field { margin-bottom: 14px; }

.oto-ilan-inquiry__field label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	color: var( --oi-gray-500 );
	margin-bottom: 5px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.oto-ilan-inquiry__field .required { color: var( --oi-danger ); }

.oto-ilan-inquiry__input,
.oto-ilan-inquiry__textarea {
	width: 100%;
	padding: 11px 14px;
	border: 1.5px solid var( --oi-gray-200 );
	border-radius: var( --oi-radius );
	font-family: var( --oi-font );
	font-size: 14px;
	font-weight: 500;
	color: var( --oi-gray-800 );
	background: var( --oi-gray-50 );
	transition: all var( --oi-transition );
	box-sizing: border-box;
}

.oto-ilan-inquiry__input:focus,
.oto-ilan-inquiry__textarea:focus {
	outline: none;
	border-color: var( --oi-primary );
	background: var( --oi-white );
	box-shadow: 0 0 0 3px var( --oi-primary-glow );
}

.oto-ilan-inquiry__textarea { resize: vertical; min-height: 90px; }

.oto-ilan-inquiry__response {
	padding: 12px 16px;
	border-radius: var( --oi-radius );
	font-size: 13px;
	font-weight: 500;
	margin-bottom: 14px;
}

.oto-ilan-inquiry__response.is-success { background: #d1fae5; color: #065f46; border: 1px solid #a7f3d0; }
.oto-ilan-inquiry__response.is-error   { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.oto-ilan-inquiry__privacy { margin: 10px 0 0; font-size: 11px; color: var( --oi-gray-400 ); text-align: center; }

/* Paylaş */
.oto-ilan-single__share {
	background: var( --oi-white );
	border-radius: var( --oi-radius-lg );
	padding: 18px 24px;
	border: 1px solid var( --oi-gray-100 );
}

.oto-ilan-single__share h4 { margin: 0 0 12px; font-size: 12px; font-weight: 700; color: var( --oi-gray-400 ); text-transform: uppercase; letter-spacing: 0.6px; }

.oto-ilan-share-buttons { display: flex; flex-wrap: wrap; gap: 8px; }

.oto-ilan-share-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: var( --oi-radius );
	text-decoration: none;
	transition: all var( --oi-transition );
	border: none;
	cursor: pointer;
}

.oto-ilan-share-btn:hover { transform: translateY( -2px ); box-shadow: var( --oi-shadow-md ); }
.oto-ilan-share-btn--whatsapp {
	background: #25d366;
	color: #fff;
}

.oto-ilan-share-btn--instagram {
	background: linear-gradient( 45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888 );
	color: #fff;
}

.oto-ilan-share-btn--instagram.is-copied::after {
	content: attr( data-copied-label );
	position: absolute;
	left: 0;
	right: 0;
	bottom: calc( 100% + 6px );
	font-size: 11px;
	line-height: 1.3;
	font-weight: 600;
	color: var( --oi-text, #0f172a );
	background: #fff;
	padding: 6px 8px;
	border-radius: 6px;
	box-shadow: var( --oi-shadow-md );
	white-space: normal;
	min-width: 140px;
}

.oto-ilan-share-btn--facebook { background: #1877f2; color: #fff; }
.oto-ilan-share-btn--twitter  { background: #000; color: #fff; }
.oto-ilan-share-btn--copy     { background: var( --oi-gray-100 ); color: var( --oi-gray-600 ); }

/* Arama Widget */
.oto-ilan-search-widget {
	background: var( --oi-white );
	border-radius: var( --oi-radius-xl );
	padding: 18px 20px;
	border: 1px solid var( --oi-gray-100 );
	box-shadow: var( --oi-shadow-lg );
}

.oto-ilan-search-widget__grid {
	display: grid;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	gap: var( --oi-form-field-gap ) 12px;
	margin-bottom: 12px;
}

.oto-ilan-search-widget__field label {
	display: block;
	font-size: var( --oi-form-label-fs );
	font-weight: 600;
	color: var( --oi-gray-400 );
	margin-bottom: var( --oi-form-label-gap );
	text-transform: uppercase;
	letter-spacing: 0.55px;
	line-height: 1.2;
}

.oto-ilan-search-widget__select,
.oto-ilan-search-widget__input {
	width: 100%;
	height: var( --oi-form-control-h );
	min-height: var( --oi-form-control-h );
	padding: 0 var( --oi-form-control-px );
	border: 1px solid var( --oi-gray-200 );
	border-radius: 8px;
	font-family: var( --oi-font );
	font-size: var( --oi-form-control-fs ) !important;
	font-weight: 400 !important;
	line-height: calc( var( --oi-form-control-h ) - 2px ) !important;
	color: var( --oi-gray-700 ) !important;
	background-color: var( --oi-white );
	transition: border-color var( --oi-transition ), box-shadow var( --oi-transition ), background-color var( --oi-transition );
	box-sizing: border-box;
}

.oto-ilan-search-widget__select::placeholder,
.oto-ilan-search-widget__input::placeholder {
	color: var( --oi-gray-400 );
	font-size: var( --oi-form-control-fs );
	opacity: 1;
}

.oto-ilan-search-widget__select:hover,
.oto-ilan-search-widget__input:hover {
	border-color: var( --oi-gray-300 );
}

.oto-ilan-search-widget__select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M1 1l3 3 3-3' stroke='%2394a3b8' stroke-width='1.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 7px center;
	background-size: 8px 5px;
	padding-right: 22px;
}

.oto-ilan-search-widget__select:focus,
.oto-ilan-search-widget__input:focus {
	outline: none;
	border-color: var( --oi-primary );
	background-color: var( --oi-white );
	box-shadow: 0 0 0 2px var( --oi-primary-glow );
}

.oto-ilan-search-widget__actions .oto-ilan-btn {
	padding: 10px 16px;
	font-size: 11px;
	font-weight: 600;
}

/* Listings + Featured */
.oto-ilan-listings-wrap { padding: 0; }
.oto-ilan-listings-content { min-width: 0; }
.oto-ilan-listings-content--full { width: 100%; }
.oto-ilan-featured {
	padding: 24px 0;
}
.oto-ilan-featured__footer { text-align: center; margin-top: 36px; }

/* ==========================================================================
   ANİMASYONLAR
   ========================================================================== */

@keyframes oi-fade-in {
	from { opacity: 0; transform: translateY( 16px ); }
	to   { opacity: 1; transform: translateY( 0 ); }
}

.oto-ilan-card { animation: oi-fade-in 0.4s ease both; }
.oto-ilan-grid .oto-ilan-card:nth-child(1)  { animation-delay: 0.05s; }
.oto-ilan-grid .oto-ilan-card:nth-child(2)  { animation-delay: 0.10s; }
.oto-ilan-grid .oto-ilan-card:nth-child(3)  { animation-delay: 0.15s; }
.oto-ilan-grid .oto-ilan-card:nth-child(4)  { animation-delay: 0.20s; }
.oto-ilan-grid .oto-ilan-card:nth-child(5)  { animation-delay: 0.25s; }
.oto-ilan-grid .oto-ilan-card:nth-child(6)  { animation-delay: 0.30s; }
.oto-ilan-grid .oto-ilan-card:nth-child(n+7){ animation-delay: 0.35s; }

/* ==========================================================================
   RESPONSİVE
   ========================================================================== */

@media ( max-width: 768px ) {
	.oto-ilan-archive__header { padding: 36px 0; }
	.oto-ilan-archive__title  { font-size: 26px; }
	.oto-ilan-filter__body    { padding: 12px 14px; }
	.oto-ilan-filter__actions { padding: 8px 14px 12px; }
	.oto-ilan-filter__row     { grid-template-columns: 1fr 1fr; }
	.oto-ilan-single          { padding: 20px 0 40px; }
	.oto-ilan-specs-highlight__row {
		grid-template-columns: 1fr;
		gap: 4px;
	}
	.oto-ilan-tabs__btn { max-width: none; }
	.oto-ilan-single__price   { font-size: 28px; }
	.oto-ilan-single__price-card { position: static; }
	.oto-ilan-specs-table th  { width: 42%; }
	.oto-ilan-features-list   { grid-template-columns: 1fr 1fr; }
	.oto-ilan-search-widget   { padding: 14px 16px; }
	.oto-ilan-search-widget__grid { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
}

@media ( max-width: 900px ) {
	.oto-ilan-search-widget__grid { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
}

@media ( max-width: 480px ) {
	.oto-ilan-container { padding: 0 16px; }
	.oto-ilan-filter__row,
	.oto-ilan-filter__row--ranges,
	.oto-ilan-features-list,
	.oto-ilan-expertise-grid,
	.oto-ilan-search-widget__grid { grid-template-columns: 1fr; }
	.oto-ilan-archive__title { font-size: 22px; }
	.oto-ilan-grid--list .oto-ilan-card {
		flex-direction: column;
		min-height: 0;
	}

	.oto-ilan-grid--list .oto-ilan-card__image-wrap {
		width: 100%;
		min-height: 0;
		aspect-ratio: 16 / 10;
	}

	.oto-ilan-grid--list .oto-ilan-card__image,
	.oto-ilan-grid--list .oto-ilan-card__image--placeholder {
		position: static;
		inset: auto;
		height: 100%;
	}

	.oto-ilan-grid--list .oto-ilan-card__footer {
		width: 100%;
		border-left: none;
		border-top: 1px solid var( --oi-gray-100 );
	}
}

/* ==========================================================================
   SHORTCODE LİSTİNGS LAYOUT
   ========================================================================== */

/* Sidebar layout */
.oto-ilan-listings-layout {
	display: grid;
	grid-template-columns: 280px minmax( 0, 1fr );
	gap: 28px;
	align-items: start;
}

.oto-ilan-listings-sidebar {
	position: sticky;
	top: 24px;
	align-self: start;
	z-index: 5;
	max-height: calc( 100vh - 48px );
	overflow-y: auto;
	scrollbar-width: thin;
}

.oto-ilan-listings-sidebar .oto-ilan-filter {
	margin-bottom: 0;
}

/* Toolbar (shortcode içinde) */
.oto-ilan-listings-toolbar {
	margin-bottom: 20px;
	margin-top: 0;
}

/* Grid wrapper — sütun sayısı atts'tan gelir */
.oto-ilan-listings-grid-wrap {
	/* Sütun sayısı data-columns ile JS'den veya CSS class'tan gelir */
}

.oto-ilan-listings-grid-wrap.oto-ilan-grid--cols-1 .oto-ilan-grid { grid-template-columns: 1fr; }
.oto-ilan-listings-grid-wrap.oto-ilan-grid--cols-2 .oto-ilan-grid { grid-template-columns: repeat( 2, 1fr ); }
.oto-ilan-listings-grid-wrap.oto-ilan-grid--cols-3 .oto-ilan-grid { grid-template-columns: repeat( 3, 1fr ); }
.oto-ilan-listings-grid-wrap.oto-ilan-grid--cols-4 .oto-ilan-grid { grid-template-columns: repeat( 4, 1fr ); }

@media ( max-width: 960px ) {
	.oto-ilan-listings-layout {
		grid-template-columns: 1fr;
	}

	.oto-ilan-listings-intro__title {
		font-size: 24px;
	}
}

@media ( max-width: 768px ) {
	.oto-ilan-listings-grid-wrap.oto-ilan-grid--cols-3 .oto-ilan-grid,
	.oto-ilan-listings-grid-wrap.oto-ilan-grid--cols-4 .oto-ilan-grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( max-width: 480px ) {
	.oto-ilan-listings-grid-wrap .oto-ilan-grid {
		grid-template-columns: 1fr !important;
	}
}

/* ==========================================================================
   ARAÇ KARTI — Karşılaştır Butonu
   ========================================================================== */

.oto-ilan-card__actions,
.oto-ilan-card__btn-group {
	display: flex;
	gap: 8px;
	align-items: center;
	width: 100%;
}

.oto-ilan-card__actions .oto-ilan-card__btn,
.oto-ilan-card__btn-group .oto-ilan-card__btn {
	flex: 1;
	min-width: 0;
}

.oto-ilan-card__compare-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	background: var( --oi-white );
	border: 1.5px solid var( --oi-gray-200 );
	border-radius: var( --oi-radius );
	color: var( --oi-gray-500 );
	cursor: pointer;
	transition: all var( --oi-transition );
	flex-shrink: 0;
}

.oto-ilan-card__compare-btn .oto-icon {
	font-size: 18px;
	width: 18px;
	height: 18px;
	margin: 0;
}

.oto-ilan-card__compare-btn:hover {
	border-color: var( --oi-primary, #E31F2E );
	color: var( --oi-primary, #E31F2E );
	background: rgba( 34, 113, 177, 0.05 );
}

.oto-ilan-card__compare-btn.is-added {
	background: var( --oi-primary, #E31F2E );
	border-color: var( --oi-primary, #E31F2E );
	color: #fff;
}

.oto-ilan-card__compare-btn .oto-icon {
	font-size: 14px;
	width: 14px;
	height: 14px;
}

/* ==========================================================================
   KARŞILAŞTIRMA ÇUBUĞU — Sabit Alt Bar
   ========================================================================== */

.oto-ilan-compare-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 9999;
	background: #1d2327;
	color: #fff;
	transform: translateY( 100% );
	transition: transform 0.3s cubic-bezier( 0.4, 0, 0.2, 1 );
	box-shadow: 0 -4px 24px rgba( 0, 0, 0, 0.25 );
}

.oto-ilan-compare-bar.is-visible {
	transform: translateY( 0 );
}

.oto-ilan-compare-bar__inner {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 12px 24px;
	max-width: 1400px;
	margin: 0 auto;
	flex-wrap: wrap;
}

.oto-ilan-compare-bar__label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
}

.oto-ilan-compare-bar__label .oto-icon {
	color: var( --oi-primary, #E31F2E );
	font-size: 18px;
	width: 18px;
	height: 18px;
}

.oto-ilan-compare-bar__max {
	font-size: 12px;
	color: #a0aec0;
	font-weight: 400;
}

.oto-ilan-compare-bar__slots {
	display: flex;
	gap: 10px;
	flex: 1;
}

.oto-ilan-compare-bar__slot {
	flex: 1;
	min-width: 0;
	max-width: 180px;
	background: rgba( 255, 255, 255, 0.08 );
	border: 1.5px dashed rgba( 255, 255, 255, 0.2 );
	border-radius: 8px;
	padding: 8px 10px;
	display: flex;
	align-items: center;
	gap: 8px;
	position: relative;
	min-height: 52px;
}

.oto-ilan-compare-bar__slot.is-filled {
	border-style: solid;
	border-color: rgba( 255, 255, 255, 0.3 );
	background: rgba( 255, 255, 255, 0.12 );
}

.oto-ilan-compare-bar__slot-img {
	width: 36px;
	height: 36px;
	object-fit: cover;
	border-radius: 4px;
	flex-shrink: 0;
}

.oto-ilan-compare-bar__slot-placeholder {
	font-size: 24px;
	width: 24px;
	height: 24px;
	color: rgba( 255, 255, 255, 0.3 );
	flex-shrink: 0;
}

.oto-ilan-compare-bar__slot-title {
	font-size: 12px;
	color: #e2e8f0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	flex: 1;
	min-width: 0;
}

.oto-ilan-compare-bar__slot-empty {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: rgba( 255, 255, 255, 0.4 );
	width: 100%;
}

.oto-ilan-compare-bar__slot-empty .oto-icon {
	font-size: 16px;
	width: 16px;
	height: 16px;
}

.oto-ilan-compare-bar__slot-remove {
	position: absolute;
	top: -6px;
	right: -6px;
	width: 18px;
	height: 18px;
	background: #e53e3e;
	border: none;
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	line-height: 1;
}

.oto-ilan-compare-bar__slot-remove .oto-icon {
	font-size: 12px;
	width: 12px;
	height: 12px;
}

.oto-ilan-compare-bar__actions {
	display: flex;
	gap: 8px;
	flex-shrink: 0;
}

/* ==========================================================================
   KARŞILAŞTIRMA SAYFASI — [oto_ilan_compare] Shortcode
   ========================================================================== */

.oto-ilan-compare {
	padding: 32px 0;
	font-family: var( --oi-font );
	color: var( --oi-gray-800 );
}

.oto-ilan-compare__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 24px;
	flex-wrap: wrap;
	gap: 12px;
}

.oto-ilan-compare__title {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 24px;
	font-weight: 700;
	color: var( --oi-text, #1a202c );
	margin: 0;
}

.oto-ilan-compare__title .oto-icon {
	color: var( --oi-primary, #E31F2E );
	font-size: 28px;
	width: 28px;
	height: 28px;
}

.oto-ilan-compare__clear-all {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	background: transparent;
	border: 1.5px solid #e53e3e;
	border-radius: 8px;
	color: #e53e3e;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
}

.oto-ilan-compare__clear-all:hover {
	background: #e53e3e;
	color: #fff;
}

.oto-ilan-compare__table-wrap {
	overflow-x: auto;
	border-radius: 12px;
	box-shadow: 0 4px 24px rgba( 0, 0, 0, 0.08 );
}

.oto-ilan-compare__table {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
}

.oto-ilan-compare__table thead tr {
	background: var( --oi-gradient-hero, linear-gradient( 135deg, #1a365d 0%, #E31F2E 100% ) );
}

.oto-ilan-compare__label-col {
	width: 160px;
	min-width: 140px;
	padding: 16px 20px;
	color: rgba( 255, 255, 255, 0.7 );
	font-size: 13px;
	font-weight: 500;
	text-align: left;
	vertical-align: top;
}

.oto-ilan-compare__vehicle-col {
	padding: 16px 20px;
	text-align: center;
	vertical-align: top;
}

.oto-ilan-compare__vehicle-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	position: relative;
}

.oto-ilan-compare__vehicle-img {
	width: 120px;
	height: 80px;
	object-fit: cover;
	border-radius: 8px;
	border: 2px solid rgba( 255, 255, 255, 0.2 );
}

.oto-ilan-compare__vehicle-title {
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	text-align: center;
	line-height: 1.3;
}

.oto-ilan-compare__vehicle-title:hover {
	text-decoration: underline;
}

.oto-ilan-compare__remove {
	position: absolute;
	top: -8px;
	right: -8px;
	width: 22px;
	height: 22px;
	background: rgba( 229, 62, 62, 0.9 );
	border: none;
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: background 0.2s;
}

.oto-ilan-compare__remove:hover { background: #e53e3e; }

.oto-ilan-compare__remove .oto-icon {
	font-size: 14px;
	width: 14px;
	height: 14px;
}

.oto-ilan-compare__row {
	border-bottom: 1px solid #f0f4f8;
}

.oto-ilan-compare__row:nth-child( even ) {
	background: #f8fafc;
}

.oto-ilan-compare__row:hover {
	background: #eef4fb;
}

.oto-ilan-compare__label {
	padding: 14px 20px;
	font-size: 13px;
	font-weight: 600;
	color: var( --oi-text-muted, #64748b );
	text-align: left;
	vertical-align: top;
	white-space: nowrap;
}

.oto-ilan-compare__cell {
	padding: 14px 20px;
	font-size: 14px;
	color: var( --oi-text, #1a202c );
	text-align: center;
	vertical-align: top;
}

.oto-ilan-compare__price {
	font-size: 18px;
	font-weight: 700;
	background: var( --oi-gradient-price, linear-gradient( 135deg, #E31F2E, #0ea5e9 ) );
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.oto-ilan-compare__features {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: left;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.oto-ilan-compare__features li {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
}

.oto-ilan-compare__features .oto-icon {
	color: #48bb78;
	font-size: 14px;
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}

.oto-ilan-compare__na {
	color: #a0aec0;
}

.oto-ilan-compare__row--actions .oto-ilan-compare__cell {
	padding: 16px 20px;
}

/* Boş durum — Göz at */
.oto-ilan-compare-empty {
	text-align: center;
	padding: 72px 32px;
	max-width: 520px;
	margin: 40px auto;
	background: var( --oi-white );
	border-radius: var( --oi-radius-xl );
	border: 1px solid var( --oi-gray-200 );
	box-shadow: var( --oi-shadow-lg );
	font-family: var( --oi-font );
}

.oto-ilan-compare-empty__icon {
	width: 88px;
	height: 88px;
	background: var( --oi-gray-50 );
	border: 2px solid var( --oi-gray-100 );
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 24px;
}

.oto-ilan-compare-empty__icon .oto-icon {
	font-size: 42px;
	width: 42px;
	height: 42px;
	color: var( --oi-primary );
}

.oto-ilan-compare-empty h2 {
	font-size: 24px;
	font-weight: 800;
	margin: 0 0 12px;
	color: var( --oi-gray-900 );
	letter-spacing: -0.02em;
}

.oto-ilan-compare-empty p {
	color: var( --oi-gray-500 );
	font-size: 15px;
	line-height: 1.6;
	margin: 0 auto 28px;
}

/* Bildirim toast */
.oto-ilan-compare-notice {
	position: fixed;
	bottom: 80px;
	left: 50%;
	transform: translateX( -50% ) translateY( 20px );
	background: #1d2327;
	color: #fff;
	padding: 12px 24px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 500;
	z-index: 10000;
	opacity: 0;
	transition: all 0.3s ease;
	white-space: nowrap;
	box-shadow: 0 4px 16px rgba( 0, 0, 0, 0.2 );
}

.oto-ilan-compare-notice.is-visible {
	opacity: 1;
	transform: translateX( -50% ) translateY( 0 );
}

.oto-ilan-compare-notice--error {
	background: #e53e3e;
}

/* Responsive */
@media ( max-width: 768px ) {
	.oto-ilan-compare-bar__slots { display: none; }
	.oto-ilan-compare-bar__inner { justify-content: space-between; }
	.oto-ilan-compare__label-col,
	.oto-ilan-compare__label { width: 100px; min-width: 90px; padding: 10px 12px; }
	.oto-ilan-compare__cell { padding: 10px 12px; }
}

/* ==========================================================================
   VERSİYON / PAKET BADGE — Araç Detay Sayfası
   ========================================================================== */

.oto-ilan-single__version-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: linear-gradient( 135deg, var( --oi-primary ) 0%, var( --oi-primary-dark, #c11a27 ) 100% );
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	padding: 6px 14px;
	border-radius: 20px;
	margin-bottom: 16px;
	letter-spacing: 0.02em;
	box-shadow: 0 2px 8px rgba( 34, 113, 177, 0.25 );
}

.oto-ilan-single__version-badge .oto-icon {
	font-size: 15px;
	width: 15px;
	height: 15px;
	opacity: 0.85;
}

/* Specs tablosunda versiyon satırı vurgusu */
.oto-ilan-specs-table tr:has( td[itemprop="vehicleConfiguration"] ) th,
.oto-ilan-specs-table tr:has( td[itemprop="vehicleConfiguration"] ) td {
	background: rgba( 34, 113, 177, 0.05 );
	font-weight: 600;
}

/* Shortcode uyarıları */
.oto-ilan-notice {
	padding: 14px 18px;
	border-radius: var(--oi-radius, 8px);
	font-size: 14px;
	line-height: 1.5;
	margin: 0 0 1rem;
}

.oto-ilan-notice--warning {
	background: #fff8e6;
	border: 1px solid #f59e0b;
	color: #92400e;
}

.oto-ilan-notice--info {
	background: #eff6ff;
	border: 1px solid #93c5fd;
	color: #1e40af;
}

.oto-ilan-featured__notice {
	margin-bottom: 16px;
}