/*!
 * Park Lastik - v6 Tasarım Sistemi
 * Kaynak: arastirma/tasarim-dili.md (REVİZYON v6, NİHAİ), CLAUDE.md Bölüm 2/5/6.5.
 * Mobile-first: taban 360-414px, sonra 768px / 1024px breakpoint.
 * Min. dokunma alanı 48x48px, input font-size 16px (iOS otomatik zoom önlemi).
 *
 * "lp-" ön ekli class'lar hem bu tema hem `lastik-park-core` eklentisinin
 * (class-lp-catalog-mode.php) ürettiği CTA/rozet HTML'iyle birebir uyumludur -
 * eklenti değişse de bu isimler sabit kalmalı (bkz. tasarim-dili.md Bölüm 6
 * "izolasyon kuralı").
 */

/* ===================== 1. Token'lar (v6 — NİHAİ) ===================== */
:root {
	--bg-main: #FFFFFF;
	--bg-card: #F1F1F1;
	--header-bg: #F1F1F1;
	--ink: #181818;
	--ink-hover: #2E2E2E;
	--price: #181818;
	--cta: #FE5F10;
	--cta-text: #FFFFFF;
	--cta-hover-border: #3B5998;
	--wa: #00AB04;
	--wa-hover: #0E743B;
	--footer-bg: #000000;
	--footer-text: #FFFBFF;
	--link: #3B5998;
	--link-hover: #30497D;
	--muted: #5C5C5C;
	--border: #E3E3E3;
	--border-ink: rgba(24, 24, 24, .14);
	--error: #D92D20;

	/* Kampanya şeridi + hero (v8 — Oponeo mavi + açık gri, bkz. CLAUDE.md) */
	--campaign-bg: #FE5F10;
	--hero-green-dark: #003D7A;
	--hero-green-light: #0066E4;
	/* Oponeo mavisi: filtre seçili durumları, arama butonu, vurgu rengi.
	   WhatsApp yeşili (--wa) ayrı kalır (WhatsApp marka rengi).
	   Teklif Al CTA turuncusu (--cta) ayrı kalır (CTA ≠ filtre). */
	--brand-green: #0066E4;
	--brand-green-hover: #0052B3;
	--hero-search-btn: #0066E4;
	--hero-search-btn-hover: #0052B3;
	/* Oponeo açık gri paleti */
	--oponeo-gray-bg: #F2F4F7;
	--oponeo-gray-border: #DDE1E6;

	--radius-card: 16px;
	--radius-btn: 10px;
	--radius-pill: 999px;
	--shadow-card: 0 2px 8px rgba(24, 24, 24, .08);
	--shadow-card-hover: 0 8px 20px rgba(24, 24, 24, .12);
	/* Faz 2 (premium kart derinliği, 2026-08): SADECE Neden Biz / Hizmetler kartları
	   içindir (bkz. bölüm 9). --shadow-card / --shadow-card-hover (yukarıda) ürün
	   kartları + hero kartları + marka-grid'i besliyor, DOKUNULMADI. */
	--shadow-card-soft: 0 10px 30px rgba(24, 24, 24, .06);
	/* Hero altı 3 kart için AYRI gölge. Neden `--shadow-card-hover` doğrudan
	   güçlendirilmedi: o token'ı marka hücresi hover'ı, .lp-why-card hover'ı,
	   .lp-sortsheet ve .lp-brand-grid-item focus'u da kullanıyor — orada
	   daha güçlü bir gölge istenmiyor. İki katman: 1px'lik yakın gölge
	   kenarı tanımlar, geniş gölge kartı yüzeyden kaldırır. */
	--shadow-hero-card: 0 1px 2px rgba(24, 24, 24, .05), 0 10px 26px rgba(24, 24, 24, .16);
	--font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ===================== 2. Reset + taban ===================== */
*, *::before, *::after { box-sizing: border-box; }

html { overflow-x: clip; }
body.lp-catalog-theme {
	margin: 0;
	background: var(--bg-main);
	color: var(--ink);
	font-family: var(--font-stack);
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
	max-width: 100%;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0 0 .5em; font-weight: 700; color: var(--ink); }
p { margin: 0 0 1em; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.skip-link {
	position: fixed;
	top: -100px;
	left: 8px;
	z-index: 10000;
	background: var(--ink);
	color: #fff;
	padding: 12px 18px;
	border-radius: var(--radius-btn);
}
.skip-link:focus {
	position: fixed;
	top: 8px;
	width: auto;
	height: auto;
	clip: auto;
	overflow: visible;
}

.lp-container {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 16px;
}

.lp-section { padding: 40px 0; }
.lp-section-title { font-size: 22px; line-height: 1.2; margin-bottom: 4px; }
.lp-section-sub { color: var(--muted); font-size: 14px; margin-bottom: 20px; }
	.lp-accent-word { color: var(--ink); }

@media (min-width: 1025px) {
	.lp-section { padding: 64px 0; }
	.lp-section-title { font-size: 32px; }
}

/* ===================== 3. Butonlar (genel + lp-*) ===================== */
.lp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	min-width: 48px;
	padding: 12px 22px;
	border-radius: var(--radius-btn);
	font-size: 16px;
	font-weight: 700;
	font-family: inherit;
	border: 3px solid transparent;
	cursor: pointer;
	transition: border-color .2s ease, background-color .2s ease, color .2s ease;
	line-height: 1.2;
}

.lp-btn-block { width: 100%; }

/* "Lastik Ara/Listele" ve tema-genel dolgun butonlar — koyu ink, turuncu sadece Teklif Al'da */
.lp-search-submit,
.lp-btn-ghost {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 52px;
	width: 100%;
	padding: 12px 22px;
	border-radius: var(--radius-btn);
	font-size: 16px;
	font-weight: 700;
	font-family: inherit;
	cursor: pointer;
	transition: background-color .2s ease;
}

.lp-search-submit {
	background: #0066E4;
	color: #fff;
	border: none !important;
	margin-top: 14px;
	border-radius: 8px;
	font-weight: 700;
}
.lp-search-submit:hover,
.lp-search-submit:focus-visible { background: #0052B3; }

.lp-btn-ghost {
	background: transparent;
	color: var(--ink);
	border: 1px solid #DDE1E6;
	width: auto;
}
.lp-btn-ghost:hover,
.lp-btn-ghost:focus-visible { border-color: var(--ink); }

/* Turuncu dolgu — eklentinin ürettiği .lp-btn-cta */
.lp-btn-cta {
	background: #FE5F10;
	color: #fff !important;
		border: 3px solid #fff !important;
}
.lp-btn-cta:hover,
.lp-btn-cta:focus-visible {
	background: #EC6608;
	border-color: #fff;
}

/* Stok durumu rozeti — ürün CTA grubunun BİRİNCİ öğesi (2026-08-05 kullanıcı
   kararı). Turuncu dolguyu/boyutu `.lp-btn.lp-btn-cta`'dan aynen devralır.
   Davranışı `href`in VARLIĞINA bağlıdır (eklenti tarafı `href`i yalnız stoksuz
   durumda basar, bkz. LP_Catalog_Mode::build_buttons_html()):

     href YOK  → "Stokta". `href`siz `<a>` link değildir; burada ayrıca
                 etkileşim sinyalleri de geri alınır.
     href VAR  → "Gelince Haber Ver", WhatsApp'a hazır mesajla gider; normal
                 buton gibi davranır.

   `.lp-btn` `cursor:pointer` verdiği ve `.lp-btn-cta:hover` dolguyu
   koyulaştırdığı için ikisi de `:not([href])` altında tek tek nötrlenmeli —
   aksi halde tıklanamayan rozet tıklanabilir görünür.

   RENKLER (2026-08-05 kullanıcı kararı — rozet artık `.lp-btn-cta`'nın
   turuncusunu KULLANMAZ, iki durum birbirinden renkle de ayrılır):
     "Stokta"            → yeşil (--wa), olumlu/hazır durum.
     "Gelince Haber Ver" → gri (--muted), nötr/bekleyen durum.
   Turuncu (--cta) böylece sitede TEK bir işi kalır: aksiyon butonu
   ("Hemen Ara", `.lp-btn-phone`) — tıklanamayan bir rozetle aynı rengi
   paylaşmıyor. İki kural da `.lp-btn-cta`'dan SONRA gelir; `[href]`li
   varyantın hover'ı (0,3,0) `.lp-btn-cta:hover` (0,2,0) üzerinde zaten
   kazanır, sırayı bozarsanız gri hover'da turuncuya döner. */
.lp-cta-status:not([href]) {
	background: var(--wa);
	cursor: default;
	user-select: none;
}
/* Tıklanamaz rozette hover/focus dolguyu DEĞİŞTİRMEZ (aynı yeşil tekrar
   yazılır) — `.lp-btn-cta:hover`in koyulaşmasını nötrlemenin tek yolu. */
.lp-cta-status:not([href]):hover,
.lp-cta-status:not([href]):focus-visible {
	background: var(--wa);
	border-color: #fff;
}

/* "Gelince Haber Ver" (stoksuz, WhatsApp'a gider) — nötr gri. Beyaz metin
   #5C5C5C üzerinde 6.7:1 (WCAG AA 4.5:1'i rahat geçer; eski turuncu dolgu
   3.06:1 idi, yani bu bir İYİLEŞTİRME). Hover'da --ink'e koyulaşır (17.4:1). */
.lp-cta-status[href] {
	background: var(--muted);
}
.lp-cta-status[href]:hover,
.lp-cta-status[href]:focus-visible {
	background: var(--ink);
	border-color: #fff;
}

/* WhatsApp ikonu SADECE tıklanabilir (stoksuz) durumda görünür — "Stokta"
   rozetinde WhatsApp'a gitmiyor, ikon yanıltıcı olurdu. `display:none` ikonu
   flex akışından tamamen çıkarır, `.lp-btn`'in 8px `gap`'i boşluk bırakmaz. */
.lp-cta-status:not([href]) .lp-cta-status-icon { display: none; }
.lp-cta-status .lp-cta-status-icon { flex: 0 0 auto; }

/* "Hizmet Al" — hero altı 2. kart (Montaj·Balans·Lastik Oteli). Navbar üst bandının
   kurumsal mavisiyle (#0A5CC4/#04408F, bkz. satır ~342/349) eşleşen 3. dolgu rengi —
   CTA turuncusu (--cta, "Teklif Al") ve WhatsApp yeşilinden (--wa) kasıtlı olarak
   ayrı: aynı satırda 3 kart yan yana dururken üç farklı marka/aksiyon rengini taşır. */
.lp-btn-blue {
	background: #0A5CC4;
	color: #fff !important;
	border: 3px solid #fff !important;
}
.lp-btn-blue:hover,
.lp-btn-blue:focus-visible {
	background: #04408F;
	border-color: #fff;
}

/* "Hemen Ara" — hero altı 3. kart (Üretim Yılı / DOT Şeffaflığı). 2026-08-05'te
   ürün CTA'sındaki arama butonu yeşile döndüğü için bu kart da yeşil olmuş,
   1. karttaki WhatsApp yeşiliyle ÇAKIŞMIŞTI (yukarıdaki "üç kart üç renk"
   niyeti bozuluyordu). Kullanıcı ayrı stil istedi: koyu ink dolgu.
   Neden bu renk — palet DIŞINA çıkmadan üçüncü bir dolgu lazımdı:
     · turuncu (--cta) OLAMAZ: aynı sayfada ürün kartlarındaki TIKLANAMAZ
       "Stokta" rozeti de turuncu; ikisi bir arada gerçek bir karışıklık olurdu.
     · yeşil/mavi zaten 1. ve 2. kartta.
   `--ink` (#181818) paletin metin rengi, yani yeni bir marka rengi eklemiyoruz;
   üç kart da dolgu olduğu için görsel ağırlıkları eşit kalıyor. */
.lp-btn-ink {
	background: var(--ink);
	color: #fff !important;
	border: 3px solid #fff !important;
}
.lp-btn-ink:hover,
.lp-btn-ink:focus-visible {
	background: #000;
	border-color: #fff;
}

/* Yeşil dolgu — SADECE gerçek WhatsApp bağlantıları (.lp-btn-whatsapp):
   footer "Bize Ulaşın", mobil yüzen buton, sıfır-sonuç CTA'sı. Yeşil = WhatsApp
   kanalı; başka hiçbir aksiyon bu rengi kullanmaz.

   2026-08-05: "Hemen Ara" (.lp-btn-phone) bu kuraldan AYRILDI (bir alttaki
   bloğa bakın) — telefon araması WhatsApp değil, ayrıca yeşil artık "Stokta"
   rozetinin rengi; ikisi yan yana duruyordu. */
.lp-btn-whatsapp {
	background: var(--wa);
	color: #fff !important;
}
.lp-btn-whatsapp:hover,
.lp-btn-whatsapp:focus-visible {
	background: var(--wa-hover);
	color: #fff !important;
}
.lp-btn-whatsapp:hover .lp-icon-whatsapp,
.lp-btn-whatsapp:focus-visible .lp-icon-whatsapp { filter: brightness(0) invert(1); }

/* "Hemen Ara" (.lp-btn-phone) — turuncu, `.lp-btn-cta` ile AYNI dolgu ve AYNI
   koyulaşma. Site genelinde tek tip: ürün CTA grubu, footer "Bize Ulaşın",
   /hizmetler/, /iletisim/ (KASITLI — tüm arama butonları aynı renk).
   Turuncu artık başka hiçbir yerde çakışmıyor: "Stokta" rozeti yeşile,
   "Gelince Haber Ver" griye çevrildi (bkz. `.lp-cta-status` blokları). */
.lp-btn-phone {
	background: var(--cta);
	color: #fff !important;
}
.lp-btn-phone:hover,
.lp-btn-phone:focus-visible {
	background: #EC6608;
	color: #fff !important;
}
.lp-btn-phone:hover .lp-icon-phone,
.lp-btn-phone:focus-visible .lp-icon-phone { filter: brightness(0) invert(1); }

/* Mobilde ürün kartında (dar 2 sütun) WhatsApp butonu TEK SATIR: kısa "WhatsApp" etiketi
   (tam "WhatsApp'tan Sor" masaüstünde ve aria-label'da korunur). */
@media (max-width: 767px) {
	ul.products .lp-btn-whatsapp {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		white-space: nowrap;
		font-size: 0;
	}
	ul.products .lp-btn-whatsapp::after {
		content: "WhatsApp";
		font-size: 13px;
		font-weight: 600;
	}

	/* "Hemen Ara" ve stok rozeti dar karta sığsın. WhatsApp'takinin aksine
	   burada ::after ile metin DEĞİŞTİRİLMİYOR — "Hemen Ara" zaten kısa,
	   yalnızca ölçüsü küçültülüyor, böylece gerçek metin (ekran okuyucu ve
	   seçilebilirlik için) korunur. Rozet metni ("Gelince Haber Ver") uzun
	   olduğu için sarmasına izin verilir. */
	ul.products .lp-btn-phone {
		gap: 6px;
		white-space: nowrap;
		font-size: 13px;
		padding: 12px 8px;
	}
	ul.products .lp-cta-status {
		font-size: 12px;
		padding: 10px 8px;
		white-space: normal;
		text-align: center;
	}
}

.lp-icon-whatsapp {
	display: inline-block;
	width: 18px;
	height: 18px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.47 14.38c-.29-.15-1.7-.84-1.96-.93-.26-.1-.46-.15-.65.15-.2.29-.75.93-.92 1.12-.17.2-.34.22-.63.08-.29-.15-1.22-.45-2.32-1.43-.86-.76-1.44-1.71-1.61-2-.17-.29-.02-.45.13-.6.13-.13.29-.34.44-.51.15-.17.2-.29.29-.48.1-.2.05-.36-.02-.51-.08-.15-.65-1.58-.9-2.16-.24-.58-.48-.5-.65-.51h-.56c-.2 0-.51.08-.78.36s-1.02 1-1.02 2.44 1.05 2.83 1.2 3.03c.15.2 2.06 3.15 5 4.42.7.3 1.24.48 1.67.61.7.22 1.34.19 1.84.12.56-.08 1.7-.7 1.94-1.37.24-.68.24-1.26.17-1.37-.07-.12-.26-.2-.55-.34z'/%3E%3Cpath d='M12 2C6.5 2 2 6.5 2 12c0 1.85.5 3.6 1.4 5.1L2 22l5.05-1.32C8.5 21.5 10.2 22 12 22c5.5 0 10-4.5 10-10S17.5 2 12 2zm0 18.2c-1.63 0-3.15-.44-4.46-1.2l-.32-.19-3 .79.8-2.92-.2-.3A8.16 8.16 0 0 1 3.8 12c0-4.53 3.67-8.2 8.2-8.2s8.2 3.67 8.2 8.2-3.67 8.2-8.2 8.2z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.47 14.38c-.29-.15-1.7-.84-1.96-.93-.26-.1-.46-.15-.65.15-.2.29-.75.93-.92 1.12-.17.2-.34.22-.63.08-.29-.15-1.22-.45-2.32-1.43-.86-.76-1.44-1.71-1.61-2-.17-.29-.02-.45.13-.6.13-.13.29-.34.44-.51.15-.17.2-.29.29-.48.1-.2.05-.36-.02-.51-.08-.15-.65-1.58-.9-2.16-.24-.58-.48-.5-.65-.51h-.56c-.2 0-.51.08-.78.36s-1.02 1-1.02 2.44 1.05 2.83 1.2 3.03c.15.2 2.06 3.15 5 4.42.7.3 1.24.48 1.67.61.7.22 1.34.19 1.84.12.56-.08 1.7-.7 1.94-1.37.24-.68.24-1.26.17-1.37-.07-.12-.26-.2-.55-.34z'/%3E%3Cpath d='M12 2C6.5 2 2 6.5 2 12c0 1.85.5 3.6 1.4 5.1L2 22l5.05-1.32C8.5 21.5 10.2 22 12 22c5.5 0 10-4.5 10-10S17.5 2 12 2zm0 18.2c-1.63 0-3.15-.44-4.46-1.2l-.32-.19-3 .79.8-2.92-.2-.3A8.16 8.16 0 0 1 3.8 12c0-4.53 3.67-8.2 8.2-8.2s8.2 3.67 8.2 8.2-3.67 8.2-8.2 8.2z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* "Hemen Ara" telefon ikonu — .lp-icon-whatsapp ile AYNI teknik (currentColor
   dolgusu + mask), böylece boyut ve hover davranışı birebir eşleşir. */
.lp-icon-phone {
	display: inline-block;
	width: 18px;
	height: 18px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* eklenti kart/CTA grubu iskeleti */
.lp-cta-group { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.lp-cta-group .lp-btn { flex: 1 1 auto; }
.lp-cta-group--single { margin-top: 20px; }

/* Tek butonlu CTA grubu (2026-08-05: turuncu "Teklif Al" kaldırıldıktan sonra
   /hizmetler/ ve /iletisim/ böyle kaldı). `.lp-cta-group .lp-btn`'in
   `flex: 1 1 auto` kuralı iki buton varken satırı paylaştırıyordu; tek buton
   kalınca aynı kural onu satır boyunca (~1100px) geriyordu. Tek çocukken
   içerik genişliğinde bırakılır — mobilde blok davranışı korunur. */
.lp-cta-group .lp-btn:only-child { flex: 0 0 auto; }
@media (max-width: 767px) {
	.lp-cta-group .lp-btn:only-child { flex: 1 1 auto; }
}

/* Kart (loop) CTA'sını grid satırının dibine sabitler. `ul.products li.product`
   zaten flex column (Blocksy'nin kart iskeletinden gelir, aynı satırdaki kartlar
   grid stretch ile eşit yüksekliğe geliyor) — eksik olan tek şey CTA grubunun
   `margin-top: auto` ile bu sütunun dibine itilmesiydi. Üstteki içerik (yıl
   seçicili vs seçicisiz kart) farklı yükseklikte olduğunda CTA'lar hizasız
   duruyordu (ölçüm: aynı satırda 15px'e karşı 92-138px alt boşluk). `--loop`
   sonekini (build_buttons_html($product,'loop'), class-lp-catalog-mode.php)
   hedefliyoruz — PDP her zaman `--single` context'iyle render olur, dolayısıyla
   bu kural PDP'nin `margin-top: 20px` düzenine hiç dokunmaz. */
.lp-cta-group--loop { margin-top: auto; }

.lp-stock-badge {
	display: inline-block;
	background: var(--bg-card);
	color: var(--muted);
	border: 1px solid #D0D0D0;
	font-size: 12px;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: var(--radius-pill);
}

/* ===================== 3.5 Kampanya Şeridi (kayan marquee — mobil + masaüstü) ===================== */
.lp-campaign-strip {
	width: 100%;
	background: var(--campaign-bg);
	color: #fff;
	overflow: hidden;
}
.lp-marquee { overflow: hidden; }
.lp-marquee-track {
	display: inline-flex;
	flex-wrap: nowrap;
	white-space: nowrap;
	will-change: transform;
	/* !important: bazı temaların (Blocksy) prefers-reduced-motion altında tüm
	   animasyonları kapatan global `*` sıfırlamasını ezer — kampanya şeridi
	   kullanıcı isteğiyle her koşulda akar. */
	animation: lp-marquee 28s linear infinite !important;
}
.lp-marquee-track:hover { animation-play-state: paused; }
.lp-marquee-group { display: inline-flex; align-items: center; }
.lp-marquee-item {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .02em;
	padding: 8px 0;
}
.lp-marquee-sep { margin: 0 22px; opacity: .7; font-size: 11px; }
@keyframes lp-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.lp-marquee-track { animation: none; }
}
@media (min-width: 768px) {
	.lp-marquee-item { font-size: 14px; }
}

/* Logo yazı markası (görsel logo yerine kalın "PARK LASTİK") */
.lp-logo-word {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	font-weight: 800;
	letter-spacing: .4px;
	line-height: 1;
	white-space: nowrap;
}
.lp-logo-word-a { color: #FFFFFF; font-size: 21px; }
.lp-logo-word-b { color: #FFFFFF; font-size: 21px; }
@media (min-width: 1025px) {
	.lp-logo-word-a, .lp-logo-word-b { font-size: 25px; }
}

/* ===================== 4. Header ===================== */
/* `.lp-header`'ın kendi zemini SAYFA zeminine (--bg-main, #FFFFFF) çekildi —
   bkz. bölüm ~2575'teki yapısal borç notu: header.php'de `</header>` `<main>`'den
   önce kapanmadığı için `<main>`+`<footer>` `<header>`'ın İÇİNDE kalıyor ve bu
   kuralın zemini tüm sayfaya (anasayfada "Popüler Ebatlar"/"Öne Çıkan Ürünler"
   dahil) sızıyordu. Görünen iki satır (`.lp-header-top` #0B1F3A, `.lp-header-nav`
   #071629 — Faz 2'de bu iki hex mavi ailesinden lacivert aileye güncellendi,
   yapısal mantık DEĞİŞMEDİ) kendi zeminini basmaya devam ediyor, o yüzden
   header'ın GÖRSEL GÖRÜNÜMÜ değişmiyor — sadece o iki satırın dışında kalan
   (yapısal borçtan sızan) fazladan mavi zemin kayboluyor. */
.lp-header {
	position: sticky;
	top: 0;
	z-index: 500;
	background: var(--bg-main) !important;
	color: #FFFFFF;
}

/* Üst satır (logo + arama + iletişim): kurumsal mavi (Faz 3 — kullanıcı geri bildirimi:
   Faz 2'nin lacivertı "çok karanlık, e-ticaret enerjisini öldürdü"; Seçenek C onaylandı). */
.lp-header-top {
	background: #0A5CC4 !important;
}

/* Alt satır (kategori navigasyonu): daha koyu mavi (Faz 3 — Seçenek C, üst bantla 11.6
   puan HSL açıklık farkı — katmanlı görünüm; --brand-green #0066E4 filtre mavisinden
   kasıtlı ayrışma). */
.lp-header-nav {
	background: #04408F !important;
}

.lp-logo {
	display: flex;
	align-items: center;
	line-height: 1.1;
}
.lp-main-nav-list {
	display: flex;
	gap: 22px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.lp-main-nav-list a {
	font-size: 15px;
	font-weight: 600;
	padding: 8px 0;
}
.lp-main-nav-list a:hover { color: var(--link); }

.lp-header-actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

.lp-header-phone {
	display: none;
	align-items: center;
	gap: 8px;
	min-height: 48px;
	padding: 0 12px;
	font-weight: 700;
	font-size: 14px;
	border-radius: var(--radius-btn);
}
.lp-header-phone:hover { color: var(--link); }

.lp-hamburger {
	display: flex;
	align-items: center;
	gap: 7px;
	/* 44px→min-height:48px (MOBİL PANEL UX düzeltmesi, kusur B — CLAUDE.md §5.1
	   min 48×48 dokunma hedefi kuralı; canlıda 72×44 ölçüldü). min-height
	   (height değil) kullanıldı ki section 19.1'in grid hizalaması bozulmasın. */
	min-height: 48px;
	background: transparent !important;
	border: none;
	cursor: pointer;
	padding: 0;
	color: #FFFFFF;
}
/* Guvenlik: hicbir alt oge beyaz kutu gibi gorunmesin (span arka planlari sifir). */
.lp-hamburger span,
.lp-hamburger-icon { background: transparent !important; }
.lp-hamburger-icon { display: flex; align-items: center; color: #FFFFFF; }
.lp-hamburger-icon svg { display: block; }
.lp-hamburger-label { font-size: 15px; font-weight: 700; color: #FFFFFF; line-height: 1; letter-spacing: .2px; }

/* "Hemen arayın" — modern kutu içinde ÇALAN telefon ikonu (yalnız mobilde görünür, bkz. 19.1) */
.lp-call-mobile { display: none; }
.lp-call-ring { display: flex; transform-origin: 50% 60%; }
@keyframes lp-phone-ring {
	0%, 62%, 100% { transform: rotate(0); }
	4%  { transform: rotate(-15deg); }
	9%  { transform: rotate(13deg); }
	14% { transform: rotate(-13deg); }
	19% { transform: rotate(10deg); }
	24% { transform: rotate(-7deg); }
	29% { transform: rotate(0); }
}

.lp-mobile-nav {
	background: var(--bg-card);
	border-top: 1px solid var(--border-ink);
}
.lp-mobile-nav[hidden] { display: none; }
.lp-mobile-nav-list {
	list-style: none;
	margin: 0;
	padding: 8px 16px 16px;
}
.lp-mobile-nav-list li { border-bottom: 1px solid rgba(24,24,24,.08); }
.lp-mobile-nav-list a {
	display: block;
	padding: 14px 4px;
	font-weight: 600;
	min-height: 48px;
}

@media (min-width: 1025px) {
	.lp-header-phone { display: flex; }
	.lp-hamburger { display: none; }
	.lp-mobile-nav { display: none !important; }
	/* Mobil-özel öğeler masaüstünde gizli (aksi halde başıboş görünürler):
	   yüzen WhatsApp (masaüstünde header + footer WhatsApp mevcut). */
	.lp-wa-float { display: none !important; }
}

/* ===================== 5. Hero (Oponeo stili: mavi + açık gri filtre kartı) ===================== */
.lp-hero {
	position: relative;
	overflow: hidden;
	padding: 28px 0 32px;
	/* Gorsel gec yuklenirse/gelmezse fallback - koyu notr */
	background: #1a1a1a;
}

.lp-hero-media {
	position: absolute;
	inset: 0;
	z-index: 0;
	margin: 0;
	line-height: 0;
}
.lp-hero-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	display: block;
}

/* Overlay KALDIRILDI (kullanici karari): hero gorselinin uzerinde hicbir
   karartma/gradient katmani yok, lastik gorseli dogal haliyle gorunur.
   Katman DOM'da duruyor ama tamamen seffaf (HTML degismedi). */
.lp-hero-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: none;
}

.lp-hero-grid {
	position: relative;
	z-index: 2;
}

.lp-hero-content { max-width: 560px; }

.lp-hero-intro { margin-bottom: 20px; }

/* Mobil: nowrap YOK - taşma/kesilme olmadan gerekirse dengeli 2 satıra kırılır. */
/* Başlık SİYAH (kullanıcı kararı). Overlay kaldırıldığı için metin doğrudan
   fotoğrafın üzerinde duruyor; siyah metne siyah gölge bulanık bir leke yapacağından
   gölge beyaz hâleye çevrildi (açık/koyu her zeminde okunur kalır).
   F7-İŞ2: metnin arkasına yarı saydam beyaz bir "vurgulayıcı" bandı eklendi.
   `display: inline` + `box-decoration-break: clone` kasıtlı - h1 böylece SATIR
   İÇİ bir kutuya dönüşür ve arka plan/padding/radius her satır parçası için ayrı
   ayrı klonlanır (highlighter kalemi efekti). `display:inline-block` KULLANILMADI:
   içerik 2 satıra kırıldığında shrink-to-fit inline-block genişliği konteynerin
   tamamına yayılabilir (istenmeyen "tam genişlik blok bant" hatası) - clone
   yaklaşımı 1 satırda da 2 satırda da sadece metnin kendisini sarar.
   NOT: h1 artık inline olduğu için hizalamayı KENDİSİ belirleyemez - text-align
   ebeveyni olan .lp-hero-intro'ya taşındı (aşağıdaki breakpoint'lerde). */
.lp-hero-intro h1 {
	display: inline;
	font-size: clamp(20px, 6vw, 26px);
	line-height: 1.15;
	margin: 0;
	color: var(--ink);
	background: rgba(255, 255, 255, .55);
	padding: 2px 10px;
	border-radius: 8px;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	text-shadow: 0 1px 2px rgba(255, 255, 255, .5);
}

/* Masaüstü (≥768px): H1 artık .lp-hero-content ile AYNI sol kolonu paylaşır
   (bkz. aşağıda .lp-hero-content max-width:54%) - ayrı bir max-width TANIMLANMAZ,
   ebeveynden miras alır (böylece H1 ve arama kartı sağda tam olarak aynı kenarda
   biter, iki-kolon sınırı tek yerden yönetilir). Font, bu sol kolona tam metnin
   tek satıra sığması için küçültüldü (ölçüm: Liberation Sans Bold [Arial ile
   metrik-uyumlu] ile 42 karakterlik başlık 28px'te ~601px; konteyner tam
   genişlikteyken (1148px iç alan) %54'lük kolon ~620px -> ~19px güvenli pay,
   bkz. rapor). Bu kısıt SADECE masaüstünde uygulanır (mobilde .lp-hero-intro
   tam genişlik kalır).
   F7 düzeltmesi: bu hizalama/boyut artık ≥768px'te (tablet DAHİL) geçerli -
   eskiden section 19 (@media max-width:1024px) dosyada daha sonra geldiği için
   768-1024 arasını eziyor ve başlığı ortalıyordu, oysa .lp-hero-content hâlâ
   iki-kolonlu masaüstü genişliğindeydi (asimetri). Mobile-only hizalama/boyut
   artık ayrı bir @media (max-width:767px) bloğunda (bkz. bu dosyanın altı). */
@media (min-width: 768px) {
	.lp-hero-intro { text-align: left; }
	.lp-hero-intro h1 {
		font-size: clamp(22px, 2.4vw, 28px);
		line-height: 1.2;
	}
}

/* ≥1025px'te ölçüm 1280/1440 dahil her genişlikte metnin %54'lük sol kolona
   sığdığını doğruluyor (~19px pay) - bu noktadan itibaren tek satır (nowrap)
   güvenle zorlanabilir. 768-1024 arası nowrap zorlanmaz (gerekirse 2 satıra
   kırılır, kesilme olmaz). */
@media (min-width: 1025px) {
	.lp-hero-intro h1 { white-space: nowrap; }
}

/* Filtre kartı: 4 köşe TEK pürüzsüz oval çizgi.
   `overflow: hidden` burada da var ama TEK BAŞINA yeterli değil: .lp-search-tab
   üzerinde `:active` basış geri bildirimi için `transform: scale(.97)` +
   `transition: transform ...` tanımlı (bkz. section 19.7) — WebKit/Safari'de
   `overflow:hidden + border-radius` olan bir kutunun içinde `transform`
   kullanan/bunun için kompozit katmana çıkan bir torun olduğunda köşe kırpması
   bazen atlanıyor ve torunun köşesi dışarı sızabiliyor (aşağıdaki mask-image
   notu da bu Safari davranışına karşı). Bu yüzden gerçek/kalıcı çözüm iç içe
   yarıçap aritmetiğidir (dış yarıçap − içerleme = iç yarıçap) VE kırpmanın
   şeridin kendisine (.lp-search-tabs, bkz. section 5.05) de eklenmesidir —
   bu kutunun overflow:hidden'ı artık ikinci savunma hattı.
   GÜVENLİ: slide-in filtre panelleri (.lp-panel) `position:absolute; inset:0` ile
   zaten tam bu kutunun sınırları içinde; kırpma onları etkilemez. */
.lp-search-box {
	position: relative;
	background: #fff;
	border: 1px solid rgba(24, 24, 24, .10);
	border-radius: var(--radius-card);
	padding: 16px;
	overflow: hidden;
	/* Safari/iOS'ta bilinen bir render hatası var: overflow:hidden + border-radius,
	   içeride `transform` kullanan bir torun (bkz. .lp-panel-sheet translateX)
	   olduğunda köşe kırpmasını bazen atlıyor ve torunun keskin köşeli dikdörtgeni
	   yuvarlatılmış kutunun dışına sızabiliyor. -webkit-mask-image, WebKit'i
	   kırpmayı border-radius'a göre YENİDEN uygulamaya zorlayan standart/güvenli
	   bir düzeltme (diğer tarayıcılarda no-op, görsel etkisi yok).
	   NOT: Bu mask düzeltmesi .lp-panel-sheet gibi translateX kullanan torunlar
	   için yazıldı ve onlar için hâlâ geçerli, ama arama sekmeleri şeridi
	   (.lp-search-tab, section 19.7'de `:active` için transform: scale kullanıyor)
	   TAM kartın ÜST KÖŞESİNDE oturduğu için bu global mask tek başına yetmedi —
	   köşe hizasında ekstra bir round-off/katman sınırı payı kalıyordu. Asıl
	   düzeltme sekme şeridinin (.lp-search-tabs) kendi `overflow: hidden`'ı +
	   iç içe yarıçapların eş-merkezli olması (bkz. section 5.05). */
	-webkit-mask-image: -webkit-radial-gradient(white, black);
	box-shadow:
		0 1px 2px rgba(16, 24, 40, .06),
		0 4px 10px rgba(16, 24, 40, .10),
		0 16px 32px rgba(16, 24, 40, .16);
}

/* Hero icindeki "Lastik Ara" butonu - ANA AKSIYON: turuncu CTA (mavi seçimlerden ayrışır) */
.lp-hero .lp-search-submit {
	background: #FE5F10;
}
.lp-hero .lp-search-submit:hover,
.lp-hero .lp-search-submit:focus-visible {
	background: #EC6608;
	color: #fff;
}

/* ===================== 5.05 Arama sekmeleri (Ebata Göre / Araca Göre - Oponeo stili: açık gri + mavi aktif) ===================== */
/* Şerit kutunun ÜST köşelerine birebir oturur: negatif margin = kutu padding'i (16px).
   DÜZELTME (köşe sızıntısı hatası): önceki sürüm yarıçabı kutuyla AYNI (16px)
   kullanıp nihai kırpmayı .lp-search-box'ın overflow:hidden'ına bırakıyordu —
   ama .lp-search-tab üzerindeki `:active` basış animasyonu (`transform: scale`,
   bkz. section 19.7) Safari/WebKit'te üst köşedeki overflow-clip'i bazen
   atlatıyor, aktif sekmenin kare köşesi kartın yuvarlak köşesinin dışına taşıp
   arkadaki koyu hero zemini sızdırıyordu (Ebata Göre'de sol üst, Araca Göre'de
   sağ üst — hangi sekme aktifse o taraf).
   Kalıcı çözüm: kırpma artık ŞERİDİN KENDİSİNDE (`overflow: hidden` aşağıda) —
   .lp-search-box'ın clip'ine bel bağlamıyoruz. Buna ek olarak iç içe köşe
   yarıçapları EŞ-MERKEZLİ yapıldı (iç yarıçap = dış yarıçap − içerleme):
   kutu 16px, şerit kutunun 1px içinde → şerit 16-1 = 15px. Bu iki önlem
   BİRLİKTE çalışır: overflow:hidden matematik yanlış olsa bile taşmayı keser,
   eş-merkezli yarıçap ise (overflow:hidden devre dışı kalsa/render tutarsız
   olsa bile) görsel olarak "düzleşmiş kesik" değil gerçek eş-merkezli eğri verir. */
.lp-search-tabs {
	display: flex;
	gap: 2px;
	margin: -16px -16px 16px;
	padding: 6px;
	background: var(--oponeo-gray-bg);
	border-radius: 15px 15px 0 0;
	overflow: hidden;
	/* İKİNCİL SAVUNMA (Android Chrome): mask-image + isolation, atın
	   (.lp-search-tabs) `overflow:hidden` kırpmasının kompozit katman terfisi
	   yüzünden bazen atlanmasına karşı ek güvence olarak duruyor. ASIL garanti
	   saf geometridir (aşağıdaki `:first-child`/`:last-child` border-radius
	   eşleşmesi, bkz. section 19.7): uçtaki sekmelerin dış üst köşesi şeridin
	   dış yarıçapına (15px) eşitlenir, bu yüzden kırpma hiç çalışmasa bile kare
	   köşe üretilemez. İkisi bilerek birlikte duruyor; biri diğerinin yerine
	   geçmez. (.lp-search-box'taki AYNI teknik dokunulmadı — o, .lp-panel-sheet
	   gibi translateX kullanan torunlar için ayrı bir kullanım.) */
	-webkit-mask-image: -webkit-radial-gradient(white, black);
	mask-image: radial-gradient(white, black);
	isolation: isolate;
}
.lp-search-tab {
	flex: 1 1 0;
	/* 44px→48px (MOBİL PANEL UX düzeltmesi, kusur B — CLAUDE.md §5.1 min 48×48
	   dokunma hedefi; canlıda 171×44 ölçüldü). */
	min-height: 48px;
	border: none;
	background: transparent;
	/* Şerit (15px) içinde 6px padding ile oturur → eş-merkezli iç yarıçap = 15-6 = 9px.
	   (overflow:hidden yukarıda zaten taşmayı kesin engeller; bu değer sadece
	   köşenin GÖRSEL olarak eş-merkezli/pürüzsüz görünmesi içindir.) */
	border-radius: 9px;
	color: #5C6B7E;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
/* GEOMETRİK GARANTİ — kırpmaya güvenmeyen çözüm (Android Chrome, 2026-08): mask/
   overflow:hidden/isolation yukarıda DURUYOR ama artık asıl garanti bunlar değil.
   Android Chrome'da ata (.lp-search-tabs) kırpması bazen atlanabiliyor (kompozit
   katman terfisi); kırpma atlandığında eş-merkezli "doğru" değer olan 9px'lik
   sekme köşesi kartın 15/16px'lik dış kavisinin İÇİNDE kalıp kare gibi görünüyor.
   Bu yüzden şeridin UÇLARINDAKİ sekmelerin DIŞ üst köşesi, kırpma hiç çalışmasa
   bile kartla aynı kavisi çizsin diye şeridin kendi dış yarıçapına (15px)
   EŞİTLENDİ — kırpma çalışsa da çalışmasa da kare köşe hiç üretilmez. Kasıtlı
   olarak `.is-active`'e değil `:first-child`/`:last-child`'a bağlı: pasif sekme
   zemini şeffaf olduğu için normalde görünmez, ama aktif/hover/focus zemini
   aldığında (ve ileride sekme sayısı değişse bile) doğru köşede otomatik devreye
   girer. Sadece DIŞ üst köşe (first-child→sol üst, last-child→sağ üst); iç üst
   köşe ve alt köşeler 9px eş-merkezli değerinde kalıyor (şeridin düz alt kenarına
   oturduklarından dokunulmadı). Medya sorgusuna hapsedilmedi — masaüstünde de
   geçerli, orada zaten kartın kavisiyle görsel olarak uyumlu görünür. */
.lp-search-tab:first-child { border-top-left-radius: 15px; }
.lp-search-tab:last-child { border-top-right-radius: 15px; }
/* İŞ5: canlıdaki (Customizer Ek CSS) nihai görünümle eşitlendi — mavi zemin +
   beyaz metin. Tema kuralı artık Ek CSS'e ihtiyaç duymadan aynı sonucu verir
   (Ek CSS'e burada dokunulmadı, ayrı bir göç turunda kaldırılacak). */
.lp-search-tab.is-active {
	background: #0066E4;
	color: #fff;
}
.lp-search-tab.is-active:hover,
.lp-search-tab.is-active:focus-visible {
	background: #0052B3;
	color: #fff;
}
.lp-search-tab:hover:not(.is-active) { color: #0066E4; }

.lp-search-tabpanel[hidden] { display: none; }

.lp-vehicle-panel-desc { font-size: 14px; color: var(--muted); margin-bottom: 14px; }

@media (min-width: 768px) {
	.lp-search-tab { font-size: 15px; }
}

.lp-vehicle-tabs {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 6px;
	margin-bottom: 14px;
}
.lp-vehicle-tab {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-height: 52px;
	min-width: 0; /* grid item 1fr overflow guard - bkz. .lp-search-grid-3 .lp-filter-btn notu */
	background: #fff;
	border: 2px solid #CFD6DD;
	border-radius: var(--radius-btn);
	color: var(--ink);
	font-size: 11px;
	font-weight: 600;
	cursor: pointer;
	padding: 6px 4px;
}
.lp-vehicle-tab.active,
.lp-vehicle-tab[aria-selected="true"] {
	background: #0066E4;
	color: #fff;
	border-color: #0066E4;
}

.lp-search-grid-3 {
	display: grid;
	grid-template-columns: 1fr;
	gap: 6px;
}
/* Grid item taşma güvencesi: `1fr` track'ler varsayılan olarak içeriğin
   min-content genişliğinin ALTINA inmez (auto minimum). `.lp-filter-btn` bu
   grid'in GERÇEK çocuğudur (markup artık .lp-field DEĞİL, bkz. front-page.php);
   min-width:0 olmadan dar telefonlarda (320-360px) etiket+değer metni track'i
   zorlayıp kutunun overflow:hidden'ına rağmen komşu sütunları sıkıştırabilir/
   kutuyu sağdan taşırabilir. Aşağıdaki eski `.lp-field` seçimi artık markup'ta
   karşılığı olmayan miras kural - dokunulmadı ama gerçek koruma burada. */
.lp-search-grid-3 > .lp-filter-btn { min-width: 0; }

.lp-field label {
	display: block;
	font-size: 13px;
	font-weight: 700;
	margin-bottom: 6px;
	color: var(--ink);
}

/* Ebat etiketleri: sr-only (ekran okuyucu erişilebilir, görsel olarak gizli) */
.lp-search-grid-3 .lp-field label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.lp-field select,
.lp-field input,
.lp-field textarea {
	width: 100%;
	min-height: 48px;
	font-size: 16px;
	font-family: inherit;
	padding: 10px 12px;
	border: 2px solid #CFD6DD;
	border-radius: 8px;
	background: #fff;
	color: var(--ink);
}
/* Ebat kutuları: placeholder/değer ortalı + kalın belirgin */
.lp-search-grid-3 select {
	text-align: center;
	text-align-last: center;
	font-weight: 700;
}
.lp-field select:focus,
.lp-field input:focus,
.lp-field textarea:focus {
	outline: none;
	border-color: #0066E4;
	box-shadow: 0 0 0 3px rgba(0,102,228,.12);
}
.lp-field textarea { resize: vertical; min-height: 64px; }

.lp-season-toggle-group {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin-top: 14px;
}
.lp-season-toggle { min-width: 0; } /* grid item 1fr overflow güvencesi */
.lp-season-toggle input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}
.lp-season-toggle-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	min-height: 60px;
	justify-content: center;
	background: #fff;
	border: 2px solid #CFD6DD;
	border-radius: var(--radius-btn);
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
	padding: 8px 4px;
	/* `color` BURADA ZORUNLU AÇIKÇA SET EDİLİYOR: header.php'de `</header>` eksik
	   (bilinen yapısal borç), bu yüzden <main> aslında `.lp-header`'ın İÇİNDE ve bu
	   kart onun color:#FFFFFF'ini miras alıyordu → beyaz zemin üstünde beyaz metin/ikon
	   (görünmez). SVG ikon stroke="currentColor" kullanıyor, o yüzden tek satır hem
	   metni hem ikonu düzeltiyor. SİLME — üst miras düzelene kadar (</header> eklenene
	   kadar) bu satır olmadan kutu tekrar bomboş görünür. Özgüllük notu: bu kural
	   (0,1,0) seçili-durum kuralı `.lp-season-toggle input:checked + .lp-season-toggle-card`
	   (0,3,0)'ın ALTINDA kalır, seçili mavi/beyaz görünümü ezmez — bu yüzden !important
	   KULLANILMADI, kullanılmamalı. */
	color: var(--ink);
}
.lp-season-toggle-check {
	position: absolute;
	top: 4px;
	right: 6px;
	opacity: 0;
	font-size: 11px;
}
.lp-season-toggle input:checked + .lp-season-toggle-card {
	background: #0066E4;
	color: #fff;
	border-color: #0066E4;
}
.lp-season-toggle input:checked + .lp-season-toggle-card .lp-season-toggle-check { opacity: 1; }
.lp-season-toggle input:focus-visible + .lp-season-toggle-card { outline: 2px solid var(--link); outline-offset: 2px; }

.lp-search-help-toggle {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: none;
	border: none;
	color: var(--link);
	font-weight: 700;
	font-size: 13px;
	padding: 0;
	cursor: pointer;
	text-decoration: underline;
}
.lp-search-help-toggle:hover { color: var(--link-hover); }
.lp-search-help-toggle svg { transition: transform .2s ease; }
.lp-search-help-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.lp-search-help-wa {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 48px;
	padding: 10px 16px;
	background: var(--wa);
	color: #fff;
	font-weight: 700;
	font-size: 14px;
	border-radius: var(--radius-btn);
	border: 3px solid transparent;
}
.lp-search-help-wa:hover { background: var(--wa-hover); color: #fff; }

.lp-size-guide-example { font-size: 20px; font-weight: 800; margin-bottom: 10px; text-align: center; }
.lp-size-guide-chip {
	display: inline-block;
	background: var(--bg-card);
	padding: 4px 10px;
	border-radius: 6px;
}
.lp-size-guide-slash { margin: 0 4px; color: var(--muted); }
.lp-size-guide-steps { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lp-size-guide-steps li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.lp-size-guide-num {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--ink);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
}
.lp-size-guide-hint { font-size: 13px; color: var(--muted); margin: 0; }
.lp-size-guide-hint a { color: var(--link); text-decoration: underline; }
.lp-size-guide-hint a:hover { color: var(--link-hover); }

/* ===================== 5.10 Filtre butonları (blackcircles düzeni: tıklanabilir, slide-in panel) ===================== */
.lp-filter-btn {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 2px;
	width: 100%;
	min-height: 56px;
	padding: 8px 36px 8px 12px;
	background: #fff;
	border: 2px solid #CFD6DD;
	border-radius: 8px;
	color: var(--ink);
	font-family: inherit;
	font-size: 16px;
	cursor: pointer;
	text-align: left;
	transition: border-color .18s ease, box-shadow .18s ease;
}
.lp-filter-btn:hover { border-color: #0066E4; }
.lp-filter-btn:focus-visible {
	outline: none;
	border-color: #0066E4;
	box-shadow: 0 0 0 3px rgba(0,102,228,.15);
}
.lp-filter-btn.has-value { border-color: #0066E4; }
.lp-filter-btn-label {
	font-size: 12px;
	font-weight: 700; /* 600→700: kullanıcı geri bildirimi — soluk/ince, gözden kaçıyordu */
	color: var(--ink); /* #5B6470→var(--ink): aynı sebep, kontrast için koyulaştırıldı. Boyut (12px) kasıtlı KORUNDU. */
	letter-spacing: 0;
}

/* ①②③ adım numaraları (MOBİL PANEL UX düzeltmesi, kusur D — CLAUDE.md §7.6'da
   belgeli kural: "her label'a ::before ile daire içinde 1/2/3 numara",
   Genişlik→Yükseklik→Jant Çapı sırasını deneyimsiz kullanıcıya göstermek için.
   ÖNCEKİ kural DOM'da hiçbir şeye denk gelmiyordu (v9 blackcircles slide-in
   panel revizyonunda yapı değişti). Burada `data-panel` özniteliğine bağlandı
   — grid'de gizli <select>'ler de olduğu için nth-child sıra numarası GÜVENİLİR
   DEĞİL, data-panel değişmediği sürece bu kural hep doğru elemente denk gelir.
   Rengi marka mavisi (#0066E4, projede zaten kullanılan token) — göze batmadan
   sıra göstergesi. */
.lp-search-grid-3 .lp-filter-btn-label::before {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 13px;
	height: 13px;
	margin-right: 3px;
	border-radius: 50%;
	background: #0066E4;
	color: #fff;
	font-size: 8px;
	font-weight: 700;
	line-height: 1;
	vertical-align: middle;
}
.lp-filter-btn[data-panel="lpPanelWidth"] .lp-filter-btn-label::before { content: "1"; }
.lp-filter-btn[data-panel="lpPanelHeight"] .lp-filter-btn-label::before { content: "2"; }
.lp-filter-btn[data-panel="lpPanelRim"] .lp-filter-btn-label::before { content: "3"; }
.lp-filter-btn-val {
	font-size: 16px;
	font-weight: 700;
	color: var(--ink);
	min-height: 20px;
	line-height: 1.2;
}
.lp-filter-btn-val:empty::after {
	content: "Seçin";
	font-weight: 400;
	color: #9CA3AF;
}
.lp-filter-btn-chevron {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 20px;
	font-weight: 400;
	color: #9CA3AF;
	line-height: 1;
}
.lp-filter-btn.has-value .lp-filter-btn-chevron { display: none; }

.lp-filter-btn-full {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 10px 36px 10px 12px;
	margin-top: 10px;
}
.lp-filter-btn-full .lp-filter-btn-label { font-size: 13px; text-transform: none; letter-spacing: 0; }
.lp-filter-btn-full .lp-filter-btn-val { font-size: 13px; font-weight: 600; }
.lp-filter-btn-full .lp-filter-btn-chevron { font-size: 16px; }

.lp-search-submit:disabled,
.lp-search-submit[disabled] {
	opacity: .45;
	cursor: not-allowed;
}

.lp-filter-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 14px;
}
.lp-filter-help, .lp-filter-more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	/* 40px→48px (MOBİL PANEL UX düzeltmesi, kusur B — CLAUDE.md §5.1 min 48×48
	   dokunma hedefi; canlıda Yardım 71×40, Daha Fazla Filtre 122×40 ölçüldü).
	   Dikey düzen bozulmadı: bu satır .lp-filter-actions'ın TEK satırı,
	   üstünde/altında sıkışan başka içerik yok. */
	min-height: 48px;
	padding: 6px 4px;
	background: none;
	border: none;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	color: var(--muted);
	cursor: pointer;
	transition: color .15s ease;
}
.lp-filter-help:hover, .lp-filter-more:hover { color: var(--ink); }
.lp-filter-more { color: #0066E4; }
.lp-filter-more:hover { color: #0052B3; }
.lp-filter-more svg { transition: transform .2s ease; }
.lp-filter-more[aria-expanded="true"] svg { transform: rotate(180deg); }

.lp-filter-expand {
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	transition: max-height .3s ease, opacity .25s ease, margin .3s ease;
	margin-top: 0;
}
.lp-filter-expand:not([hidden]) { max-height: 400px; opacity: 1; margin-top: 14px; }
.lp-filter-expand-title {
	font-size: 12px;
	font-weight: 700;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: .5px;
	margin: 0 0 8px;
}
.lp-filter-expand .lp-vehicle-tabs { margin-bottom: 0; }

/* --- Slide-in panel --- */
.lp-panel {
	position: absolute;
	inset: 0;
	z-index: 100;
	overflow: hidden;
	pointer-events: none;
	/* NOT: -webkit-mask-image buradan KALDIRILDI (2. tur denetim) - .lp-panel'in
	   kendi border-radius'u yok, kırpacak yuvarlak köşe zaten olmadığı için
	   maske gereksiz bir compositing katmanı ekleyip kayan panel animasyonunu
	   riske atıyordu. Asıl köşe kırpması .lp-search-box'ta (border-radius VAR),
	   maske orada kalıyor. */
}
.lp-panel.is-open { pointer-events: auto; }
.lp-panel[hidden] { display: block; }
.lp-panel-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,.45);
	opacity: 0;
	transition: opacity .22s ease;
}
.lp-panel.is-open .lp-panel-backdrop { opacity: 1; }
.lp-panel-sheet {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 90%;
	max-width: 380px;
	background: #fff;
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform .22s cubic-bezier(.4,0,.2,1), box-shadow .22s cubic-bezier(.4,0,.2,1);
	/* Gölge SADECE açıkken (bkz. .is-open kuralı) - `.lp-panel[hidden]{display:block}`
	   yüzünden kapalı panel de render edilmeye devam ediyor; translateX(100%) ile
	   sağa itilmiş sheet'in negatif-X gölgesi kapalıyken de `.lp-panel`'in overflow
	   kırpma alanına düşüp kutunun sağ kenarına gri şerit olarak sızıyordu (kenar
	   testi ile doğrulandı). Kapalıyken gölge yok = sızıntı yok. */
	box-shadow: none;
}
.lp-panel.is-open .lp-panel-sheet {
	transform: translateX(0);
	box-shadow: -4px 0 28px rgba(0,0,0,.12);
}
.lp-panel-head {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 52px;
	padding: 0 14px;
	background: #0066E4;
	color: #fff;
	flex-shrink: 0;
}
.lp-panel-title {
	flex: 1;
	font-size: 16px;
	font-weight: 700;
	text-align: center;
}
.lp-panel-back {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 8px 10px;
	background: none;
	border: none;
	color: rgba(255,255,255,.85);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	border-radius: 6px;
	white-space: nowrap;
	min-width: 48px;
	/* MOBİL PANEL UX düzeltmesi, kusur B — CLAUDE.md §5.1 min 48×48 dokunma
	   hedefi (canlıda 48×37 ölçüldü, dikey eksikti). .lp-panel-head zaten
	   min-height:52px ve align-items:center — 48px burada rahatça sığar,
	   başlık şeridi sıkışmaz. */
	min-height: 48px;
}
.lp-panel-back:hover { background: rgba(255,255,255,.12); }
.lp-panel-back[hidden] { visibility: hidden; pointer-events: none; }
.lp-panel-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 40×40→48×48 (MOBİL PANEL UX düzeltmesi, kusur B — CLAUDE.md §5.1 min
	   48×48 dokunma hedefi). .lp-panel-head min-height:52px olduğu için 48px
	   dikeyde rahat sığıyor (2px pay). */
	width: 48px;
	height: 48px;
	padding: 0;
	background: none;
	border: none;
	color: #fff;
	font-size: 20px;
	cursor: pointer;
	border-radius: 50%;
	flex-shrink: 0;
}
.lp-panel-close:hover { background: rgba(255,255,255,.15); }
.lp-panel-body {
	flex: 1;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 8px 0;
}
.lp-panel-body--brand { padding: 0; }
.lp-panel-list { list-style: none; margin: 0; padding: 0; }
.lp-panel-list li { border-bottom: 1px solid #F2F4F7; }
.lp-panel-radio {
	display: flex;
	align-items: center;
	width: 100%;
	min-height: 52px;
	padding: 12px 18px;
	background: none;
	border: none;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	color: var(--ink);
	cursor: pointer;
	text-align: left;
	transition: background-color .12s ease, color .12s ease;
}
.lp-panel-radio:hover { background: #F8FAFC; }
.lp-panel-radio.is-selected { background: #EFF6FF; color: #0066E4; }
.lp-panel-radio--placeholder { color: #9CA3AF; font-weight: 400; }
.lp-panel-foot {
	padding: 14px 18px;
	border-top: 1px solid #E5E7EB;
	flex-shrink: 0;
}
.lp-panel-apply {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 48px;
	padding: 12px 20px;
	background: #0066E4;
	color: #fff;
	border: none;
	border-radius: 8px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	transition: background-color .15s ease;
}
.lp-panel-apply:hover,
.lp-panel-apply:focus-visible { background: #0052B3; }

/* --- Marka paneli gruplu checkbox --- */
.lp-brand-group {
	border-bottom: 1px solid #E5E7EB;
	padding: 12px 0;
}
.lp-brand-group:last-child { border-bottom: none; }
.lp-brand-group-head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 18px;
	cursor: pointer;
}
.lp-brand-group-bar {
	width: 4px;
	height: 20px;
	border-radius: 2px;
	flex-shrink: 0;
}
.lp-brand-group-bar--premium { background: #0066E4; }
.lp-brand-group-bar--orta    { background: #FE5F10; }
.lp-brand-group-bar--ekonomi { background: #22A45D; }
.lp-brand-group-name {
	flex: 1;
	font-size: 14px;
	font-weight: 700;
	color: var(--ink);
}
.lp-brand-group-info {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 1.5px solid #D1D5DB;
	background: none;
	font-size: 12px;
	font-weight: 700;
	color: #9CA3AF;
	cursor: help;
	flex-shrink: 0;
}
.lp-brand-group-check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border: 2px solid #D1D5DB;
	border-radius: 4px;
	background: #fff;
	flex-shrink: 0;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease;
}
.lp-brand-group-check.is-checked { background: #0066E4; border-color: #0066E4; }
.lp-brand-group-check.is-checked::after {
	content: "✓";
	color: #fff;
	font-size: 13px;
	font-weight: 700;
}
.lp-brand-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2px;
	padding: 4px 18px 4px 48px;
}
.lp-brand-chip {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 42px;
	min-width: 0; /* grid item 1fr overflow güvencesi - uzun marka adları için */
	padding: 6px 8px;
	background: none;
	border: 1px solid transparent;
	border-radius: 6px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	color: var(--ink);
	cursor: pointer;
	transition: background-color .12s ease;
}
.lp-brand-chip:hover { background: #F8FAFC; }
.lp-brand-chip.is-checked { background: #EFF6FF; color: #0066E4; font-weight: 600; }
.lp-brand-chip-check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border: 2px solid #D1D5DB;
	border-radius: 3px;
	background: #fff;
	flex-shrink: 0;
	transition: background-color .15s ease, border-color .15s ease;
}
.lp-brand-chip.is-checked .lp-brand-chip-check { background: #0066E4; border-color: #0066E4; }
.lp-brand-chip.is-checked .lp-brand-chip-check::after {
	content: "✓";
	color: #fff;
	font-size: 11px;
	font-weight: 700;
}

/* Dokunma hedefi (MOBİL PANEL UX düzeltmesi, kusur B — CLAUDE.md §5.1 min
   48×48). `.lp-brand-chip` sınıf adı bu dosyada BAŞKA bir bileşenle (statik
   ana sayfa "Markalar" şeridi, section 15, `min-height:44px`) çakışıyor; o
   kural SONRA geldiği için aynı özgüllükte kazanıp panel chip'ini 42px→44px'e
   düşürüyordu (canlıda 139×44 ölçüldü — 42 değil 44 çıkmasının sebebi buydu).
   Scope'lu seçici statik şeride dokunmadan panel bağlamını 48px'e sabitler. */
.lp-panel-body--brand .lp-brand-chip { min-height: 48px; }

/* Marka paneli masaüstü genişlik düzeltmesi: `.lp-brand-grid`/`.lp-brand-chip` sınıf
   adları page-markalar.php'deki AYRI bir bileşenle (marka listeleme kartları, bkz.
   dosyanın altı) çakışıyor - aynı özgüllükte olduklarından ve o blok dosyada SONRA
   geldiğinden, oradaki masaüstü `repeat(4, 1fr)` kuralı buraya sızıp burada asıl
   niyet edilen 2 sütunu eziyordu (380px sheet'te 4 dar sütun -> "Goodyear" gibi
   isimler "Goody" olarak kesiliyordu). Burada `.lp-panel-body--brand` bağlamıyla
   özgüllüğü artırıp 2 sütunlu niyeti geri kazandırıyoruz, sheet'i de marka içeriği
   için biraz genişletip nefes payı veriyoruz. Sadece masaüstü (≥1025px) - mobilde
   panel zaten tam genişlik (bkz. 5.16 bloğu) ve dokunulmuyor. */
@media (min-width: 1025px) {
	.lp-panel-sheet:has(.lp-panel-body--brand) { max-width: 480px; }
	.lp-panel-body--brand .lp-brand-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 6px; padding: 4px 24px 4px 52px; }
	.lp-panel-body--brand .lp-brand-chip { font-size: 14px; padding: 8px 10px; }
}

/* --- Mevsim tik ikonu --- */
.lp-season-toggle-check {
	position: absolute;
	top: 4px;
	right: 6px;
	font-size: 11px;
	font-weight: 700;
	opacity: 0;
	color: #fff;
	transition: opacity .15s ease;
	z-index: 1;
}
.lp-season-toggle input:checked + .lp-season-toggle-card .lp-season-toggle-check { opacity: 1; }
.lp-season-toggle input:checked + .lp-season-toggle-card svg { stroke: #fff; }

/* ===================== 5.16 Mobil panel tam genişlik ===================== */
@media (max-width: 1024px) {
	.lp-filter-btn { min-height: 48px; padding: 6px 28px 6px 10px; }
	.lp-filter-btn-label { font-size: 10px; }
	.lp-filter-btn-val { font-size: 15px; }
	.lp-filter-btn-chevron { font-size: 18px; right: 8px; }
	.lp-filter-btn-full .lp-filter-btn-label { font-size: 12px; }
	.lp-filter-btn-full .lp-filter-btn-val { font-size: 12px; }

	/* MOBİL PANEL UX düzeltmesi (kusur A + C, canlıda 390px'te E2E ile
	   ölçüldü): `.lp-panel` eskiden `position:absolute; inset:0` ile
	   `.lp-search-box`'a (hero kartı) SINIRLIYDI — hem arkaplan kaydırma kilidi
	   yoktu (gerçek touch-swipe sayfayı 285px kaydırdı) hem de backdrop sadece
	   kartın içini kaplıyordu, ekranın geri kalanı (hero görseli, sayfanın alt
	   kısmı) tıklanabilir/kaydırılabilir kalıyordu. Artık `position:fixed` ile
	   TÜM VIEWPORT'u kaplayan gerçek tam-ekran modal: JS (parklastik.js,
	   lpPortalPanelOpen) panel açılırken düğümü <body>'e taşıyor (aksi halde
	   `.lp-search-box`'ın `overflow:hidden`+maskesi fixed'i de keserdi) ve
	   lpLockBodyScroll ile body'i konum-korumalı kilitliyor (bkz. o dosyadaki
	   gerekçe). z-index 970: `.lp-header`(500)/`.lp-mobile-nav`(950)'nin
	   ÜSTÜNDE, Teklif Al modalinin (1000, section 16) ALTINDA — modal her
	   zaman en üstte kalmalı. Masaüstü (≥1025px) bu bloktan etkilenmez, panel
	   `position:absolute` ile `.lp-search-box`'a göre konumlu-kart davranışını
	   AYNEN korur. */
	.lp-panel { position: fixed; z-index: 970; }
	/* Sheet artık tam genişlik DEĞİL — en az 56px'lik bir "backdrop şeridi"
	   solda görünür/dokunulabilir kalır (kusur C: "backdrop'a dokunma paneli
	   kapatmalı" için gerçek bir dış alan şart). `max-width: calc(100% - 56px)`
	   + `width: 100%` birlikte: ekran ne kadar dar olursa olsun (360-414px)
	   payın altına inmez, ekran genişledikçe sheet 380px sabit tavana (temel
	   .lp-panel-sheet kuralı) yine kendisi çarpar. */
	.lp-panel-sheet { width: 100%; max-width: calc(100% - 56px); }
	/* Panel artık gerçek viewport'u kapladığı için (çentik/Dynamic Island'lı
	   cihazlarda) başlık şeridi güvenli alanın altına iniyor — mobil drawer
	   menüyle (section 19.3, .lp-mobile-nav-head) AYNI teknik. env() destek-
	   siz tarayıcılarda 0 döner, no-op. */
	.lp-panel-head { padding-top: max(0px, env(safe-area-inset-top)); }
	.lp-panel-radio { min-height: 52px; font-size: 16px; }
}

@media (min-width: 768px) {
	.lp-vehicle-tabs { grid-template-columns: repeat(4, 1fr); }
	.lp-search-grid-3 { grid-template-columns: repeat(3, 1fr); gap: 8px; }
	/* Kart artık daha geniş (54%'lik kolonu dolduruyor) ama blackcircles gibi
	   derli toplu kalması için input yüksekliği/dolgusu masaüstünde hafifçe
	   sıkılaştırılır. Mobilde (bu blok DIŞINDA) 48px min-height + 16px font
	   ve 44-48px dokunma alanı DEĞİŞMEDEN korunur. */
	.lp-field select,
	.lp-field input,
	.lp-field textarea { min-height: 44px; padding: 9px 12px; }
}

@media (min-width: 768px) {
	.lp-hero { min-height: 600px; display: flex; align-items: center; }
	/* 2. TUR DENETİM — GERÇEK KÖK SEBEP (izole test harness'te doğrulandı):
	   `.lp-hero` burada flex konteynere dönüşünce `.lp-hero-grid` (doğrudan
	   flex çocuğu) `flex-basis:auto` + width TANIMSIZ olduğu için "fit-content"
	   (shrink-to-fit) kurallarına göre boyutlanıyor - yani genişliğini kendi
	   İÇERİĞİ (sonuçta H1'in nowrap/geniş genişliği) belirliyor, .lp-container'ın
	   normal blok davranışındaki gibi mevcut alanı DOLDURMUYOR. Ölçüm kanıtı:
	   izole test sayfasında (parklastik.css + hero markup, gerçek pencere
	   genişliği window.innerWidth ile doğrulandı - emülasyon/iframe hilesi
	   YOK) bu satır eklenmeden önce .lp-search-box/.lp-hero-content/.lp-hero-intro
	   ÜÇÜ DE H1 ile birebir aynı genişlikteydi (613px = 613px = 613px = 613px,
	   viewport 1586px). Bu satır eklenince kart doğru şekilde tasarlanan
	   %52vw/%54'e ulaştı (824.6px ≈ 1586×0.52). `width:100%` flex item'ı
	   flex hattını doldurmaya zorlar (üstteki max-width/margin:auto kuralları
	   hâlâ kapak/ortalama görevini görür); `min-width:0` flex item'ların
	   varsayılan `min-width:auto` içerik-tabanlı taban değerini kırar (klasik
	   flexbox taşma hatası). Dar ekranlarda (768-1024 gerçek cihaz, örn.
	   yatay telefon/tablet) bu satır olmadan kart H1'in gerektirdiği genişliğe
	   göre şişip GERÇEK EKRANDAN TAŞABILIYORDU - html/body{overflow-x:clip}
	   bunu kaydırmadan sessizce kesiyor, bu da hem "başlık sağdan kesik" hem
	   "kutunun sağında gri taşma" (sekme şeridinin köşe eğrisi ekranın dışında
	   kaldığı için görünen düz/keskin kenarı) şikayetlerini AÇIKLIYOR.

	   3. TUR KAPSAM DARALTMASI: bu kural buradan (min-width:768px, üst sınırsız)
	   kaldırıldı ve `@media (min-width:768px) and (max-width:1024px)` bloğuna
	   taşındı (bkz. dosyanın altı). SEBEP: burada bırakılırsa ≥1025px'i de
	   etkiliyor ve kartı kullanıcının onayladığı ~613px'ten tasarım-niyeti
	   olan 824px'e (52vw) büyütüyordu - bu, "masaüstü (≥1025px) görünümünü
	   bozma" kısıtını çiğniyor. Teknik olarak 52vw'ye büyümek "doğru" tasarım
	   niyetiyle uyumlu olsa da bu AYRI bir karar/kapsam - şu an sadece
	   768-1024 (tablet) taşması hedefleniyor, masaüstü mevcut hâliyle
	   (shrink-to-fit, ~613px) KORUNUYOR. */
	/* İKİ-KOLON SINIRI (tek kaynak): arka plan görseli (2560x1440) SOL ~%55
	   temiz yeşil / SAĞ ~%45 kampanya kümesi ("YAZA ÖZEL İNDİRİMLER" şeridi,
	   "%20 İNDİRİM" dairesi, lastik+top görselleri) olacak şekilde tasarlandı.
	   Sol kolon (.lp-hero-content = H1 + arama kartı, bkz. yukarıda .lp-hero-intro)
	   container'ın aynı sol kenarından başlar ve %54 genişliği ASLA GEÇMEZ - bu
	   sağ kümenin tamamının (>%58) her zaman açıkta kalmasını garanti eder. Kart
	   artık sabit 480px DEĞİL: bu %54'lük kolonun tamamını doldurur (max-width
	   yok, block-level varsayılan davranışla parent genişliğini alır -> viewport'a
	   göre ~536-620px arası; 1280/1440'ta kart genişliği ~600-620px, kesinlikle
	   sağ kümeye binmez, bkz. rapor). */
	.lp-hero-content { max-width: 54%; margin-right: auto; }
	/* Soldan gelen koyu gradient KALDIRILDI — masaustunde de gorsel filtresiz.
	   (background:none kuralı temel .lp-hero-overlay tanımında zaten var — burada
	   tekrarı no-op'tu, İŞ4 kapsamında kaldırıldı.) */
	/* Görsel her zaman SAĞA sabitlenir. Hero konteynerinin en-boy oranı görselin
	   (2560/1440 = 1.78) oranından farklı olduğunda tarayıcı object-fit:cover
	   için yatay kırpma uygular; "center" konumu bu kırpmayı SOL VE SAĞDAN eşit
	   yapar ve sağdaki kampanya kümesini içeri kaydırıp karta çarptırır (asıl
	   çakışma nedeni buydu). "right center" konumu kırpmayı SADECE SOLDAN (temiz
	   yeşil alandan) yapar, küme tüm masaüstü genişliklerinde tam görünür kalır. */
	.lp-hero-media img { object-position: right center; }
}

/* 3. TUR KAPSAM DARALTMASI: flex shrink-to-fit düzeltmesi SADECE 768-1024
   (tablet/yatay telefon) aralığında uygulanır. ≥1025px'te BİLEREK
   uygulanmıyor - orada .lp-hero-grid eski davranışına (shrink-to-fit,
   kart ~613px, kullanıcı onaylı masaüstü görünümü) döner; aşağıdaki
   @media (min-width:1025px) bloğu `width` set ETMEZ, sadece max-width/
   margin/padding ayarlar, bu yüzden width `auto` kalır ve flex item
   yeniden fit-content'e göre boyutlanır (bkz. rapor - 1586px'te
   .lp-search-box tekrar ~613px ölçüldü, 824px DEĞİL). */
@media (min-width: 768px) and (max-width: 1024px) {
	.lp-hero-grid { width: 100%; min-width: 0; }
}

@media (min-width: 1025px) {
	.lp-hero { min-height: 640px; }

	/* Kartı sola genişlet: merkezlenmiş konteynerden çık, solda ~80-100px yeşil
	   pay bırak, geniş boş yeşil alanı doldur. Sağ promosyon kümesine BİNMEZ
	   (max 52vw -> sağ kenar overlay'in opak yeşil bölgesinde kalır). H1 kartla
	   AYNI sol kenardan başlar (ikisi de .lp-hero-content içinde, sola hizalı). */
	.lp-hero .lp-hero-grid {
		max-width: none;
		margin: 0;
		padding-left: clamp(80px, 6vw, 100px);
		padding-right: 24px;
	}
	.lp-hero-content { max-width: 52vw; margin-right: 0; }

	/* Kart genişlediği için dikey boşluklar hafifçe sıkılaştırılır (yükseklik
	   ARTMAZ, sadece daha derli toplu görünür). */
	.lp-hero-intro { margin-bottom: 14px; }
	.lp-hero .lp-vehicle-tabs { margin-bottom: 10px; }
	.lp-hero .lp-search-grid-3 { margin-bottom: 10px; }
	.lp-hero .lp-season-toggle-group { margin-bottom: 10px; }
}

/* ===================== 5.1 Hero altı 3 kart (OVERLAP YOK — normal akış) ===================== */
/* Kartlar artık hero'ya BİNMİYOR (kullanıcı kararı): negatif margin'ler kaldırıldı,
   kartlar hero bittikten sonra normal document flow içinde başlar. */
.lp-hero-cards {
	padding: 14px 0 8px;
}
.lp-hero-cards-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	margin-top: 0;
}
/* KART HİSSİ (kullanıcı geri bildirimi: kartlar sayfa zeminiyle bütünleşiyordu).
   Sebep ölçüldü: sayfa zemini #FFF, kart zemini de #FFF ve KENARLIK HİÇ YOKTU —
   ayrımı yalnızca yumuşak bir gölge taşıyordu.

   Kenarlık düz renk değil GRADYAN: üstte var(--border-ink)'in biraz üstünde
   (.22), altta belirgin biçimde altında (.06). Sebep: kartın altında zaten
   düşen gölge var; alt kenarı da düz koyu çizince "çift çizgi" oluşup kart
   çerçeveli/yassı duruyordu. Üstü koyu altı açık kenarlık ışığın üstten
   geldiği izlenimini verip kartı yüzeyden kaldırıyor (iki varyant canlıda
   yan yana denendi, bu seçildi). Gradyanın ortası (~.13) zaten
   --border-ink (.14) ile aynı ton — PALET DIŞINA ÇIKILMADI, yalnızca aynı
   ink renginin alfası oynatıldı.

   ⚠ TEKNİK TUZAK: gradyan kenarlık `background`i İKİ KATMANLI kullanır
   (padding-box beyaz dolgu + border-box gradyan). Bu seçiciye başka bir
   yerde `background` / `background-color` verilirse kenarlık SESSİZCE
   kaybolur. Zemin değişikliği gerekirse ilk katmandaki var(--bg-main)
   değiştirilmeli. */
.lp-hero-card {
	border: 1px solid transparent;
	border-radius: var(--radius-card);
	background:
		linear-gradient(var(--bg-main), var(--bg-main)) padding-box,
		linear-gradient(180deg,
			rgba(24, 24, 24, .22) 0%,
			rgba(24, 24, 24, .13) 45%,
			rgba(24, 24, 24, .06) 100%) border-box;
	box-shadow: var(--shadow-hero-card);
	padding: 20px;
}
.lp-hero-card-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--bg-card);
	margin-bottom: 12px;
}
.lp-hero-card h3 { font-size: 16px; margin-bottom: 4px; }
.lp-hero-card p { font-size: 14px; color: var(--muted); margin-bottom: 16px; }

@media (min-width: 768px) {
	.lp-hero-cards-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ===================== 7. Popüler Ebatlar ===================== */
/* 2026-08-05: `.lp-popular-sizes` / `.lp-size-chip` (gri pill'ler) yatay kayan
   kart rafına dönüştü — yeni kurallar bölüm 29'da (dosya sonunda), markup
   front-page.php'de. Eski chip kuralları TAMAMEN silindi (grep ile tek
   kullanıcının anasayfa olduğu doğrulandı — ölü seçici bırakılmadı). */

/* ===================== 8. Ürün Kartı (WooCommerce) ===================== */
/* Mobil (≤767px) TABAN davranışı: TEK sütun. Bu, anasayfa/kategori/marka
   arşivleri/`/lastik-ara/` dahil ul.products render eden HER yüzeye uygulanır -
   ayrı bir "mobilde tek sütun" istisnası artık gerekmiyor (aşağıdaki
   `.lp-featured-products` kuralı zaten bu tabanla aynı değeri üretiyor, kaldırılmadı
   çünkü anasayfanın niyetini belgeliyor ve zararsız - bkz. altındaki not).
   ≥768px'te 3 sütuna, ≥1025px'te yine 3 sütuna çıkar (bu iki media query
   DEĞİŞMEDİ - tablet/masaüstü davranışı korunuyor). */
ul.products {
	display: grid !important;
	grid-template-columns: 1fr;
	gap: 16px;
	list-style: none;
	margin: 0;
	padding: 0;
}
@media (min-width: 768px) { ul.products { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
@media (min-width: 1025px) { ul.products { grid-template-columns: repeat(3, 1fr); } }

/* Ana sayfa: mobil taban zaten 1fr (yukarıda) - bu kural artık FONKSİYONEL olarak
   gereksiz ama anasayfanın "öne çıkan ürünler" bölümünün mobilde tek sütun olması
   gerektiğini AÇIKÇA belgelediği ve tabanla çakışmadığı (aynı değeri tekrar ettiği)
   için kasıtlı olarak bırakıldı - silinirse anasayfa davranışı görünmez biçimde
   tabana bağımlı hale gelir, bu satır o bağımlılığı okuyucuya açık eder. */
.lp-featured-products ul.products {
	grid-template-columns: 1fr;
}
@media (min-width: 768px) {
	.lp-featured-products ul.products { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}

ul.products li.product,
.lp-featured-products ul.products li.product {
	background: var(--bg-card);
	border: 1px solid var(--border-ink);
	border-radius: var(--radius-card);
	padding: 14px;
	box-shadow: var(--shadow-card);
	list-style: none;
	min-width: 0;
	overflow: hidden;
}
ul.products li.product a.woocommerce-loop-product__link { display: block; }
ul.products li.product img {
	aspect-ratio: 1 / 1;
	object-fit: contain;
	border-radius: 10px;
	background: #fff;
	margin-bottom: 10px;
}
ul.products li.product .woocommerce-loop-product__title {
	font-size: 14px;
	font-weight: 600;
	color: var(--ink);
	margin: 0 0 6px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
ul.products li.product .price {
	display: block;
	font-size: 18px;
	font-weight: 800;
	color: var(--price);
	margin-bottom: 8px;
}
ul.products li.product .price del { color: var(--muted); font-weight: 400; }

/* Blocksy'nin kart döngüsünde bastığı "Genel" kategori satırı (entry-meta) — bu
   proje kategori bazlı içerik yazmıyor (LASTİK tek kategori), gösterilecek anlamlı
   bir şey yok. Sadece ÜRÜN döngüsüne kapsanır — .entry-meta blog/yazı tarafında
   ayrıca kullanılabilir, oraya sızmasın.

   ⚠ NEDEN CSS, NEDEN PHP DEĞİL (araştırıldı, 2026-08-01 — tekrar denemeyin):
   Bu satır ve aşağıdaki .ct-woo-card-actions bloğu, Blocksy 2.1.51'in kart
   KATMAN LİSTESİNDEN geliyor (`product_meta` ve `product_add_to_cart` katmanları,
   bkz. blocksy/inc/components/woocommerce/archive/product-card.php satır ~408 ve
   ~477). Bu liste `blocksy_get_theme_mod('woo_card_layout')` ile okunuyor; o
   fonksiyon WordPress'in `get_theme_mod()`'unu ÇAĞIRMIYOR, Blocksy'nin kendi DB
   katmanına gidiyor (`blocksy_manager()->db->get_theme_mod()`). Dolayısıyla
   WP'nin `theme_mod_*` filtreleri TETİKLENMEZ; katman listesinin alındığı yerde
   `apply_filters` de yok. `remove_action` da yetmez: type-2 kart düzeninde
   `woocommerce_template_loop_add_to_cart()` hook üzerinden değil DOĞRUDAN
   çağrılıyor. Markup'tan gerçekten kaldırmanın tek desteklenen yolu Customizer →
   WooCommerce → Ürün Kartı katman listesinden ilgili öğeleri kapatmak; bu ise
   repo dışı bir DB ayarı olacağından (bkz. CLAUDE.md §7.6 "köprüleme borcu")
   BİLEREK tercih edilmedi. Sonuç görsel olarak birebir aynı. */
ul.products li.product ul.entry-meta {
	display: none;
}

/* Katalog modunda sepet yok — WooCommerce'in "Seçenekleri seç" sarmalayıcısı
   (Blocksy card-actions) katalog modu href/metnini boşalttıktan sonra geriye
   işlevsiz, boş aria-label'lı bir buton bırakıyordu. display:none ekran
   okuyucudan da kaldırır — istenen davranış. */
ul.products li.product .ct-woo-card-actions {
	display: none;
}

/* ===================== 9. Neden Biz / Hizmetler / Markalar ===================== */
.lp-why-grid,
.lp-services-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
}
.lp-why-card,
.lp-service-card {
	background: var(--bg-main);
	border: 1px solid var(--border-ink);
	border-radius: var(--radius-card);
	padding: 18px;
	/* Faz 2 premium derinlik: kenarlık KALIR, üzerine yumuşak gölge eklenir (en
	   düşük riskli seçenek, kullanıcı kararı). Taban gölge --shadow-card-soft;
	   masaüstü hover'da belirginleşir (aşağıdaki hover:hover media). */
	box-shadow: var(--shadow-card-soft);
	transition: transform .3s ease, box-shadow .3s ease;
}
/* Mobilde dokunma geri bildirimi (hafif "bas" hissi). Hover media'sının dışında
   bilerek tutuldu — :active zaten sadece basılı anda tetiklenir, masaüstünde de
   zararsızdır ama asıl amacı dokunmatik ekranlardır. */
.lp-why-card:active,
.lp-service-card:active { transform: scale(.99); }

/* Sadece gerçek hover donanımı olan cihazlarda (fare) kaldırma efekti — dokunmatik
   ekranlarda ":hover" kilitlenip kartın "yapışık" görünmesini engeller. */
@media (hover: hover) and (pointer: fine) {
	.lp-why-card:hover,
	.lp-service-card:hover {
		transform: translateY(-5px);
		box-shadow: 0 18px 38px rgba(24, 24, 24, .16);
	}
}

/* NOT (2026-08-05): 96×96px ikon kutusu (`.lp-why-icon` / `.lp-service-icon`)
   KALDIRILDI — anasayfadaki 7 kart artık görseli TAM KAPLAYAN düzene geçti
   (bkz. bir alttaki 9.2). `/hizmetler/` sayfası aynı `.lp-service-card`
   sınıfını GÖRSELSİZ kullanmaya devam ediyor; bu yüzden yukarıdaki taban
   kurallar (kenarlık/gölge/hover/:active) DEĞİŞTİRİLMEDİ, tüm yeni davranış
   ayrı bir `.lp-media-card` değiştiricisinde toplandı. */
.lp-why-card h3,
.lp-service-card h3 { font-size: 16px; margin-bottom: 6px; }
.lp-why-card p,
.lp-service-card p { font-size: 14px; color: var(--muted); margin: 0; }
.lp-services-note { margin-top: 18px; color: var(--muted); font-size: 14px; }

/* ---------------------------------------------------------------------------
   9.2 TAM KAPLAYAN GÖRSELLİ KART (.lp-media-card)  — 2026-08-05
   ---------------------------------------------------------------------------
   Teknik, kampanya banner'ında (23.5) zaten kurulu olan desenin AYNISI:
   mutlak konumlu görsel + üstünde scrim (karartma gradyanı) + en üstte gerçek
   HTML metin. Yeni bir teknik icat edilmedi, uyarlandı.

   BANNER'DAN TEK SAPMA — metin BLOK AKIŞINDA, `position: absolute` DEĞİL:
   banner'da metin sabit uzunlukta ve kutu oranı ona göre ölçülmüştü. Burada 7
   kartın metni farklı uzunlukta (en uzunu "Tek Noktada Tam Hizmet", en kısası
   "Montaj") ve kart genişliği 3 kırılımda değişiyor (mobil 1 / tablet 2 /
   masaüstü: Neden Biz 3, Hizmetler 4 sütun). Mutlak metin, dar bir kartta
   kutudan taşıp KIRPILIRDI. Blok akışında ise `aspect-ratio` bir TERCİH
   yüksekliğidir: içerik sığmazsa kart büyür, hiçbir şey kesilmez. Grid
   satırındaki kartlar `align-items: stretch` ile yine eşit yükseklikte kalır.

   Sadece `.lp-media-card` değiştiricisine yazılır — taban `.lp-why-card` /
   `.lp-service-card` kuralları (kenarlık + --shadow-card-soft + hover'da
   kalkma + :active + prefers-reduced-motion guard'ı satır ~3019) OLDUĞU GİBİ
   duruyor ve buraya da uygulanıyor. Kartın "kart olduğu belli olsun" kararı
   (Faz 2) bu yüzden tam kaplayan görselle birlikte de geçerli.

   ORAN 3/2: mobilde (≈358px) 239px, masaüstü Neden Biz (≈374px) 249px,
   Hizmetler (≈284px) 189px yüksekliğe denk gelir. Metin blokları ölçüldü:
   en uzun Neden Biz metni kartın ~%51'ini, en uzun Hizmetler metni ~%50'sini
   kaplıyor — kontrast ölçümleri (aşağıda) tam bu bantlar üzerinden yapıldı. */
.lp-media-card {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding: 0;
	aspect-ratio: 3 / 2;
	/* Görsel yüklenene kadar koyu zemin — ilk boyamada da beyaz metin okunur
	   (banner'daki #0E1A24 ile aynı gerekçe). */
	background: #0E1A24;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.lp-media-card-media {
	position: absolute;
	inset: 0;
	margin: 0;
	line-height: 0;
	z-index: 0;
}
/* Global `img { height: auto }` kuralını ezmek için sınıf+eleman özgüllüğü şart
   (banner'daki `.lp-promo-banner-media img` ile aynı sebep).

   DİKEY ODAK KART BAZINDA: 7 görselin hepsi KARE; 3/2 kutuda `cover` yalnızca
   yüksekliğin %66.7'sini gösterir, yani hangi %66.7 olduğu her fotoğrafta ayrı
   bir karardır. Değer front-page.php'deki kart dizisinden `--lp-card-focus-y`
   olarak inline gelir. Ölçülmüş değerler ve gerekçeleri (yüksek % = konu kartta
   YUKARI kayar, çünkü kırpma penceresi aşağıdan alınır):
     • 70% "2012'den Beri"  — saat kadranı karenin ortasında; 50%'te metin
       bandına giriyordu, 70% kadranı kartın üst yarısına taşıyor.
     • 30% "Yetkili Bayilik" — kalkan logosu üstte (%5-30), lastik altta
       (%45-100); düşük değer logoyu korur, lastik zaten scrim altında kalır.
     • 35% "Tek Noktada"    — atölye sahnesi %5-70'te, altındaki parlak zemin
       ilgi çekmiyor; 35% sahneyi üstte tutar.
     • 55% "Montaj"         — jant/eller %20-65; hafif yukarı kaydırma.
     • 50% "Balans"/"Lastik Oteli" — konu zaten dikey ortada.
     • 45% "Sensör"         — telefon ekranı + sensör %25-55. */
.lp-media-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% var(--lp-card-focus-y, 50%);
	display: block;
}

/* SCRIM — KARTA DEĞİL, METİN BLOĞUNA SABİTLİ (2026-08-05, kullanıcı geri
   bildirimi: "görseller çok karanlık, ne olduğu belli değil").

   ÖNCEKİ HÂLİ VE NEDEN BIRAKILDI: banner'daki gibi kartın TAMAMINI kaplayan
   ayrı bir `.lp-media-card-scrim` katmanı vardı ve alfa KART yüksekliğinin
   yüzdesine bağlıydı — kartın tam ortasında bile ~.70 karartma kalıyordu,
   yani fotoğrafın büyük kısmı görünmez oluyordu. Banner'da bu sorun yok:
   orada kutu çok daha yüksek ve metin dar bir banda sıkışmış durumda. Kart
   ölçeğinde aynı eğri fotoğrafı yutuyor.

   YENİ MANTIK: karartma `.lp-media-card-content`in KENDİ zemininde ve onun
   hemen üstündeki kısa geçişte (`::before`). Metin bloğu ne kadar yüksekse
   karartma da o kadar; ÜSTÜNDE KALAN HER ŞEY TAMAMEN AÇIK. Metin 1 satır da
   olsa 4 satır da olsa koruma kendiliğinden metne oturur — kart yüksekliğine
   göre elle ayarlanan bir yüzde YOK. (`.lp-media-card-scrim` elemanı bu
   yüzden markup'tan da kaldırıldı, bkz. template-parts/media-card.php.)

   ALFA DEĞERLERİ ÖLÇÜMLE SEÇİLDİ — 7 görselin gerçek pikselleri üzerinden,
   metin bandındaki EN PARLAK piksel için gereken minimum DÜZ alfa:
     AA 4.5 için    → 6 kartta .56-.57, Lastik Oteli'nde .35
     rahat 6.0 için → 6 kartta .64-.65, Lastik Oteli'nde .47
   Metnin ÜST kenarındaki alfa bu yüzden .72 (.65'in üstünde), alta doğru
   .86'ya çıkıyor. */
.lp-media-card-content {
	position: relative;
	z-index: 2;
	padding: 16px;
	background: linear-gradient(
		to top,
		rgba(8, 18, 28, .86) 0%,
		rgba(8, 18, 28, .72) 100%
	);
}
/* Metnin ÜSTÜNDEKİ kısa geçiş — sert bir "altyazı çubuğu" kenarı oluşmasın
   diye. 44px ≈ üst padding + bir satır; daha uzunu yine fotoğrafı yemeye
   başlıyor. `bottom: 100%` metin bloğunun tam üstüne oturtur, yüksekliği
   kart oranından BAĞIMSIZDIR. */
.lp-media-card-content::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	height: 44px;
	pointer-events: none;
	background: linear-gradient(
		to top,
		rgba(8, 18, 28, .72) 0%,
		rgba(8, 18, 28, 0) 100%
	);
}
/* HAFİF varyant — yalnız "Lastik Oteli". O fotoğraf zaten koyu bir depo
   sahnesi (ölçüm: AA için .35, rahat için .47 yetiyor), varsayılan bandla
   gereksiz yere kapkara oluyordu. `front-page.php` kart dizisinde
   `'scrim' => 'soft'` ile açılır. YENİ bir görsel eklerken bu sınıfı ATAMADAN
   önce yukarıdaki ölçümü tekrarlayın — 7 görselden yalnız biri bu kadar
   koyuydu. */
.lp-media-card--scrim-soft .lp-media-card-content {
	background: linear-gradient(
		to top,
		rgba(8, 18, 28, .74) 0%,
		rgba(8, 18, 28, .56) 100%
	);
}
.lp-media-card--scrim-soft .lp-media-card-content::before {
	background: linear-gradient(
		to top,
		rgba(8, 18, 28, .56) 0%,
		rgba(8, 18, 28, 0) 100%
	);
}
/* Metin GÖRSELE GÖMÜLÜ DEĞİL, gerçek HTML — SEO/erişilebilirlik ve çeviri
   tek kaynakta kalsın diye (alt metinler de korundu). text-shadow banner'daki
   ile birebir aynı değerler. */
.lp-media-card h3 {
	color: #fff;
	font-size: 17px;
	line-height: 1.25;
	text-shadow: 0 2px 10px rgba(0, 0, 0, .45);
}
.lp-media-card p {
	color: rgba(255, 255, 255, .94);
	line-height: 1.4;
	text-wrap: pretty;
	text-shadow: 0 1px 8px rgba(0, 0, 0, .45);
}

/* Markalar: mobil 2 / tablet 3 / masaüstü 4 sütun logo grid (aşağıdaki 768/1025
   media query'lerinde tamamlanır). .lp-brand-chip sınıfı (base stil: zemin/
   kenarlık/pill radius) KORUNUR ve KALIR — bu, aynı sınıf adının hero filtre
   panelindeki 36 marka butonuyla (satır ~1342) paylaşıldığı anlamına gelir, o
   yüzden bu satırlar DEĞİŞTİRİLMEDİ. Anasayfaya özel TÜM yeni davranış aşağıdaki
   izole `.lp-brands-row .lp-brand-logo-cell` bağlamlı seçicisinden gelir — panel
   butonlarını hiç etkilemez (o seçici panelin markup'ında hiç eşleşmez). */
.lp-brands-row {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
}
/* ===================== 9.1 Markalar logo grid hücresi (Faz 2, yer tutucu) =====================
   Sabit boy hücre: mobil 72px / masaüstü 88px, ortalanmış marka adı metni.

   9.1.1 Mini-kart/pill görünümü (kullanıcı geri bildirimi — isimler "havada
   uçuşuyor, zayıf duruyor"): hücreye çok hafif buz-beyazı zemin (#F8F9FA,
   --bg-card #F1F1F1 token'ından KASITLI olarak ayrı — token global, burada
   sadece bu bileşene özel daha açık bir ton isteniyor) + mevcut
   var(--radius-btn) köşe yuvarlaması ile "kart" hissi verilir, metin
   var(--muted) yerine var(--ink) (tok antrasit) olur. Hover'da kurumsal mavi
   var(--brand-green) (#0066E4 — hero filtresi/arama butonuyla AYNI token,
   tutarlılık için seçildi; header'ın #0A5CC4/#04408F'i sadece header'a özel
   sabit bir gradient, genel "marka mavisi" değil) zemine dönüşür, yazı beyaz
   olur, kart hafif yükselir (translateY(-3px) — kartlardaki -5px'ten daha
   küçük, çünkü bu hücreler daha ufak/yoğun bir grid'de). Hover SADECE gerçek
   fare donanımında (aşağıdaki hover:hover media) — dokunmatikte :active ile
   hafif "bas" geri bildirimi yeterli, mavi renk touch'ta "yapışık" kalmaz.

   9.1.2 Logo geldiğinde: kart yapısı (zemin/radius/hover-mavi) DEĞİŞMEZ;
   <img> eklendiğinde kart onu güzelce çerçeveler (object-fit:contain, kendi
   padding'i içinde ortalı).

   🔴 LOGOLAR HER YERDE TAM RENKLİ (2026-08-05, kullanıcı kararı). Önceden
   varsayılan `grayscale(100%) + opacity .7` idi ve renk yalnız masaüstü
   hover'ında açılıyordu; dokunmatikte hover diye bir şey olmadığı için orada
   zaten tam renkliydi. Kullanıcı "masaüstü de mobildeki gibi olsun" dedi →
   gri tonlama TAMAMEN kaldırıldı, davranış iki kırılımda da aynı. Bu yüzden
   `img` üzerinde artık ne filter/opacity ne de bunları geri alan
   hover/focus/`(hover:none)` kuralları var. Hücrenin kendi hover'ı
   (beyaza açılma + mavi kenarlık + yükselme) DURUYOR — "etkin" hissi
   oradan geliyor, logonun renginden değil. */
.lp-brands-row .lp-brand-logo-cell {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 72px;
	padding: 16px;
	background: #F8F9FA;
	border-radius: var(--radius-btn);
	text-align: center;
	color: var(--ink);
	font-weight: 700;
	font-size: 13px;
	transition: background-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
/* Dokunmatikte hafif "bas" geri bildirimi (aynı desen: §9 .lp-why-card:active). */
.lp-brands-row .lp-brand-logo-cell:active { transform: scale(.97); }
.lp-brands-row .lp-brand-logo-cell:focus-visible {
	background: var(--brand-green);
	color: #fff;
	box-shadow: var(--shadow-card-hover);
}
/* Sadece gerçek hover donanımı olan cihazlarda (fare) — dokunmatikte mavi zemin
   "yapışık" görünmesin (aynı desen: §9 .lp-why-card, satır ~1756). */
@media (hover: hover) and (pointer: fine) {
	.lp-brands-row .lp-brand-logo-cell:hover {
		background: var(--brand-green);
		color: #fff;
		transform: translateY(-3px);
		box-shadow: var(--shadow-card-hover);
	}
}
.lp-brands-row .lp-brand-logo-cell img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

/* 9.1.3 GERÇEK LOGOLAR GELDİ (2026-08-05) — `.has-logo` sınıfı.
   Hücrede gerçek bir <img> varsa PHP `.has-logo` sınıfını basar (front-page.php);
   logosu olmayan marka eskisi gibi düz METİN hücresi kalır ve yukarıdaki mavi
   dolgu hover'ı ONLARDA AYNEN GEÇERLİDİR (metin beyaza dönüyor, sorun yok).

   🔴 Logo hücresinde mavi dolgu KALDIRILDI — sebep ölçüldü, tahmin değil:
   markaların çoğunun logosu mavi/lacivert (Michelin, Toyo, Falken, BFGoodrich,
   Barum, Nexen, Laufenn, Kumho). var(--brand-green) #0066E4 zemininde bu logolar
   okunamaz hale geliyordu (deploy öncesi damalı/mavi kontrol sayfasında görüldü).
   Bunun yerine "etkin" hissi zemin rengiyle değil, beyaza açılma + 2px mavi iç
   kenarlık + yükselme ile veriliyor. Logonun kendisi hover'da DEĞİŞMEZ —
   zaten her durumda tam renkli (bkz. §9.1.2).

   `width:100%; height:<sabit>; object-fit:contain` bilinçli bir tercih:
   logoların en-boy oranı 3:1 ile 10:1 arasında değişiyor. Sadece `max-height`
   verilseydi Michelin gibi çok geniş wordmark'lar `max-width:100%`e çarpıp
   diğerlerinin üçte biri yükseklikte kalırdı. Sabit yükseklikli kutu + contain
   ile her logo aynı optik ağırlıkta durur. */
.lp-brands-row .lp-brand-logo-cell.has-logo { padding: 12px 14px; }
.lp-brands-row .lp-brand-logo-cell.has-logo img {
	width: 100%;
	height: 40px;
}
.lp-brands-row .lp-brand-logo-cell.has-logo:focus-visible {
	background: #FFFFFF;
	box-shadow: inset 0 0 0 2px var(--brand-green), var(--shadow-card-hover);
}
@media (hover: hover) and (pointer: fine) {
	.lp-brands-row .lp-brand-logo-cell.has-logo:hover {
		background: #FFFFFF;
		box-shadow: inset 0 0 0 2px var(--brand-green), var(--shadow-card-hover);
	}
}
/* 9.1.4 (BOŞALDI — 2026-08-05) Burada "dokunmatikte logolar tam renkli"
   `(hover: none)` override'ı vardı. Gri tonlama artık HİÇ uygulanmadığı için
   (bkz. §9.1.2) geri alınacak bir şey kalmadı; kural silindi. Aynı sebeple
   /markalar/ tarafındaki eşi de kaldırıldı. */
@media (prefers-reduced-motion: reduce) {
	.lp-brands-row .lp-brand-logo-cell { transition: none !important; }
}

@media (min-width: 768px) {
	.lp-why-grid { grid-template-columns: repeat(2, 1fr); }
	.lp-services-grid { grid-template-columns: repeat(2, 1fr); }
	.lp-brands-row { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1025px) {
	.lp-why-grid { grid-template-columns: repeat(3, 1fr); }
	.lp-services-grid { grid-template-columns: repeat(4, 1fr); }
	.lp-brands-row { grid-template-columns: repeat(4, 1fr); }
	.lp-brands-row .lp-brand-logo-cell { min-height: 88px; padding: 18px 20px; }
	.lp-brands-row .lp-brand-logo-cell.has-logo img { height: 48px; }
}

/* ===================== 10. Servis Bölgesi ===================== */
.lp-service-text { color: var(--muted); font-size: 14px; margin-bottom: 16px; max-width: 760px; }
.lp-district-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.lp-district-chip {
	padding: 8px 14px;
	min-height: 40px;
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--border-ink);
	border-radius: var(--radius-pill);
	font-size: 13px;
	font-weight: 600;
	/* Bu chip'in kendi zemini YOK (kasıtlı outline stil) — metin rengi de hiç
	   set edilmemişti, `.lp-header`'ın `color:#FFFFFF` mirasına (yapısal borç,
	   bkz. bölüm ~2575) kalıyordu. `.lp-header` zemini bugün `var(--bg-main)`'e
	   çekilince (aynı yapısal borç yüzünden `.lp-main` de bunu miras alıyor)
	   beyaz metin beyaz sayfa zemininde kayboluyordu — açıkça belirt.
	   `.lp-district-chip--main` KENDİ `color:#fff`'ini zaten set ediyor (aşağıda),
	   daha yüksek özgüllükle bunu ezer, ETKİLENMEDİ. */
	color: var(--ink);
}
.lp-district-chip--main { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ===================== 11. SSS (FAQ) ===================== */
.lp-faq-list { display: flex; flex-direction: column; gap: 10px; max-width: 760px; }
.lp-faq-item {
	border: 1px solid var(--border-ink);
	border-radius: var(--radius-btn);
	padding: 4px 16px;
	background: var(--bg-main);
}
.lp-faq-item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 0;
	font-weight: 700;
	font-size: 15px;
	cursor: pointer;
	list-style: none;
	/* `.lp-faq-item`'in KENDİ zemini her zaman `var(--bg-main)` (opak, satır
	   1617) — ama bu soru metninin kendi rengi hiç set edilmemişti, `.lp-header`
	   `color:#FFFFFF` mirasına (yapısal borç, bkz. bölüm ~2575) kalıyordu.
	   `.lp-main` zemini bugün beyaza çekilince aynı beyaz metin kendi kartının
	   beyaz zemininde de kayboluyordu — açıkça belirt. */
	color: var(--ink);
}
.lp-faq-item summary::-webkit-details-marker { display: none; }
.lp-faq-plus { font-size: 18px; color: var(--muted); transition: transform .2s ease; }
.lp-faq-item[open] .lp-faq-plus { transform: rotate(45deg); }
.lp-faq-answer { color: var(--muted); font-size: 14px; margin: 0 0 16px; }

/* ===================== 12. Coming soon / zero results ===================== */
.lp-coming-soon,
.lp-zero-results {
	text-align: center;
	max-width: 520px;
	margin: 0 auto;
	padding: 32px 16px;
}
.lp-coming-soon p,
.lp-zero-results p { color: var(--muted); }
.lp-zero-results h2 { font-size: 20px; }
.lp-zero-results-actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 16px;
}
@media (min-width: 768px) {
	.lp-zero-results-actions { flex-direction: row; justify-content: center; }
}

/* ===================== 13. Arama sonuç sayfası =====================
   Görev 3 (sadeleştirme turu) — eskiden burada `.lp-results-header .lp-container`
   (H1+sayı+"Aramayı Değiştir" flex satırı), `.lp-results-summary h1` ve
   `.lp-results-count` (H1'in altındaki sayı) stilleri vardı. Bu üç sınıf
   page-lastik-ara.php'de ARTIK basılmıyor (breadcrumb'a devredildi, bkz.
   "25. Breadcrumb" ve "24. Sonuç Başlığı + Sıralama Dropdown" bölümleri) -
   ölü CSS olarak burada BIRAKILMADI, kaldırıldı. `.lp-pagination` HÂLÂ
   kullanılıyor (dokunulmadı). */
.lp-pagination { display: flex; gap: 8px; justify-content: center; margin-top: 24px; }
.lp-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	min-height: 40px;
	border: 1px solid var(--border-ink);
	border-radius: var(--radius-btn);
	padding: 0 10px;
}
.lp-pagination .page-numbers.current { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ===================== 14. Footer ===================== */
.lp-footer {
	background: var(--footer-bg);
	color: var(--footer-text);
	padding: 40px 0 0;
	margin-top: 40px;
}
.lp-footer a { color: var(--footer-text); }
.lp-footer-muted { color: rgba(255,251,255,.62) !important; font-size: 13px !important; }
.lp-footer-address { line-height: 1.5; }
.lp-footer-hours { color: rgba(255,251,255,.82); }
.lp-footer-district-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.lp-footer-district-list { flex-direction: row; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: rgba(255,251,255,.72); }
.lp-footer-cta { margin-bottom: 10px; width: 100%; }
.lp-footer-bottom {
	border-top: 1px solid rgba(255,251,255,.15);
	padding: 16px 0;
	font-size: 13px;
	color: rgba(255,251,255,.6);
	text-align: center;
}

/* ===================== 14.1 Footer link satırı (5 sütun, referans düzen) =====================
   Kullanıcı referans görseli (lastikcim footer'ı) verdi: çok sütunlu, yoğun
   link listesi — Markalar / Öne Çıkan Ebatlar / Öne Çıkan Kategoriler /
   Kurumsal / Sözleşmeler. Bu blok o düzeni kurar.

   ⚠ ÖNCEKİ SÜRÜMÜN YERİNİ ALDI: burada eskiden "Footer SEO Satırı" vardı
   (2 sütun, pill/çip görünümlü Popüler Ebatlar + Markalar). Referans düzen
   çip değil DÜZ LİNK LİSTESİ istediği için çip stilleri kaldırıldı; içerik
   (ebatlar + markalar) yeni sütunların içine taşındı, kaybolmadı.

   SÜTUN ORANI: Markalar ve Ebatlar iki katı içerik taşır (20'şer öğe, kendi
   içlerinde `columns: 2` ile ikiye bölünür), diğer üçü tek kolon — bu yüzden
   ilk ikisi `1.6fr`, kalanlar `1fr`.

   MOBİL: 5 sütun tek sütuna iner; `columns: 2` ise KORUNUR (dar ekranda
   20 ebatı alt alta yazmak footer'ı gereksiz uzatır, iki kolon yarıya
   indirir — ilçe listesinde de aynı yaklaşım kullanılıyor). */
/* ⚠ PADDING KISA YAZIM TUZAĞI (2026-08-05'te canlıda bulundu): bu öğeler
   `.lp-container` sınıfını DA taşıyor (footer.php). Eskiden buradaki
   `padding: 36px 0 8px` kısa yazımı, aynı özgüllükteki `.lp-container`ın
   `padding: 0 16px`ini (satır ~116) dosyada SONRA geldiği için eziyordu →
   yatay padding 0 oluyor, mobilde içerik ekran kenarına yapışıyordu.
   Çözüm: yalnız dikey longhand yazılır, yatay 16px konteynerden gelir.
   (Masaüstü ≥1025px'te eski 0 değeri BİLEREK korunuyor — aşağıdaki
   min-width:1025px bloğuna bakın.) */
.lp-footer-links {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px 24px;
	padding-top: 36px;
	padding-bottom: 8px;
}

.lp-footer-linkcol h4 {
	color: var(--footer-text);
	font-size: 15px;
	font-weight: 700;
	margin-bottom: 12px;
}

.lp-footer-linklist {
	list-style: none;
	margin: 0;
	padding: 0;
}

.lp-footer-linklist li {
	/* `break-inside` şart: `columns: 2` bir satırı iki kolona bölebiliyor. */
	break-inside: avoid;
	margin-bottom: 2px;
}

.lp-footer-linklist a {
	display: block;
	padding: 6px 0;
	font-size: 13.5px;
	line-height: 1.35;
	color: rgba(255, 251, 255, .82);
	transition: color .18s ease;
}

.lp-footer-linklist a:hover,
.lp-footer-linklist a:focus-visible {
	color: var(--footer-text);
	text-decoration: underline;
}

.lp-footer-link-more {
	font-weight: 700;
}

.lp-footer-linklist--2col {
	columns: 2;
	column-gap: 20px;
}

/* ===== İletişim / NAP satırı — link satırının altında, ince ayraçla ===== */
.lp-footer-info {
	/* padding kısa yazım tuzağı — bkz. .lp-footer-links üstündeki not. */
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	padding-top: 28px;
	padding-bottom: 8px;
	margin-top: 20px;
	border-top: 1px solid rgba(255, 251, 255, .15);
}

.lp-footer-info-col h4 {
	color: var(--footer-text);
	font-size: 15px;
	font-weight: 700;
	margin-bottom: 10px;
}

/* ===== MOBİL FOOTER TASARIMI (≤767px, 2026-08-05 kullanıcı isteği) =====
   (1) 5 başlık sütunu mobilde de İKİŞERLİ yan yana (tek tek alt alta değil):
   1. satır Markalar+Ebatlar, 2. satır Kategoriler+Kurumsal, 3. satır
   Sözleşmeler. Tek kalan son sütun yarım genişlikte "asılı" durmasın diye
   tam satıra yayılır (:last-child:nth-child(odd) — sütun sayısı değişirse de
   doğru çalışır). Eski turdaki sütunlar-arası ayraç çizgileri KALDIRILDI:
   2'li dizilimde `+` komşu seçicisi 1. satırın sağ sütununa da çizgi basıp
   asimetri yaratıyordu; bölümleme artık grid boşluğu + başlık alt çizgisiyle.
   (2) columns:2 akan çoklu-sütun yerine gerçek grid (satırlar hizalı).
   (3) Başlıklara marka renginde kısa alt çizgi. (4) Link dolgusu 8px.
   Yarım-genişlik sütun içindeki 2 alt-sütunda uzun marka adları ("Bridgestone",
   "Continental") sığsın diye --2col linkleri 12.5px + dar column-gap (canlıda
   390px iframe'de scrollWidth ölçümüyle doğrulandı, taşma yok).
   Masaüstü/tablet (≥768px) bu bloktan ETKİLENMEZ. */
@media (max-width: 767px) {
	.lp-footer-links {
		grid-template-columns: repeat(2, 1fr);
		padding-top: 24px;
		gap: 26px 16px;
	}

	.lp-footer-linkcol:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}

	.lp-footer-linkcol h4 {
		font-size: 15px;
		padding-bottom: 8px;
		position: relative;
	}

	.lp-footer-linkcol h4::after {
		content: '';
		position: absolute;
		left: 0;
		bottom: 0;
		width: 28px;
		height: 2px;
		border-radius: 1px;
		background: var(--brand-green);
	}

	/* columns:2 yerine grid: satırlar iki sütun arasında düzgün hizalanır,
	   akan kolonun "yarıda kopan" düzensiz görünümü biter. display:grid
	   multicol'u zaten geçersiz kılar (grid konteyner blok konteyner değildir),
	   columns'ı ayrıca sıfırlamaya gerek yok. */
	.lp-footer-linklist--2col {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 10px;
	}

	.lp-footer-linklist a {
		padding: 8px 0;
		font-size: 14px;
	}

	/* Yarım genişlikte + iç 2 alt-sütun = alt-sütun ~78px; 14px'te
	   "Bridgestone" taşıyor. Yalnız --2col listelerinde küçült. */
	.lp-footer-linklist--2col a {
		font-size: 12.5px;
	}

	/* "Tüm Markalar" 80px'lik alt-sütunda ikiye bölünüyordu; kalın vurgu
	   linki olduğu için tek satırda dursun diye sütunun tamamına yayılır. */
	.lp-footer-linklist--2col li:has(.lp-footer-link-more) {
		grid-column: 1 / -1;
	}
}

@media (min-width: 768px) {
	.lp-footer-links { grid-template-columns: repeat(2, 1fr); }
	.lp-footer-info { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1025px) {
	/* Referans düzen: 5 sütun yan yana; ilk ikisi daha geniş (çift kolon). */
	.lp-footer-links {
		grid-template-columns: 1.6fr 1.6fr 1fr 1fr 1.15fr;
		gap: 32px;
	}

	/* Kısa-yazım düzeltmesi (yukarıdaki not) masaüstünde 16px'lik konteyner
	   padding'ini geri getirirdi → 5 sütunlu düzen 32px daralıp kayardı.
	   Kullanıcı kararı: masaüstü PİKSEL PİKSEL aynı kalacak, bu yüzden eski
	   fiili değer (0) burada açıkça korunuyor. (Evet, bu .lp-footer-bottom'ın
	   16px'iyle 16px'lik bilinen bir hizasızlık bırakır — mevcut durum buydu,
	   ayrı bir turda ele alınabilir.) */
	.lp-footer-links,
	.lp-footer-info {
		padding-left: 0;
		padding-right: 0;
	}
}

/* ===================== 15. (kaldırıldı — eski mobil sabit alt CTA çubuğu artık
   yok; yerini footer.php'deki tek yüzen WhatsApp butonu (.lp-wa-float, bkz.
   PL-MOBILE-PREMIUM) aldı.) ===================== */

/* ===================== 16. Teklif Al Modal ===================== */
.lp-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(24,24,24,.5);
	display: none;
	align-items: flex-end;
	justify-content: center;
	z-index: 1000;
}
.lp-modal-overlay.is-open { display: flex; }

.lp-modal-sheet {
	background: #fff;
	width: 100%;
	max-width: 480px;
	max-height: 90vh;
	overflow-y: auto;
	border-radius: 20px 20px 0 0;
	padding: 16px 20px 24px;
	animation: lp-modal-in .28s cubic-bezier(.32,.72,0,1);
}
@keyframes lp-modal-in {
	from { transform: translateY(100%); }
	to { transform: translateY(0); }
}
.lp-modal-handle {
	width: 36px;
	height: 4px;
	background: var(--border-ink);
	border-radius: 2px;
	margin: 0 auto 12px;
}
.lp-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}
.lp-modal-header h3 { margin: 0; font-size: 18px; }
.lp-modal-close {
	width: 48px;
	height: 48px;
	border: none;
	background: var(--bg-card);
	border-radius: 50%;
	font-size: 20px;
	cursor: pointer;
	line-height: 1;
}
.lp-modal-product-name {
	background: var(--bg-card);
	border-radius: var(--radius-btn);
	padding: 10px 12px;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 14px;
}
.lp-modal-form .lp-field { margin-bottom: 12px; }
.lp-modal-success {
	background: #ECFDF3;
	color: #04642F;
	border: 1px solid #A7E6C1;
	border-radius: var(--radius-btn);
	padding: 12px;
	font-size: 14px;
	font-weight: 600;
}
.lp-modal-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }

@media (min-width: 768px) {
	.lp-modal-overlay { align-items: center; }
	.lp-modal-sheet { border-radius: 20px; }
	.lp-modal-handle { display: none; }
}

/* ===================== 17. Erişilebilirlik: odak durumları ===================== */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 2px;
}

/* ===================== 18. "Araca Göre" kademeli zincir (oponeo mantığı) ===================== *
 * Marka → Model → Yıl → Motor → Ebat, üç satır: (Marka|Model) / (Yıl|Motor) / Ebat
 * (tam genişlik). İki alanlı satırlar HER genişlikte (mobil dahil) yan yana durur —
 * bu yüzden taban kural doğrudan 1fr 1fr (eskiden mobilde 1fr idi, min-width:768px'te
 * override ediliyordu; artık tek kural yeterli, override kaldırıldı).
 * Select'ler .lp-field select stilini miras alır (48px, dokunulabilir).
 */
.lp-vehicle-cascade {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.lp-vehicle-cascade .lp-vehicle-row2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

/* Grid çocuklarının varsayılan min-width:auto değeri, içerik (select'in yer tutucu
   metni) dar sütuna sığmadığında grid'i taşırıp yatay kaydırmaya/kart dışına taşmaya
   yol açar (390px'te sütun ≈158px). min-width:0 ile içerik sütun genişliğine göre
   kırpılır/küçülür, grid taşmaz. */
.lp-vehicle-cascade .lp-vehicle-row2 > .lp-field {
	min-width: 0;
}
.lp-vehicle-cascade .lp-vehicle-row2 select {
	width: 100%;
	max-width: 100%;
}

/* Pasif (henüz doldurulmamış) select'ler hafif soluk görünür. */
.lp-vehicle-cascade select:disabled {
	opacity: .6;
	background: var(--bg-card);
	cursor: not-allowed;
}

/* Submit linki: aktifken hero'daki .lp-search-submit (yeşil) görünümünü alır;
   zincir tamamlanana kadar soluk/pasif. */
#lpvSubmit {
	text-decoration: none;
}
#lpvSubmit.is-disabled,
#lpvSubmit[aria-disabled="true"] {
	opacity: .55;
	cursor: not-allowed;
}

.lp-vehicle-help {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--border);
}
.lp-vehicle-help-text {
	font-size: 13px;
	font-weight: 700;
	color: var(--ink);
}

/* Eski min-width:768px override (grid-template-columns: 1fr 1fr) kaldırıldı —
   taban kural artık zaten 1fr 1fr, tekrara gerek yok. */

@media (max-width: 768px) {
	.lp-vehicle-cascade select { min-height: 48px; }
	.lp-vehicle-help { justify-content: center; }
}

/* Dar telefon genişliklerinde (≤480px, kart iç genişliği ~326px) iki sütunlu
   satırda her kutu ~158px'e düşer. Yer tutucu metinler ("Marka seçin",
   "Önce marka/model/yıl/motor") 16px'te + native dropdown okuyla taşabiliyordu.
   Önce padding/font-size küçültülüyor (kırpma SON çare) — dokunma hedefi
   min-height:48px korunuyor, sadece yatay boşluk daralıyor. */
@media (max-width: 480px) {
	.lp-vehicle-cascade .lp-vehicle-row2 select {
		padding: 10px 8px;
		font-size: 13px;
	}
}

/* =====================================================================
   19. PL-MOBILE-PREMIUM
   Premium mobil header + arama + drawer menü + yüzen WhatsApp butonu.
   SADECE ≤1024px. Masaüstü (≥1025px) bu bloktan hiçbir şekilde etkilenmez;
   mevcut masaüstü görünümü (header.php'nin iki satırlı üst satırı, alt
   kategori navigasyonu, telefon/WhatsApp ikonu) aynen korunur.
   Kaynak HTML/JS zaten hazır (header.php, footer.php, parklastik.js) -
   bu blok sadece eksik olan görsel katmandır.
   ===================================================================== */
@media (max-width: 1024px) {

	/* ---- 19.1 Header satırı (WebstaurantStore tarzı): SOL ☰ Menü · ORTA marka · SAĞ çalan telefon; arama alt satırda ----
	   Flex+wrap yerine CSS GRID: 3 sütun (hamburger / esnek orta / call-mobile), 2 satır.
	   Üst satır (hamburger-logo-telefon) ve arama satırı AYNI sütun genişliklerini paylaşır
	   — böylece arama kutusunun sol/sağ kenarları piksel TAHMİNİYLE değil, yapısal olarak
	   hamburger'in sağ kenarı ve call-mobile'ın sol kenarıyla hizalanır (orta sütun = 1fr,
	   ikisi arasında paylaşılan tek alan; bkz. 19.2'deki .lp-header-search). */
	.lp-header-top-inner {
		display: grid !important;
		grid-template-columns: auto 1fr auto !important;
		grid-template-rows: auto auto !important;
		align-items: center !important;
		column-gap: 8px !important;
		row-gap: 4px !important;
		min-height: 0 !important;
		/* Alt padding artırıldı (8px → 14px): arama kutusunun ALTINDA lacivert
		   (#0B1F3A, Faz 2) zemin belirgin kalsın, header ayrı bir blok gibi
		   okunsun, hero'ya yapışmasın. */
		padding: 10px 14px 14px !important;
	}
	.lp-hamburger { grid-column: 1 !important; grid-row: 1 !important; display: flex !important; color: #fff; }
	.lp-logo { grid-column: 2 !important; grid-row: 1 !important; display: flex !important; justify-content: center !important; min-width: 0; }
	.lp-call-mobile { grid-column: 3 !important; grid-row: 1 !important; }
	/* Arama: orta sütunun 2. satırı — sol/sağ kenar hizası grid sütun sınırından gelir. */
	.lp-header-search { grid-column: 2 !important; grid-row: 2 !important; }

	/* Görünen mavi üst satırın KENDİSİ yapışsın (satır ~326'daki yapısal borç notu:
	   `.lp-header`'daki sticky, `</header>` `<main>`'den önce kapanmadığı için pratikte
	   ETKİSİZ — çözüm: görsel satırı doğrudan sticky yapmak). Drawer/backdrop (z-index
	   900/950) ve yüzen WhatsApp'ın (700) ALTINDA, sayfa içeriğinin ÜSTÜNDE kalır. Kampanya
	   şeridi (.lp-campaign-strip, header'dan önce) `top:0` sayesinde scroll'da yukarı kayar,
	   header ona takılı kalmaz. */
	.lp-header-top {
		position: sticky !important;
		top: 0 !important;
		z-index: 480 !important;
		box-shadow: 0 2px 10px rgba(0, 0, 0, .12) !important;
	}

	/* Masaüstü aksiyon kümesi (telefon numarası) mobilde gizli. */
	.lp-header-actions,
	.lp-header-phone { display: none !important; }

	/* SAĞ: modern kutu içinde ÇALAN telefon butonu (hemen arayın). */
	.lp-call-mobile {
		display: flex !important;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		border-radius: 11px;
		background: rgba(255, 255, 255, .16);
		border: 1px solid rgba(255, 255, 255, .30);
		color: #FFFFFF;
		box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
	}
	.lp-call-ring { animation: lp-phone-ring 1.8s ease-in-out infinite; }
	.lp-call-mobile:active { transform: scale(.94); }

	/* Masaüstündeki alt kategori satırı mobilde gizli - gezinme artık drawer'dan. */
	.lp-header-nav { display: none !important; }

	/* ---- 19.2 Arama: HER ZAMAN görünür, orta sütunda (hamburger↔call-mobile arası) tek temiz kutu ----
	   width/max-width/margin kaldırıldı: genişlik ve konum artık 19.1'deki grid'in orta
	   sütunu (1fr, grid-column:2) tarafından belirleniyor — tahmini piksel değeri yok. */
	.lp-header-search {
		display: flex !important;
		width: 100% !important;
		max-width: none !important;
		align-items: center !important;
		height: 40px !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 1px solid rgba(255, 255, 255, .45) !important;
		border-radius: 10px !important;
		background: #FFFFFF !important;
		box-shadow: 0 2px 8px rgba(0, 0, 0, .10) !important;
		overflow: hidden !important;
	}
	.lp-header-search-input {
		flex: 1 1 auto;
		height: 100%;
		min-height: 0;
		border: none !important;
		border-radius: 0 !important;
		/* 6px (14px'ten düşürüldü): placeholder "Marka veya ebat ara..." dar ekranda
		   (360px) sığması için input'a gerekli genişlik kazandırıldı - kullanıcı
		   raporu: "ebat" kelimesinin sonundaki "t" kırpılıyordu. Ölçüm: gerçek
		   iframe (360px) + canvas measureText ile input iç genişliği 133px,
		   14px dolgu ile kullanılabilir alan 105px'e düşüyordu (placeholder her
		   fontta taşıyordu); 6px dolgu + buton genişliği sabitlemesiyle (aşağı
		   bakın) kullanılabilir alan 121px'e çıktı. */
		padding: 0 6px !important;
		font-size: 15px;
		background: transparent !important;
		box-shadow: none !important;
		color: var(--ink);
	}
	/* 12px (14px'ten düşürüldü, CLAUDE.md kuralı: 12px ALTINA İNMEZ) - yukarıdaki
	   dolgu azaltmasıyla birlikte "Marka veya ebat ara..." (bkz. header.php)
	   360px'te 121px kullanılabilir alana 114px olarak sığıyor (~6.6px pay). */
	.lp-header-search-input::placeholder { color: #9A9A9A; font-size: 12px; }
	.lp-header-search-input:focus { outline: none; box-shadow: none !important; }
	.lp-header-search-btn {
		flex: 0 0 auto;
		/* !important ZORUNLU: Customizer Ek CSS'teki eski PL-HEADER-2ROW kalıntısı
		   (media sorgusuz, `.lp-header-search-btn { width:60px; background:#0066E4 }`)
		   `<style id="wp-custom-css">` olarak bu dosyadan SONRA <head>'e basılıyor -
		   eşit özgüllükte kaskad sırası kazanıyor ve tema kuralını (width 44px,
		   background var(--brand-green)) eziyordu. Renk aynı (#0066E4) olduğu için
		   fark görünmüyordu ama genişlik (60px vs 44px) input'un kullanılabilir
		   alanını çalıyordu - placeholder taşmasının bir parçası buydu. Ek CSS'e
		   dokunmadan (bu turun kapsamı dışında) kazanmak için !important eklendi. */
		width: 44px !important;
		height: 38px !important;
		min-height: 0 !important;
		max-height: 38px !important;
		align-self: center !important;
		border: none !important;
		border-radius: 0 !important;
		/* #04408F (navbar'ın koyu mavisi, bkz. .lp-header-nav satır ~345, Faz 3
		   Seçenek C) - kullanıcı kararı: arama butonu artık
		   --brand-green (#0066E4, filtre mavisi) değil, navbar'ın koyu mavisiyle
		   uyumlu olsun. !important ZORUNLU (yukarıdaki Ek CSS kalıntısı nedeniyle
		   - aynı sebep). */
		background: #04408F !important;
		color: #fff;
		display: grid !important;
		place-items: center !important;
		place-content: center !important;
		line-height: 0;
		padding: 0 !important;
		cursor: pointer;
	}
	.lp-header-search-btn svg { width: 18px; height: 18px; display: block; margin: auto; }
	.lp-header-search-btn:active { background: #050F1C !important; }

	/* ---- 19.3 Drawer menü: ferah, opak beyaz, premium ---- */
	.lp-mobile-backdrop {
		position: fixed;
		inset: 0;
		z-index: 900;
		background: rgba(24, 24, 24, .4);
	}
	.lp-mobile-backdrop[hidden] { display: none; }

	.lp-mobile-nav {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		z-index: 950;
		width: 84%;
		max-width: 340px;
		background: #FFFFFF !important;
		border-top: none;
		box-shadow: 4px 0 28px rgba(24, 24, 24, .10);
		transform: translateX(-100%);
		transition: transform .24s cubic-bezier(.4, 0, .2, 1);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
	.lp-mobile-nav.is-open { transform: translateX(0); }

	.lp-mobile-nav-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 16px 18px;
		padding-top: max(16px, env(safe-area-inset-top));
		/* Faz 3: uç renk artık --brand-green (#0066E4) ailesinden değil, header'ın
		   kurumsal mavi ailesinden (Seçenek C, #0A5CC4 → #04408F) — filtre
		   mavisiyle header rengi birbirine karışmasın diye kasıtlı ayrıştırma.
		   Koyu uca belirgin geçiş (2 duraklı, lift yok) kullanıcı onaylı referans
		   ekran görüntüsüyle birebir. */
		background: linear-gradient(90deg, #0A5CC4 0%, #04408F 100%);
	}
	.lp-mobile-nav-head .lp-logo-word-a { color: #FFFFFF; font-size: 20px; }
	.lp-mobile-nav-head .lp-logo-word-b { color: #FFFFFF; font-size: 20px; }
	.lp-mobile-nav-close {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		border: none;
		border-radius: 50%;
		background: rgba(255, 255, 255, .12);
		color: #FFFFFF;
		font-size: 24px;
		line-height: 1;
		cursor: pointer;
	}
	.lp-mobile-nav-close:hover,
	.lp-mobile-nav-close:active { background: rgba(255, 255, 255, .24); }

	.lp-mobile-nav-list {
		list-style: none;
		margin: 0;
		padding: 8px 0 24px;
	}
	.lp-mobile-nav-list li { border-bottom: 1px solid #ECECEC; }
	.lp-mobile-nav-list li:last-child { border-bottom: none; }
	.lp-mobile-nav-list a {
		display: flex;
		align-items: center;
		gap: 12px;
		height: 58px;
		min-height: 58px;
		padding: 0 18px;
		font-size: 16px;
		font-weight: 600;
		color: #222222;
		transition: background-color .15s ease;
	}
	.lp-mnav-label { flex: 1 1 auto; }
	.lp-mnav-icon {
		flex: 0 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 34px;
		height: 34px;
		border-radius: 9px;
		background: #EAF2FF;
		color: #004395;
	}
	.lp-mnav-icon svg { width: 20px; height: 20px; }
	.lp-mnav-icon--sun  { background: #FFF6E6; color: #F5A524; }
	.lp-mnav-icon--snow { background: #EAF6FE; color: #38BDF8; }
	.lp-mnav-icon--allseason { background: #EAF2FF; color: var(--brand-green); }
	.lp-mobile-nav-list a:hover,
	.lp-mobile-nav-list a:active,
	.lp-mobile-nav-list a:focus-visible { background: #EAF2FF; }

	/* ---- 19.4 Yüzen tek WhatsApp butonu ---- */
	.lp-wa-float {
		position: fixed;
		right: 16px;
		bottom: calc(16px + env(safe-area-inset-bottom));
		z-index: 700;
		width: 56px;
		height: 56px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: var(--wa);
		border-radius: 50%;
		box-shadow: 0 6px 18px rgba(0, 171, 4, .35);
		transition: background-color .2s ease, transform .15s ease;
	}
	.lp-wa-float:hover,
	.lp-wa-float:active {
		background: var(--wa-hover);
		transform: translateY(-1px);
	}

	/* ---- 19.5 Hero H1: tek satır + yukarı çek; filtre kartı hafif aşağı (arka tekeri göster) ----
	   F7 düzeltmesi: text-align ve font-size buradan çıkarıldı, SADECE ≤767px'te
	   geçerli olacak şekilde ayrı bir @media (max-width:767px) bloğuna taşındı
	   (bkz. dosyanın altı) - aksi halde bu blok (≤1024px) 768-1024 tablet aralığında
	   ≥768px kuralını (sola hizalı, büyük font) eziyordu. Kalan bildirimler
	   (white-space, font-weight, line-height, letter-spacing, text-shadow, color)
	   tablette de isteniyor, burada kalıyor. */
	.lp-hero-intro { margin-bottom: 12px; }
	.lp-hero-intro h1 {
		white-space: normal;
		font-weight: 800;
		line-height: 1.2;
		letter-spacing: -.2px;
		text-shadow: 0 1px 2px rgba(255, 255, 255, .6);
		color: var(--ink);
	}
	.lp-accent-word { color: var(--ink); }

	.lp-hero { padding: 14px 0 26px; }
	.lp-hero-media img { object-position: center 38%; }
	.lp-search-box { margin-top: clamp(84px, 22vw, 148px); }

	/* ---- 19.6 Filtre kutuları: mobilde aralıkları daralt, daha derli toplu ----
	   Yatay/üst negatif margin kutu padding'i (16px) ile BİREBİR olmalı; -14px
	   olduğu için sekme şeridi 2px içeride kalıyor ve üst köşeler "içe göçmüş"
	   görünüyordu. Alt boşluk (12px) mobil sıkılığı korumak için aynı kaldı. */
	.lp-search-tabs { margin: -16px -16px 12px; }
	/* Araç tipi butonları mobilde de TEK SATIR (4 yan yana) — 2x2 grid kaldırıldı. */
	.lp-vehicle-tabs {
		grid-template-columns: repeat(4, 1fr) !important;
		gap: 5px !important;
		margin-bottom: 10px;
	}
	.lp-vehicle-tab {
		min-height: 56px;
		font-size: 10px;
		padding: 6px 2px;
		gap: 3px;
	}
	.lp-vehicle-tab svg { width: 22px; height: auto; }
	.lp-vehicle-tab span { line-height: 1.1; text-align: center; }

	.lp-field label { margin-bottom: 4px; }
	/* Input/select kutuları: şekil tutarlılığı — .lp-filter-btn (satır ~971) ile
	   AYNI köşe yarıçapı (8px). Önceden 9999px (tam kapsül) idi; "Araca Göre"
	   sekmesindeki select'ler "Ebata Göre" sekmesindeki .lp-filter-btn'den farklı
	   görünüyordu (kullanıcı bildirdi). Tek referans: .lp-filter-btn — buradaki
	   değer o değişirse buna göre güncellenmeli. min-height 48px = dokunma hedefi
	   kuralı (CLAUDE.md §5.1, min 48×48px) ve .lp-filter-btn'in mobil değeriyle
	   (satır ~1345) eşleşir. */
	.lp-field select,
	.lp-field input {
		min-height: 48px;
		border: 2px solid #CFD6DD !important;
		border-radius: 8px !important;
	}
	.lp-season-toggle-group { gap: 6px; margin-top: 10px; }
	.lp-season-toggle-card { min-height: 52px; }
	.lp-search-submit { min-height: 50px; margin-top: 12px; }

	/* ---- 19.8 Ebat alanları: YAN YANA 3 sütun + 1·2·3 daire numara + kalın pill kenar (referans) ---- */
	.lp-search-grid-3 {
		display: grid !important;
		grid-template-columns: repeat(3, 1fr) !important;
		gap: 6px !important;
	}
	.lp-search-grid-3 .lp-field { position: relative; min-width: 0; }
	.lp-search-grid-3 .lp-field label {
		position: absolute !important;
		width: 1px !important;
		height: 1px !important;
		padding: 0 !important;
		margin: -1px !important;
		overflow: hidden !important;
		clip: rect(0, 0, 0, 0) !important;
		white-space: nowrap !important;
		border: 0 !important;
	}
	.lp-search-grid-3 select {
		min-height: 48px;
		padding: 10px 10px !important;
		border: 2px solid #CFD6DD !important;
		border-radius: 9999px !important;
		font-size: 15px;
		text-align: center;
		text-align-last: center;
		font-weight: 700 !important;
		color: var(--ink) !important;
	}
	.lp-search-grid-3 select:focus {
		border-color: var(--brand-green) !important;
		box-shadow: 0 0 0 3px rgba(0, 102, 228, .15) !important;
	}

	/* ---- 19.7 Premium dokunuş: basış geri bildirimi + hareket azaltma (iki mobil QA ajanı) ----
	   ÖNEMLİ (Android Chrome köşe sızıntısı, 2026-08): `.lp-search-tab` bu iki listeden
	   BİLEREK ÇIKARILDI. `transition: transform ...` bildirimi tek başına (transform hiç
	   tetiklenmese, hiç `:active` olmasa bile) Blink'te elemanı kompozit katman adayı
	   yapabiliyor; Android'de (yüksek DPR + dokunmatik giriş) bu terfi masaüstünden
	   daha kolay tetikleniyor ve terfi olduğunda `.lp-search-tabs`'ın border-radius
	   kırpması bazen dikdörtgene düşüp sekmenin kare köşesini kartın yuvarlak
	   köşesinden dışarı sızdırıyordu (kullanıcı raporu: sürekli, dokunmadan da
	   görünüyor — yani mesele `:active` anı değil, `transition: transform`
	   bildirimin KENDİSİ). `.lp-search-tabs`'a eklenen mask-image (bkz. section 5.05)
	   bu belirti içindir; ama asıl kalıcı düzeltme burada tetikleyiciyi kaldırmak.
	   Basış animasyonu kaybı kabul edilebilir — köşe sızıntısı gerçek kusurdu.
	   Diğer elemanlar (`.lp-vehicle-tab`, `.lp-season-toggle-card`, `.lp-btn` vb.)
	   yuvarlak-kırpan bir atanın kenarına oturmadığı için listede KALDI; buraya
	   `.lp-search-tab`'ı GERİ EKLEMEYİN. */
	.lp-vehicle-tab,
	.lp-season-toggle-card,
	.lp-search-submit,
	.lp-btn,
	.lp-header-search-btn,
	.lp-mobile-nav-list a,
	.lp-wa-float {
		-webkit-tap-highlight-color: transparent;
		transition: transform .12s ease, background-color .18s ease, box-shadow .18s ease, border-color .18s ease;
	}
	.lp-search-tab { -webkit-tap-highlight-color: transparent; }
	.lp-vehicle-tab:active,
	.lp-season-toggle-card:active,
	.lp-search-submit:active,
	.lp-btn:active,
	.lp-header-search-btn:active,
	.lp-mobile-nav-list a:active { transform: scale(.97); }
	.lp-wa-float:active { transform: scale(.92); }

	/* Marka odaklı görünür odak halkası (klavye/switch erişimi) */
	.lp-vehicle-tab:focus-visible,
	.lp-season-toggle-card:focus-visible,
	.lp-search-submit:focus-visible,
	.lp-field select:focus-visible,
	.lp-mobile-nav-list a:focus-visible {
		outline: 3px solid #0066E4;
		outline-offset: 2px;
	}
	.lp-header-search-input:focus-visible { outline: none; }
}

/* =====================================================================
   20. F7 — Hero H1 hizalama/boyut: SADECE ≤767px (telefon)
   Section 19 (@media max-width:1024px) dosyada section 5'ten SONRA geldiği
   için, eşit özgüllükte aynı seçiciler için 768-1024px (tablet) aralığında
   da kazanıyordu - başlık ortalanıyor ama .lp-hero-content (bkz. section 5,
   @media min-width:768px) hâlâ iki-kolonlu masaüstü genişliğindeydi, bu da
   asimetriye yol açıyordu (dar kolonun ortasında duran başlık + solda düz
   başlayan arama kutusu). Bu blok section 19'dan SONRA gelir ve max-width
   767px ile SADECE telefon genişliğinde geçerlidir; 768px ve üzeri artık
   hiçbir yerde ezilmeden section 5'teki sola-hizalı/büyük-font kuralına
   düşer (bkz. "@media (min-width: 768px)" - .lp-hero-intro + h1).

   4. TUR — KARAR TERSİNE ÇEVRİLDİ: başlık artık ≤767px'te de TEK SATIR
   (nowrap). Font, izole test harness'inde (yerel HTTP sunucu + gerçek
   sabit-piksel iframe, 320/360/390/414px) `getClientRects()`/
   `getBoundingClientRect()` ile ÖLÇÜLEREK belirlendi: h1 (band dolgusu
   dahil, box-sizing:border-box) `nowrap` genişliği saf olarak fonttan
   bağımsız viewport'tur - `.lp-hero-intro` ortalı olduğundan viewport
   kenarına boşluk = (viewport - h1genişliği)/2. clamp(13px,4vw,21px) ile
   320px'te font tabana (13px) oturur → h1 genişliği ≈292.6px → kenar payı
   ≈13.7px/taraf (≥8px şartını rahatça karşılar); 360/390/414'te vw terimi
   13px'i geçtiği için font kademeli büyür, pay hep ≥15px kalır (ölçüm
   tablosu rapor mesajında). `!important` KORUNDU: bu blok section 19'dan
   SONRA gelip normal-önem çakışmasında zaten kazanır, ama font-size/
   white-space için tarayıcı motoru tutarsızlıklarına karşı savunma amaçlı
   zorlanmaya devam ediliyor (bkz. eski not - farklı render turlarında
   kaskad-teorisi ile gerçek ölçüm çelişebiliyordu). */
@media (max-width: 767px) {
	.lp-hero-intro { text-align: center; }
	.lp-hero-intro h1 {
		text-align: center;
		white-space: nowrap !important;
		font-size: clamp(13px, 4vw, 21px) !important;
		/* Yatay bant dolgusu (2×10px taban kuraldan miras) dar ekranda satır
		   genişliğine ekleniyordu; telefonda 6px'e düşürüldü (ölçüm: bu
		   padding zaten yukarıdaki nowrap genişlik ölçümüne dahil). */
		padding: 2px 6px !important;
		/* line-height artık section 19'daki 1.2 değerinden miras alınıyor -
		   1.45 override'ı 2 satırlı bant çakışmasını önlemek içindi (bkz. eski
		   rapor), tek satırda gereksiz/dikey dengeyi bozan bir değerdi,
		   kaldırıldı. overflow-wrap/word-break de nowrap ile artık işlevsiz
		   olduğu için kaldırıldı (kod temizliği). */
	}

	/* .lp-hero-content/.lp-hero-intro/.lp-search-box genişliği H1 ne yaparsa
	   yapsın viewport'u ASLA aşmasın diye 100%'e sabitleniyor (nowrap başlık
	   kendi içeriğine göre büyüse bile bu 3 konteyner shrink-to-fit/expand
	   OLMAZ - bkz. section 5 flex-shrink notu, aynı mekanizma burada da
	   önlemi gerektiriyor). */
	.lp-hero-content,
	.lp-hero-intro,
	.lp-search-box {
		max-width: 100% !important;
		width: 100% !important;
		min-width: 0 !important;
	}

	/* ---- 20.0.1 H1 filtre kartıyla BİRLİKTE aşağı iniyor (2026-08-05) ----
	   Section 19'da (≤1024px) aşağı itilen şey SADECE `.lp-search-box`'tı;
	   H1 hero'nun tepesinde kalıyor, arada arka plandaki teker görünüyordu.
	   Kullanıcı H1'in kartın HEMEN üstünde durmasını istedi, o yüzden aynı
	   boşluk `.lp-hero-intro`'ya taşındı: ikisi tek blok gibi birlikte iniyor,
	   aradaki mesafeyi section 19'daki `margin-bottom: 12px` veriyor.
	   Değer section 19'dakiyle BİREBİR aynı — hero'nun toplam yüksekliği ve
	   üstte kalan görsel payı değişmiyor, sadece H1 aşağı geliyor.
	   ⚠ Bu blok section 19'dan SONRA geldiği için eşit özgüllükte kazanır;
	   `!important` gerekmiyor. Tablet (768-1024px) KASITLI olarak eski
	   davranışta kalıyor — istek yalnız telefon içindi. */
	.lp-hero-intro { margin-top: clamp(84px, 22vw, 148px); }
	.lp-search-box { margin-top: 0; }

	/* ---- 20.1 Filtre kartı gölgesi — mobilde sıkılaştırıldı (3. şikayet) ----
	   KÖK SEBEP (izole harness'te doğrulandı): `.lp-hero` `overflow: hidden`
	   taşıyor ve mobilde YATAY PADDING'İ YOK (sınırları = viewport kenarları
	   birebir). `.lp-search-box`'ın (bkz. section 5) taban box-shadow'u 3
	   katmanlı, en dıştaki katman 32px blur - box-shadow bir elemanın KENDİ
	   overflow:hidden'ından etkilenmez (sadece iç içerik kırpılır), o yüzden
	   bu gölge kutudan taşıp `.lp-hero`'nun sınırına kadar serbestçe yayılır.
	   Kutunun sağ/sol kenarı ile `.lp-hero`'nun (=viewport'un) kenarı arasında
	   sadece `.lp-container`'ın 16px padding'i kadar boşluk var - 32px'lik
	   bulanıklık bu 16px'e sığmadığı için `.lp-hero`'nun overflow:hidden'ı
	   gölgeyi YARIDA (hâlâ belirgin opaklıktayken) SERT biçimde kesiyor. Bu
	   sert kesim, kullanıcının bildirdiği "kutunun sağından taşan gri
	   gölge/iz" - yumuşak bir gölge değil, aniden kesilmiş bir gölge parçası.
	   Düzeltme: mobilde gölgeyi 16px'lik boşluğa TAM sığacak şekilde
	   sıkılaştır (en büyük blur 12px < 16px boşluk → tamamen söner, kesme
	   noktasına ulaşmaz). Border (1px, çok düşük opaklık) ayrı değerlendirildi
	   - düz/ince/tüm kenarda eşit olduğu için "gölge/iz" şikayetiyle
	   örtüşmüyor, dokunulmadı. Masaüstü (`.lp-search-box`'ın section 5'teki
	   taban tanımı) BİLEREK değiştirilmedi - bu kural SADECE ≤767px. */
	.lp-search-box {
		box-shadow:
			0 1px 2px rgba(16, 24, 40, .05),
			0 2px 6px rgba(16, 24, 40, .07),
			0 6px 12px rgba(16, 24, 40, .10);
	}
}

/* Hareket hassasiyeti: kayan şerit ve drawer/yüzen buton animasyonları kapanır. */
@media (prefers-reduced-motion: reduce) {
	/* Kampanya şeridi kullanıcı isteğiyle her koşulda akmaya devam eder (marquee hariç tutuldu). */
	.lp-call-ring { animation: none !important; }
	.lp-mobile-nav,
	.lp-mobile-backdrop,
	.lp-wa-float,
	.lp-header.search-open .lp-header-search { transition: none !important; animation: none !important; }
	/* Faz 2 premium kart hover (translateY + gölge geçişi) hareket hassasiyetinde kapanır. */
	.lp-service-card,
	.lp-why-card { transition: none !important; }
}

/* ===================== 20. Üretim Yılı Seçici (çoklu DOT — PDP + kart) =====================
   PDP'de VE kartlarda "aralık" fiyat (ör. "₺2.725 – ₺2.850") yerine tıklanabilir
   "Üretim Tarihi Seçiniz" pil grubu — AYNI .lp-year-pill bileşeni, kartta kompakt
   `--card` varyantı (bkz. görev tanımı Madde A). HTML kaynağı: class-lp-year-selector.php
   (render_pills_html() — PDP: render_selector(), kart: render_card_selector()). Mobil
   öncelik: PDP pilleri min 48×48px dokunma alanı (CLAUDE.md 5.1 kabul kriteri); kart
   pilleri 2 sütunlu ~164px kart genişliğinde 48px'e sığmadığı İÇİN min 40px'e düşer
   (bilinen/belgelenmiş sapma — bkz. görev raporu, madde "Mobil kısıt"). */

.lp-year-selector {
	margin: 14px 0 20px;
}

.lp-year-selector-label {
	font-size: 14px;
	font-weight: 700;
	color: var(--ink);
	margin: 0 0 10px;
}

.lp-year-pill-group {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.lp-year-pill {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	min-width: 48px;
	min-height: 48px;
	padding: 8px 18px;
	border: 2px solid var(--border-ink);
	border-radius: 12px;
	background: #fff;
	color: var(--ink);
	font-size: 14px;
	line-height: 1.2;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.lp-year-pill-year {
	font-size: 15px;
	font-weight: 800;
	line-height: 1.15;
}

.lp-year-pill-price {
	font-size: 12px;
	font-weight: 500;
	color: var(--muted);
	line-height: 1.15;
	white-space: nowrap;
}

/* Seçili durum BİLEREK --cta (turuncu) DEĞİL — turuncu sitede yalnız Teklif Al
   CTA'sına ait (kullanıcı kararı, bkz. CLAUDE.md §7.6 "PL-HERO-MAVİ"). Seçili
   pil kartta CTA grubuyla yan yana durduğundan aynı turuncuyu kullanmak ikisini
   görsel olarak birleştirip kullanıcının karıştırmasına yol açıyordu (canlı
   ölçüm: ikisi de rgb(254, 95, 16), birebir aynı). Bunun yerine sitenin genel
   "seçili/filtre" mavisi olan --brand-green (adı yanıltıcı, gerçek değeri
   #0066E4 — hero "Lastik Ara", filtre seçili durumları, ebat ①②③ rozetleriyle
   aynı token) kullanılıyor. Beyaz metin #0066E4 üzerinde ~5.6:1 kontrast — WCAG
   AA (4.5:1) geçer. */
.lp-year-pill.is-selected {
	border-color: var(--brand-green);
	background: var(--brand-green);
	color: var(--cta-text);
}

.lp-year-pill.is-selected .lp-year-pill-price {
	color: var(--cta-text);
}

.lp-year-pill:focus-visible {
	outline: 2px solid var(--brand-green);
	outline-offset: 2px;
}

/* Tek üretim yıllı ürün: pil AYNI mavi "seçili" görünümde ama TIKLANAMAZ —
   sunucu `<button>` yerine `<span class="lp-year-pill--static">` basar
   (class-lp-year-selector.php build_pill_button_html()). Seçilecek ikinci bir
   yıl yokken aktif buton görünümü kullanıcıya "seçim yapmalıyım" izlenimi
   veriyordu; `cursor` ve dokunma geri bildirimi bu yüzden nötrlenir.
   `initYearSelector()` de bu sınıfı görünce erken çıkar (tıklama fiyat
   alanını silmesin). */
.lp-year-pill--static {
	cursor: default;
}

/* Kartta çoklu pil `flex: 1 1 calc(50% - 3px)` ile 2 sütuna yayılır; TEK pil
   aynı kuralla kart genişliğini baştan sona kaplayıp "dev mavi buton" gibi
   görünüyordu (tıklanamaz olduğu hâlde). PDP'deki tek pil zaten içerik kadar
   dar duruyor — kart da aynı "bilgi çipi" görünümüne çekilir. */
.lp-year-pill--card.lp-year-pill--static {
	flex: 0 0 auto;
	padding-left: 12px;
	padding-right: 12px;
}

.lp-selected-price {
	display: inline-block;
}

/* Kart/arşiv fiyatı: JS pil tıklamasında bu span'in içeriği değiştirilir
   (id DEĞİL class — sayfada birden çok kart aynı anda var, bkz.
   class-lp-year-selector.php price_html_from_meta()). Görsel olarak fiyatın
   kendi .price kapsayıcısından (18px/800/var(--price)) miras alması yeterli,
   ek stil gerekmiyor — sadece JS hedefi. */
.lp-card-price-amount {
	display: inline-block;
}

/* ---- Kart kompakt varyantı (--card) — AYNI .lp-year-pill bileşeni, PDP'den
   DAHA SIKI ölçüler (mobilde 2 sütunlu kart ~164px, pil başına ~75px alan;
   ölçüm: görev raporundaki "Mobil ölçüm tablosu"). Piller .price'ın (yani
   ürün linkinin) DIŞINDA render edilir (render_card_selector()) — bu yüzden
   kartın kendi padding'i (14px) dışında ek bir margin gerekiyor. */
.lp-year-selector--card {
	margin: 6px 0 0;
}

.lp-year-selector--card .lp-year-selector-label {
	font-size: 10px;
	font-weight: 600;
	color: var(--muted);
	margin: 0 0 6px;
}

.lp-year-pill-group--card {
	gap: 6px;
	flex-wrap: wrap;
}

.lp-year-pill--card {
	flex: 1 1 calc(50% - 3px);
	min-width: 0;
	min-height: 40px;
	padding: 4px 6px;
	border-width: 1.5px;
	border-radius: 8px;
	gap: 1px;
}

.lp-year-pill--card .lp-year-pill-year {
	font-size: 12px;
	font-weight: 800;
	line-height: 1.1;
}

.lp-year-pill--card .lp-year-pill-price {
	font-size: 10px;
	font-weight: 600;
	line-height: 1.15;
	white-space: normal;
	text-align: center;
	word-break: break-word;
}

/* "Stok Sorunuz" rozeti (.lp-stock-badge) kendi 12px/4px-10px dolgusu VE
   kenarlığıyla ~50px'lik kart pil genişliğine SIĞMAZ (ölçüldü: dolgu/kenar
   korunduğunda pil 130px'e, sadece küçültülünce bile 62px'e şişiyordu — "Sorunuz"
   yine de mid-word kırılıyordu). Kompakt kart bağlamında rozet kendi çerçeveli
   "chip" görünümünü (arka plan/kenarlık/dolgu) TAMAMEN bırakır — zaten dıştaki
   `.lp-year-pill` kendi kenarlığını/dolgusunu taşıyor, iç içe iki çerçeve
   gereksiz yer kaplıyordu. Düz, ortalanmış küçük metin yeterli. */
.lp-year-pill--card .lp-year-pill-price .lp-stock-badge {
	display: inline;
	background: none;
	border: none;
	color: inherit;
	font-size: 9px;
	font-weight: 700;
	padding: 0;
	line-height: 1.2;
	white-space: normal;
}

@media (prefers-reduced-motion: reduce) {
	.lp-year-pill { transition: none !important; }
}

/* ===================== 21. Placeholder Görsel (marka görseli) =====================
   Görseli olmayan ürünlerde WooCommerce'in placeholder <img>'ı artık gri "no image"
   ikonu yerine marka görselini gösteriyor (bkz. lastik-park-core/includes/
   class-lp-placeholder-image.php — `option_woocommerce_placeholder_image` filtresi).
   O görsel GENİŞ/yatay (marka logoları şeridi); Blocksy'nin ürün kartlarında <img>
   öğesine bastığı satır içi `style="aspect-ratio: 3/4"` ile birlikte kalırsa görsel
   kırpılır/gerilir görünür.

   NEDEN !important ŞART: inline `style` özniteliği normal şartlarda HERHANGİ bir
   harici stilsayfa seçicisinden (§8'deki `ul.products li.product img` dahil) daha
   yüksek önceliklidir — `!important` olmayan bir kural onu asla ezemez. Aşağıdaki
   kural CSS kademesinde inline style'dan daha yüksek önceliğe çıkmak için bilerek
   `!important` kullanır.

   KAPSAM — SADECE placeholder, TÜM ürün görselleri DEĞİL: WooCommerce'in
   `wc_placeholder_img()` fonksiyonu görseli olmayan her yerde (shop/kategori/arama
   loop'u, ürün detay sayfası, ana sayfa öne çıkan ürünler, up-sell/cross-sell) <img>
   öğesine `woocommerce-placeholder` class'ı ekler — bu seçici SADECE o class'a bağlı.
   Feed'den gerçek görseli olan bir üründe WooCommerce bu class'ı hiç basmaz (kendi
   ürün görselini/galerisini render eder); dolayısıyla bu kural o ürünlere hiçbir
   zaman uygulanmaz ve mevcut 3:4 Blocksy davranışları (gerçek görseller için)
   değişmeden kalır. Genişletilmiş bir kural (tüm `ul.products li.product img`'a
   1:1+contain) BİLEREK yazılmadı — bu, kullanıcının onaylamadığı, feed görselleri
   için istenmeyen bir kapsam genişlemesi olurdu. */
/* İKİ SEÇİCİ, İKİ RENDER YOLU (canlıda ölçülerek düzeltildi):
   1) `img[src*="lastik-park-lastik-markalari"]` — ASIL yol. Option filtresi geçerli
      bir attachment döndürdüğü için WooCommerce görseli `wp_get_attachment_image()`
      ile basıyor; o fonksiyon `woocommerce-placeholder` sınıfını EKLEMEZ (canlı
      markup'ta sınıf `wp-post-image` çıkıyor, doğrulandı). Bu yüzden tek başına
      `.woocommerce-placeholder` seçicisi hiçbir zaman eşleşmiyordu.
   2) `.woocommerce-placeholder` — YEDEK yol. Attachment geçersizleşirse
      (bkz. LP_Placeholder_Image::is_brand_image_valid) `woocommerce_placeholder_img_src`
      filtresi devreye girer ve o render yolunda sınıf basılır.
   Kaynak görsel 1000x1000 (KARE, ölçüldü) — marka şeridi kendi beyaz boşluğuyla
   birlikte zaten kare dosyada, kırpma kaybı yok. Tek düzeltilmesi gereken,
   Blocksy'nin satır içi `aspect-ratio: 3/4` ile kareyi ezmesi. */
img[src*="lastik-park-lastik-markalari"],
.woocommerce-placeholder {
	aspect-ratio: 1 / 1 !important;
	object-fit: contain !important;
}

/* ===================== 22. Filtre Paneli (Faz 4, Adım 5 — masaüstü statik + form) =====================
   İki entry point AYNI markup/class'ları paylaşır: `/lastik-ara/`
   (page-lastik-ara.php `<aside class="lp-filter-sidebar">`'ı doğrudan render eder)
   ve kategori/marka arşivleri (functions.php `woocommerce_sidebar` hook'u — bkz.
   `parklastik_render_archive_filter_sidebar()` docblock'u: archive-product.php
   override EDİLMEDİ, bu hook canlıda ŞU AN boş/kullanılmayan resmi WooCommerce
   genişleme noktası, en düşük riskli bağlanma yeri).

   Grid `body.lp-has-filter-sidebar .lp-main`'e uygulanır (`parklastik_filter_sidebar_body_class()`
   bu class'ı sadece /lastik-ara/ VE kategori/marka arşivlerinde ekler — diğer TÜM
   sayfalar/şablonlar ETKİLENMEZ). `grid-template-areas` DOM sırasından bağımsız
   çalışır: hem archive (`.hero-section` + `.ct-container`) hem /lastik-ara/
   (`.lp-breadcrumb-section` + `.lp-results-list`) çift isimlendirmesi AYNI 3
   alana (hero/sidebar/content) eşlenir, tek CSS bloğu iki şablonu birden kapsar.

   Görev 3 (sadeleştirme turu) GÜNCELLEMESİ: `.lp-results-header` (eski büyük
   H1+sayı bloğu, /lastik-ara/) ARTIK BASILMIYOR - yerini `.lp-breadcrumb-section`
   aldı (bkz. `template-parts/breadcrumb.php`, İKİ entry point'te de - /lastik-ara/
   VE kategori/marka arşivleri - AYNI class ile render edilir). `.hero-section`
   (Blocksy'nin arşivlerdeki kendi başlık bloğu) DOM'da HÂLÂ VAR ama aşağıda
   `display:none` ile gizlendi (bkz. bu bölümün sonundaki kural) - `grid-area:
   hero` eşlemesi burada YİNE DE KORUNDU (zararsız - gizli bir grid öğesi hiç
   yer kaplamaz), Blocksy görünürlüğü ileride bir noktada değişirse grid
   sözleşmesi kırılmasın diye.

   Mobilde (Adım 6 — CANLI): `<aside class="lp-filter-sidebar">` JS varken
   (`html.lp-js`) tam ekran drawer'a dönüşür (bkz. "23. Mobil Filtre Drawer"),
   JS'siz eski davranışını sürdürür — burada tanımlı tek-sütun grid HER İKİ
   durumda da geçerli taban düzendir (JS'li mobilde `.lp-fbar` "sidebar" grid
   hücresini devralır, drawer `position:fixed` ile akıştan çıkar). Seçili durum
   rengi kullanıcı kararıyla MAVİ `--brand-green` (turuncu SADECE CTA/DOT yıl
   pilleri içindir). Mobil grid `gap` Adım 6'da 24px'ten 12px'e düşürüldü
   (İ2 — başlık/içerik boşluğu ölçülü azaltma); ≥1025px değeri (32px, aşağıda)
   DOKUNULMADI. */
body.lp-has-filter-sidebar .lp-main {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas: "hero" "sidebar" "content";
	gap: 12px;
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 16px 40px;
}
@media (min-width: 1025px) {
	body.lp-has-filter-sidebar .lp-main {
		grid-template-columns: 260px minmax(0, 1fr);
		grid-template-areas: "hero hero" "sidebar content";
		gap: 32px;
		align-items: start;
	}
}
body.lp-has-filter-sidebar .lp-main > .hero-section,
body.lp-has-filter-sidebar .lp-main > .lp-breadcrumb-section {
	grid-area: hero;
}
body.lp-has-filter-sidebar .lp-main > .lp-filter-sidebar {
	grid-area: sidebar;
	min-width: 0;
}
body.lp-has-filter-sidebar .lp-main > .ct-container,
body.lp-has-filter-sidebar .lp-main > .lp-results-list {
	grid-area: content;
	min-width: 0;
}

/* ⚠ YAPISAL BORÇ (bu turdan ÖNCE de vardı, header.php'ye AİT — bu CSS onu
   DÜZELTMEZ, sadece görsel SEMPTOMLARINI giderir): `header.php`'de `<header
   class="lp-header">` HİÇ `</header>` İLE KAPANMIYOR - `<main id="lp-main-content"
   class="lp-main">` (satır ~125) VE ondan sonraki `<footer>` yapısal olarak
   `<header>`'ın İÇİNDE kalıyor (git geçmişinde de doğrulandı, bu tur AÇILMADI).

   GÜNCELLEME (bu tur): `.lp-header`'ın kendi zemini artık GLOBAL olarak
   `var(--bg-main)`'e çekildi (bkz. bölüm "4. Header") — anasayfada da (hero
   dışındaki "Popüler Ebatlar"/"Öne Çıkan Ürünler" bölümleri) aynı sızıntı
   yaşandığı ortaya çıktı, önceki turdaki `body.lp-has-filter-sidebar .lp-header`
   scoped override'ı bu global düzeltme kapsadığı için KALDIRILDI (artık
   gereksiz — global kural zaten aynı token'ı her yerde uyguluyor).

   Geriye kalan risk METİN RENGİ mirası: `.lp-header`'ın `color:#FFFFFF` kuralı
   (bölüm 4, DEĞİŞMEDİ) hâlâ `.lp-main`'e miras kalıyor. Görev 3'ten ÖNCE fark
   edilmiyordu çünkü eski büyük başlık bloğu (`.lp-results-header` / Blocksy
   `.hero-section`) o alanı kendi opak zeminiyle dolduruyordu; Görev 3'te yerine
   gelen ince breadcrumb + `.lp-results-topbar` bunu ETMEDİĞİ için altındaki
   beyaz metin beyaz zeminde kayboluyordu ("520 lastik bulundu", breadcrumb).
   ÇÖZÜM (KALDI, hâlâ gerekli): `.lp-main`'e AÇIK `color` vermek (aşağıda) —
   `background` satırı da aynı kuralda duruyor (zararsız, global kuralla aynı
   token) ama artık asıl iş `color` override'ında.

   Markup DÜZELTİLMEDİ (orkestratör kararı): `</header>`'ı `<main>`'den önce
   kapatmak satır ~126-160'taki mobil drawer nav'ı `<main>`'in İÇİNE sokar - bu
   ayrı, tam regresyon testi isteyen bir risk, bu turun kapsamı DIŞINDA.

   Token'lar `:root`'tan doğrulandı: `--bg-main: #FFFFFF` (sayfa zemini zaten
   beyaz), `--ink: #181818` (gövde metin rengi). `.lp-breadcrumb`/
   `.lp-results-count-standalone` KENDİ `var(--muted)`/`var(--ink)` renklerini
   zaten override ediyor (bölüm 24-25), burada TEKRAR belirtilmesine gerek
   yok - sadece EBEVEYNDEN gelen beyaz miras kırılıyor. */
body.lp-has-filter-sidebar .lp-main {
	background: var(--bg-main);
	color: var(--ink);
}

/* Görev 3b — Blocksy'nin kendi büyük arşiv başlığı (`.hero-section`) artık
   gereksiz, yerini yukarıdaki `.lp-breadcrumb-section` aldı. PHP override YOK
   (Blocksy parent bu repoda yok, kaynağı incelenemez - bkz. functions.php
   `parklastik_render_archive_breadcrumb()` docblock'u) - SADECE görsel olarak
   gizleniyor. `display:none` grid'den TAMAMEN çıkarır (boş bir "hero" satırı
   BIRAKMAZ). Kapsam `body.lp-has-filter-sidebar` ile SINIRLI - bu class SADECE
   shop/kategori/marka arşivlerinde ve /lastik-ara/'da eklenir (bkz.
   `parklastik_filter_sidebar_body_class()`), single ürün/sayfa/yazı gibi diğer
   TÜM şablonlardaki olası `.hero-section` kullanımları ETKİLENMEZ. */
body.lp-has-filter-sidebar .hero-section {
	display: none;
}

/* Mobil kart genişliği tutarlılığı (≤767px): `.lp-main`'in kendi `0 16px 40px`
   padding'i (yukarıda) ZATEN tek doğru yatay boşluğu veriyor. Ama içindeki
   "content" alanı bazı yüzeylerde KENDİ yatay padding'ini de taşıyor - bu
   çift-uygulanan padding, ürün kartlarının anasayfadaki `.lp-featured-products
   ul.products`'a göre (tek `.lp-container` katmanı, 16px) dar görünmesine
   sebep oluyordu (canlı 390px ölçümü: `/lastik-ara/` 325px - `.lp-results-list`
   içindeki `.lp-container`'ın kendi 16px padding'i `.lp-main`'inkiyle üst üste
   biniyor -, hedef/anasayfa 358px). `padding-left/right:0` bu ikisini eşitledi.
   `/lastik-ara/` ve anasayfa artık DOĞRU (358px) - bu iki satır YETERLİ, dokunma.

   Kategori/marka arşivi (`.ct-container`) İÇİN PADDING YETMEDİ - canlı ölçüm
   (deploy sonrası, 390px) `.ct-container`'ın computed padding'inin zaten 0
   olduğunu ama genişliğinin HÂLÂ 343px'te kilitli kaldığını gösterdi. Kök sebep
   PADDING DEĞİL, Blocksy'nin kendi `width` kuralıydı:
   `.ct-container, .ct-container-narrow { width: var(--theme-container-width) }`
   ve `--theme-container-width: min(100%, calc(88vw - ...))` - 390px viewport'ta
   88vw = 343.2px, `.lp-main`'in sağladığı 358px'lik içerik kutusunu DOLDURMUYOR
   (ortalandığı için sol offset de 16 yerine 23px oluyor). Çözüm: `.ct-container`'a
   özel `width: 100%` ile Blocksy'nin `88vw` değerini ez - grid content hücresini
   (358px) tam doldursun. Özgüllük: Blocksy `.ct-container` = (0,1,0), bizim
   `body.lp-has-filter-sidebar .lp-main > .ct-container` = (0,3,1) - `!important`
   GEREKMEZ. `max-width:1290px` (Blocksy) kalabilir, 390px'te zaten bağlayıcı değil.

   ≥768px'te bu blok YOK - Blocksy'nin `88vw` konteyneri orada KALMALI (masaüstü/
   tablet düzeni zaten doğru çalışıyor, bozulmaması ŞART). */
@media (max-width: 767px) {
	body.lp-has-filter-sidebar .lp-main > .ct-container,
	body.lp-has-filter-sidebar .lp-main > .lp-results-list > .lp-container {
		padding-left: 0;
		padding-right: 0;
	}
	body.lp-has-filter-sidebar .lp-main > .ct-container {
		width: 100%;
	}
}

.lp-filter-sidebar {
	background: var(--bg-card);
	border: 1px solid var(--border-ink);
	border-radius: var(--radius-card);
	padding: 18px;
	box-shadow: var(--shadow-card);
}

/* Aktif filtre çipleri + Temizle */
.lp-filter-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 18px;
}
.lp-filter-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--oponeo-gray-bg);
	border: 1px solid var(--brand-green);
	color: var(--brand-green);
	border-radius: var(--radius-pill);
	padding: 6px 10px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
}
.lp-filter-chip:hover {
	background: var(--brand-green);
	color: #fff;
}
.lp-filter-chip-remove {
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
}
.lp-filter-clear {
	font-size: 13px;
	color: var(--muted);
	text-decoration: underline;
}
.lp-filter-clear:hover {
	color: var(--ink);
}

/* Facet grupları */
.lp-filter-form {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.lp-filter-group {
	border: 0;
	margin: 0;
	padding: 14px 0;
	border-bottom: 1px solid var(--border-ink);
}
.lp-filter-group:first-child {
	padding-top: 0;
}
.lp-filter-group-title {
	padding: 0;
	font-size: 14px;
	font-weight: 700;
	color: var(--ink);
	margin-bottom: 10px;
}
/* İ4 (Adım 6) — sert kesme yerine yumuşak geçiş: max-height 260px'ten
   320px'e çıkarıldı (biraz daha cömert) VE klasik "scroll shadow" tekniği
   eklendi (iki `local` arka plan listeyle birlikte kayıp taşma olmadığında
   gölgeyi otomatik gizler, iki `scroll` arka plan gölgenin kendisidir) —
   JS/ölçüm GEREKMEZ, taşmayan kısa listelerde gölge kendiliğinden görünmez.
   Kaynak: klasik CSS-only "scrolling shadows" deseni (background-attachment
   local+scroll kombinasyonu). Sadece ALT kenar (İ4'ün istediği "alt kenara
   yumuşak geçiş") — üst gölge BİLEREK eklenmedi, ilk terim zaten en üstte
   görünür, üstte "daha fazla var" hissi vermeye gerek yok. */
/* NOT (Kusur 2, mobil filtre QA turu): 320px max-height + fade SADECE
   masaustu dar sutun baglami icindir. Mobil tam ekran drawer'da AYNI kural
   sert bir ic kesme + ic-ice scroll tuzagi yaratiyordu (8 terim esigi +
   "Tumu" satiri ~376px tutuyor, 320px'i asiyor). Mobil override'i bkz.
   "23. Mobil Filtre Drawer" -> `html.lp-js .lp-filter-sidebar .lp-filter-options`.
   Buradaki 320px/fade degerleri masaustu icin AYNEN KALDI. */
.lp-filter-options {
	display: flex;
	flex-direction: column;
	gap: 2px;
	max-height: 320px;
	overflow-y: auto;
	background-color: var(--bg-card);
	background-image:
		linear-gradient(rgba(241, 241, 241, 0), var(--bg-card) 85%),
		radial-gradient(farthest-side at 50% 100%, rgba(24, 24, 24, .16), rgba(24, 24, 24, 0));
	background-repeat: no-repeat, no-repeat;
	background-position: 0 100%, 0 100%;
	background-size: 100% 28px, 100% 10px;
	background-attachment: local, scroll;
}
/* Adım 6 (İ5) — grup daraltılınca (bkz. `.lp-filter-group.is-collapsed`,
   `initMobileFilterBar()`) içerik gizlenir; `hidden` özniteliği JS tarafından
   eklenir/kaldırılır, burada sadece geçiş yumuşatılır. */
.lp-filter-group.is-collapsed .lp-filter-options {
	display: none;
}
.lp-filter-option {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 6px;
	border-radius: 8px;
	font-size: 14px;
	color: var(--ink);
	cursor: pointer;
}
.lp-filter-option:hover {
	background: var(--oponeo-gray-bg);
}
.lp-filter-option input[type="radio"],
.lp-filter-option input[type="checkbox"] {
	width: 16px;
	height: 16px;
	accent-color: var(--brand-green);
	flex-shrink: 0;
}
.lp-filter-option-label {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.lp-filter-option-count {
	color: var(--muted);
	font-size: 12px;
	flex-shrink: 0;
}
.lp-filter-option:has(input:checked) {
	background: var(--oponeo-gray-bg);
	color: var(--brand-green);
	font-weight: 600;
}

/* Adım 6: margin-top artık `.lp-fdrawer-actions` kapsayıcısında (bkz. bölüm
   23) — buton artık her zaman o kapsayıcının içinde render edilir (K6),
   üstteki boşluk oraya taşındı ki mobil sticky action bar'da ÇİFT boşluk
   oluşmasın. Masaüstü görünüm AYNI (16px toplam boşluk, sadece hangi
   elemanın margin'i olduğu değişti). */
.lp-filter-submit {
	width: 100%;
	border: 0;
	border-radius: var(--radius-btn);
	background: var(--brand-green);
	color: #fff;
	font-weight: 700;
	font-size: 15px;
	padding: 13px 16px;
	cursor: pointer;
	min-height: 48px;
}
.lp-filter-submit:hover {
	background: var(--brand-green-hover);
}

/* ===================== 23. Mobil Filtre Drawer (Faz 4, Adım 6) =====================
   İ1: mobil araç çubuğu (`.lp-fbar`) + `.lp-filter-sidebar`'ın tam ekran drawer'a
   dönüşmesi + sıralama sheet'i (`.lp-sortsheet`). Sınıf önekleri BİLEREK
   `.lp-filter-btn` / `.lp-panel` / `.lp-brand-*` / `.lp-filter-expand`
   AİLESİNDEN AYRI tutuldu (`lp-fbar-*` / `lp-fdrawer-*` / `lp-sortsheet-*`) —
   hero arama kutusu o adları ZATEN kullanıyor VE Customizer Ek CSS'teki
   `/* PL-FILTER-GREEN */` marker'ı `!important`li kurallarla o adları
   hedefliyor (bkz. orkestratör K1 talimatı) — aynı adı burada kullanmak
   hero'nun seçili-durum renklerini bu bambaşka bileşene sızdırırdı.

   Tüm bu bölüm İKİ koşula bağlıdır:
   1) `html.lp-js` — `parklastik.js`'in DOMContentLoaded'ı BEKLEMEDEN en başta
      eklediği class (K7). JS yoksa drawer AÇILAMAZ, bu yüzden mobil araç
      çubuğu/backdrop/sort-sheet hiç gösterilmez; `<aside>` ESKİ (akışta, tam
      görünür) davranışını sürdürür — bozuk değil, sadece kompakt değil.
   2) `max-width: 1024px` — masaüstünde (≥1025px) bu bölümdeki HİÇBİR kural
      geçerli olmaz; ayrıca aşağıdaki "23.1 Masaüstü kilidi" bloğu `!important`
      ile bunu GARANTİ eder (K2 kabul kriteri: masaüstü piksel olarak değişmez). */

/* ---- 23.1 Masaüstü kilidi: JS'te olası bir hata/gecikme olsa BİLE bu dört
   eleman ≥1025px'te asla görünmez — K2'nin "piksel olarak değişmez" kabul
   kriterinin son güvenlik ağı. ---- */
@media (min-width: 1025px) {
	.lp-fbar,
	.lp-fdrawer-head,
	.lp-sortsheet,
	.lp-fdrawer-backdrop {
		display: none !important;
	}
}

/* ---- 23.2 `.lp-fbar` — mobil araç çubuğu ----
   Varsayılan (JS'siz VE masaüstü) HER ZAMAN gizli. Sadece `html.lp-js` +
   ≤1024px'te görünür VE `.lp-main`'in "sidebar" grid hücresini devralır
   (K2 — `<aside>` aynı anda `position:fixed` olup akıştan çıkıyor, bu hücre
   boşalıyor). */
.lp-fbar {
	display: none;
}
@media (max-width: 1024px) {
	html.lp-js .lp-fbar {
		display: grid;
		grid-area: sidebar;
		grid-template-columns: 1fr 1fr;
		gap: 10px;
		margin-bottom: 2px;
	}
	/* K3: sayfada select[name="orderby"] yoksa JS bu class'ı ekler — Sırala
	   butonu (zaten JS'in kendisi `hidden` yaptığı için) kaybolur, Filtreler
	   butonu tek sütuna yayılır. */
	html.lp-js .lp-fbar.lp-fbar--no-sort {
		grid-template-columns: 1fr;
	}
}
.lp-fbar-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 10px 12px;
	border: 1px solid var(--border-ink);
	border-radius: var(--radius-btn);
	background: var(--bg-card);
	color: var(--ink);
	font-family: var(--font-stack);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.15;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: border-color .15s ease, color .15s ease, transform .12s ease;
}
.lp-fbar-btn:active { transform: scale(.97); }
.lp-fbar-btn[aria-expanded="true"] {
	border-color: var(--brand-green);
	color: var(--brand-green);
}
.lp-fbar-icon { flex-shrink: 0; }
.lp-fbar-btn-text { display: flex; align-items: center; gap: 6px; min-width: 0; }
.lp-fbar-btn-sort .lp-fbar-btn-text { flex-direction: column; align-items: flex-start; gap: 0; min-width: 0; }
.lp-fbar-sublabel {
	font-size: 10px;
	font-weight: 600;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: .03em;
}
/* Kusur 3 (mobil filtre QA turu): sabit 118px, en sik gorulen etiketi
   ("Varsayilan Siralama") 390px genislikte "Varsayilan Siral..." diye
   kirpiyordu. `max-width` artik 100% - gercek sinir zaten ebeveyn flex
   sutunun (`.lp-fbar-btn-sort .lp-fbar-btn-text`, `min-width:0`) gercek
   genisligi, 118px'lik sabit deger bunun ALTINDA kalip gereksiz erken
   kirpiyordu. Ayrica font-size 1px dusuruldu (14 -> 13, SADECE bu span -
   "Filtreler" butonu/etiketi ETKILENMEZ) - iki degisiklik birlikte en sik
   etiketin tam sigmasini saglar; cok uzun secenekler ("Fiyata gore sirala:
   Dusukten yuksege") yine ellipsis'e dusebilir, bu beklenen/kabul edilebilir. */
.lp-fbar-sortvalue {
	max-width: 100%;
	font-size: 13px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.lp-fbar-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: var(--radius-pill);
	background: var(--brand-green);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}

/* ---- 23.3 `<aside class="lp-filter-sidebar">` mobilde tam ekran drawer ----
   Masaüstü/JS'siz: BU BLOK HİÇ devreye girmez, `<aside>` "22. Filtre Paneli"
   bölümündeki statik kart olarak kalır. */
@media (max-width: 1024px) {
	html.lp-js .lp-filter-sidebar {
		position: fixed;
		inset: 0;
		z-index: 990;
		height: 100dvh;
		max-height: none;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
		transform: translateY(100%);
		transition: transform .26s cubic-bezier(.4, 0, .2, 1);
	}
	body.lp-fdrawer-open .lp-filter-sidebar {
		transform: translateY(0);
	}
}

/* ---- 23.3b Kusur 2 (mobil filtre QA turu) - drawer icinde ic-ice scroll
   KALDIRILDI. Olcum (390x844): Genislik/Yukseklik/Jant Capi 376/320,
   Marka/Hiz Endeksi 334/320 - hepsi 320px max-height'i asiyor, "Tumunu
   Gor" esigiyle (8 terim) max-height degeri birbirini tutmuyordu. Ustelik
   tam ekran bir drawer'in ICINDE ikinci bir scroll yuzeyi olmasi basli
   basina kotu UX (parmak liste uzerindeyken drawer'in kendisi scroll
   etmiyor - "scroll trapping"). Drawer zaten TEK scroll yuzeyi olarak
   kurulu (bkz. 23.3 - `.lp-filter-sidebar` kendisi `overflow-y:auto`),
   bu yuzden mobilde ic kutunun max-height/overflow kilidi kaldirilir; liste
   uzunlugu zaten "Tumunu Gor" mekanizmasi (bkz. 23.8) yonetiyor. Fade/
   scroll-shadow arka planlari da (bkz. "22." bolumundeki `.lp-filter-options`
   tanimi) tasma olmadigi icin anlamsizlasiyor - mobilde kapatildi.
   MASAUSTUNDEKI 320px + fade DEGISMEDI (bu kural sadece <=1024px'te gecerli
   VE sadece drawer icindeki `.lp-filter-sidebar .lp-filter-options`i hedefler,
   masaustu statik sidebar'i ETKILEMEZ). ---- */
@media (max-width: 1024px) {
	html.lp-js .lp-filter-sidebar .lp-filter-options {
		max-height: none;
		overflow: visible;
		background-image: none;
	}
}

/* ---- 23.4 Drawer başlığı (mobil-only — X kapat butonu) ---- */
.lp-fdrawer-head { display: none; }
@media (max-width: 1024px) {
	html.lp-js .lp-fdrawer-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding-bottom: 14px;
		margin-bottom: 14px;
		border-bottom: 1px solid var(--border-ink);
		position: sticky;
		top: 0;
		background: var(--bg-card);
		z-index: 1;
	}
}
.lp-fdrawer-title { font-size: 18px; margin: 0; }
.lp-fdrawer-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border: 0;
	border-radius: 50%;
	background: var(--oponeo-gray-bg);
	color: var(--ink);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}
.lp-fdrawer-close:hover { background: var(--border-ink); }

/* ---- 23.5 Backdrop (drawer + sıralama sheet ortak) ----
   `[hidden]` JS tarafından eklenir/kaldırılır — native tarayıcı davranışı
   yeterli, JS'siz/gerekmediğinde HİÇ görünmez. */
.lp-fdrawer-backdrop {
	position: fixed;
	inset: 0;
	z-index: 980;
	background: rgba(24, 24, 24, .45);
}
.lp-fdrawer-backdrop[hidden] { display: none; }

/* ---- 23.6 Filtrele/Uygula + Temizle — drawer altına sabit (K6) ----
   Masaüstü: yalnızca buton görünür (Temizle GİZLİ) — `.lp-filter-submit`'in
   eski `margin-top:16px`'i buraya taşındı (bkz. "22." bölümündeki not),
   toplam boşluk AYNI kaldı. */
.lp-fdrawer-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 16px;
}
.lp-fdrawer-actions .lp-filter-clear {
	display: none;
}
.lp-fdrawer-actions .lp-filter-submit {
	flex: 1 1 auto;
}
@media (max-width: 1024px) {
	html.lp-js .lp-fdrawer-actions {
		position: sticky;
		bottom: 0;
		z-index: 1;
		background: var(--bg-card);
		margin-top: 20px;
		padding: 12px 0 max(12px, env(safe-area-inset-bottom));
		border-top: 1px solid var(--border-ink);
	}
	html.lp-js .lp-fdrawer-actions .lp-filter-clear {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		min-height: 48px;
		padding: 0 14px;
		white-space: nowrap;
		font-size: 14px;
	}
}

/* ---- 23.7 Grup başlığı aç/kapa oku (İ5) ----
   Sayfa ilk yüklendiğinde HEPSİ AÇIK (`aria-expanded="true"`, PHP tarafında
   `hidden` YOK) — chevron sadece `html.lp-js` altında görünür (JS'siz
   tıklamanın hiçbir görsel karşılığı olmasın, buton yine de zararsız durur). */
.lp-filter-group-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	border: 0;
	background: none;
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	color: var(--ink);
	text-align: left;
	cursor: pointer;
}
.lp-filter-group-chevron {
	display: none;
	flex-shrink: 0;
	color: var(--muted);
	transition: transform .18s ease;
}
html.lp-js .lp-filter-group-chevron { display: inline-flex; }
.lp-filter-group.is-collapsed .lp-filter-group-chevron { transform: rotate(-90deg); }
.lp-filter-group.is-collapsed .lp-filter-options,
.lp-filter-group.is-collapsed .lp-filter-show-all {
	display: none;
}

/* ---- 23.8 "Tümünü Gör (N)" — İ4 uzun listeler ----
   JS'siz: `.lp-filter-extra-terms` `display:contents` (görünmez bir sarmalayıcı,
   içindeki terimler normal akışta GÖRÜNÜR kalır — kullanıcı hiçbir terimi
   KAYBETMEZ). Sadece `html.lp-js` altında, henüz "Tümünü Gör"e basılmamışsa
   gizlenir. */
.lp-filter-extra-terms { display: contents; }
html.lp-js .lp-filter-extra-terms:not(.is-visible) { display: none; }
.lp-filter-show-all {
	display: none;
	width: 100%;
	margin-top: 8px;
	border: 0;
	background: none;
	padding: 6px 0;
	font-size: 13px;
	font-weight: 700;
	color: var(--brand-green);
	text-align: left;
	text-decoration: underline;
	cursor: pointer;
}
html.lp-js .lp-filter-show-all { display: inline-flex; }
.lp-filter-show-all[hidden] { display: none !important; }

/* ---- 23.9 Sıralama sheet'i (alttan açılan küçük panel) ----
   Seçenekler ASLA elle yazılmaz — `initMobileFilterBar()` sayfadaki
   `select[name="orderby"]`'ın `<option>`'larından okuyup doldurur (K3). */
.lp-sortsheet {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 995;
	max-height: 70dvh;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	background: var(--bg-main);
	border-radius: var(--radius-card) var(--radius-card) 0 0;
	box-shadow: var(--shadow-card-hover);
	transform: translateY(100%);
	transition: transform .24s cubic-bezier(.4, 0, .2, 1);
	padding-bottom: env(safe-area-inset-bottom);
}
.lp-sortsheet[hidden] { display: none; }
.lp-sortsheet.is-open { transform: translateY(0); }
.lp-sortsheet-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 18px 12px;
	border-bottom: 1px solid var(--border-ink);
}
.lp-sortsheet-title { font-size: 16px; margin: 0; }
.lp-sortsheet-list { padding: 6px 0 10px; }
.lp-sortsheet-option {
	display: block;
	width: 100%;
	min-height: 48px;
	border: 0;
	background: none;
	padding: 13px 18px;
	font-family: var(--font-stack);
	font-size: 15px;
	color: var(--ink);
	text-align: left;
	cursor: pointer;
	border-bottom: 1px solid var(--border-ink);
}
.lp-sortsheet-option:last-child { border-bottom: 0; }
.lp-sortsheet-option:hover { background: var(--oponeo-gray-bg); }
.lp-sortsheet-option.is-selected {
	background: var(--oponeo-gray-bg);
	color: var(--brand-green);
	font-weight: 700;
}

/* ---- 23.10 Filtrele/Uygula buton metni (K6) — masaüstü/mobil metin geçişi
   `html.lp-js`'e BAĞLI DEĞİL: JS olmasa bile mobilde tek dokunuşluk kısa
   "Uygula" etiketi anlamlı, bu yüzden salt medya sorgusu yeterli. ---- */
.lp-txt-narrow { display: none; }
@media (max-width: 1024px) {
	.lp-txt-wide { display: none; }
	.lp-txt-narrow { display: inline; }
}

/* ---- 23.11 Odak halkaları (klavye erişimi) ---- */
.lp-fbar-btn:focus-visible,
.lp-fdrawer-close:focus-visible,
.lp-filter-group-toggle:focus-visible,
.lp-filter-show-all:focus-visible,
.lp-sortsheet-option:focus-visible {
	outline: 2px solid var(--brand-green);
	outline-offset: 2px;
}

/* ---- 23.12 Hareket hassasiyeti ---- */
@media (prefers-reduced-motion: reduce) {
	.lp-filter-sidebar,
	.lp-sortsheet,
	.lp-filter-group-chevron {
		transition: none !important;
	}
}

/* ===================== 24. Sonuç Başlığı + Sıralama Dropdown (Faz 4, Adım 6) =====================
   Görev 3 (sadeleştirme turu) GÜNCELLEMESİ: `.lp-results-header` (eski büyük
   H1+sayı bloğu) artık page-lastik-ara.php'de BASILMIYOR, aşağıdaki padding
   kuralı `.lp-breadcrumb-section`'a taşındı - bu class HEM /lastik-ara/ HEM
   kategori/marka arşivlerinde AYNI breadcrumb şablonu tarafından kullanılıyor
   (bkz. "22. Filtre Paneli" bölümündeki grid-area notu), o yüzden ikisinde de
   AYNI (14px/28px) kompakt dolguyu miras alıyor - ayrı bir kural İCAT EDİLMEDİ.

   İ2 (orijinal ölçüm, hâlâ geçerli): `.lp-section` genel padding'i (40px mobil /
   64px masaüstü — bkz. bölüm 2) bu kadar sade bir blok için fazlaydı. ÖLÇÜM:
   mobil 40px → 14px, masaüstü 64px → 28px. */
.lp-breadcrumb-section {
	padding: 14px 0;
}
@media (min-width: 1025px) {
	.lp-breadcrumb-section {
		padding: 28px 0;
	}
}

/* Kusur 4 (mobil filtre QA turu, masaustu 1512px olcumu): `.lp-results-list`
   ".lp-section"'dan miras aldigi 40px UST dolguyu masaustunde de koruyordu -
   I2'de SADECE breadcrumb bloğunun (o zamanki adıyla `.lp-results-header`)
   dolgusu azaltilmisti, bu bolume dokunulmamisti. Asil "siralama kutusu sonuc
   sayisindan kopuk" hissinin gercek kaynagi buydu: 28px (breadcrumb alt
   dolgusu) + 32px (grid `gap`) + 40px (bu dolgu) - 8px (asagidaki
   `.lp-results-topbar` negatif margin'i) = olculen ~100px'e denk dusuyor.
   Masaustunde 8px'e indirildi (SADECE `padding-top` - alt dolgu 40px AYNEN
   KALDI, urun grid'i/sayfalama oncesindeki boslugu etkilemez). Mobilde
   (varsayilan `.lp-section` 40px'i) DOKUNULMADI. */
@media (min-width: 1025px) {
	.lp-results-list {
		padding-top: 8px;
	}
}

/* Görev 3a (sadeleştirme turu) — sonuç sayısı ("706 lastik bulundu") artık
   ayrı bir `.lp-results-header`'ın İÇİNDE değil, `.lp-results-ordering` ile
   AYNI satırda, KARDEŞİ olarak (bkz. page-lastik-ara.php `.lp-results-topbar`
   wrapper'ı). Bu wrapper HER viewport'ta `display:flex` - mobilde
   `.lp-results-ordering` `position:absolute` ile (aşağıda) flex akışından
   TAMAMEN çıktığı için (spec: mutlak konumlu flex çocuğu layout'a katılmaz)
   sadece sayı görünür kalır, hizalama bozulmaz. */
.lp-results-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
}
.lp-results-count-standalone {
	color: var(--muted);
	font-size: 14px;
	margin: 0;
}

/* İ3: sıralama dropdown'ı site form diline uydurulur (çıplak tarayıcı
   görünümü yerine kenar/köşe/font/focus halkası + inline SVG ok — harici
   kaynak YOK, data-URI). Taban stil TÜM viewport'larda uygulanır (mobilde
   görünmez olsa da select programatik olarak JS ile okunuyor/set ediliyor
   — bkz. K3), sadece GÖRÜNÜRLÜK ≤1024px'te clip ile kısıtlanır. */
.lp-results-ordering select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	min-height: 44px;
	padding: 9px 38px 9px 14px;
	border: 1px solid var(--border-ink);
	border-radius: var(--radius-btn);
	background-color: var(--bg-card);
	font-family: var(--font-stack);
	font-size: 14px;
	color: var(--ink);
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235C5C5C' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 10px 6px;
}
.lp-results-ordering select:focus {
	outline: none;
	border-color: var(--brand-green);
	box-shadow: 0 0 0 3px rgba(0, 102, 228, .15);
}
/* Masaüstü: "ince bir ayraç" ile görsel bağ (bkz. görev raporu gerekçesi —
   DOM'u breadcrumb'ın yanına taşımak `.lp-results-list`'e `display:contents`
   gerektirirdi, ürün grid'i/sayfalamayı riske atardı). Sağa hizala + hero
   satırına biraz yaklaştır (negatif üst margin) + alt kenarda ince ayraç —
   "X lastik bulundu" satırının doğal devamı gibi okunur.
   Kusur 4 (mobil filtre QA turu) — -8px → -16px'e büyütüldü, üstteki
   `.lp-results-list` padding-top'ının (40px→8px, bkz. yukarıdaki "Kusur 4"
   notu) YANINDA ikinci bir daraltma katmanı. Taşma güvenlik hesabı: hero
   satırının alt sınırı ile bu kutunun render edilen üst kenarı arasındaki
   mesafe = grid `gap`(32) + `.lp-results-list` padding-top(8) + bu
   margin(-16) = 24px — her zaman ≥0 (hero'nun İÇİNE asla girmez), 1512px VE
   1280px'te AYNI (ikisi de aynı ≥1025px medya sorgusunda, grid gap/padding
   viewport genişliğinden bağımsız sabit değerler).

   Görev 3a (sadeleştirme turu) GÜNCELLEMESİ: bu negatif margin/ayraç ARTIK
   `.lp-results-ordering`'in kendisinde DEĞİL, onu SARAN `.lp-results-topbar`
   wrapper'ında (bkz. yukarıda) - çünkü `.lp-results-ordering` artık satırın
   TEK elemanı değil, sayının KARDEŞİ. Değerler DEĞİŞMEDİ (aynı -16px/18px/12px/
   ayraç), sadece taşındı - yukarıdaki taşma hesabı BİREBİR geçerli kalıyor.
   `.lp-results-ordering` burada SADECE kendi İÇ hizalamasını (select'i sağa
   yasla) korur. */
@media (min-width: 1025px) {
	.lp-results-topbar {
		margin: -16px 0 18px;
		padding-bottom: 12px;
		border-bottom: 1px solid var(--border-ink);
	}
	.lp-results-ordering {
		display: flex;
		justify-content: flex-end;
	}
}
/* Mobilde: `.lp-fbar-btn-sort` devralır — select DOM'da/işlevsel KALIR
   (K3, `initMobileFilterBar()` değerini okuyor/set ediyor), sadece GÖRSEL
   olarak gizlenir. `display:none` DEĞİL, projede zaten kullanılan
   clip-sr-only deseni (bkz. "19.8", satır ~2128). */
@media (max-width: 1024px) {
	.lp-results-ordering {
		position: absolute !important;
		width: 1px !important;
		height: 1px !important;
		padding: 0 !important;
		margin: -1px !important;
		overflow: hidden !important;
		clip: rect(0, 0, 0, 0) !important;
		white-space: nowrap !important;
		border: 0 !important;
	}
}

/* ===================== 25. Breadcrumb (Görev 3, sadeleştirme turu) =====================
   Büyük başlık bloklarının (eski `/lastik-ara/` `.lp-results-header` H1+sayı+
   "Aramayı Değiştir"; kategori/marka arşivlerindeki Blocksy `.hero-section`)
   yerini alan sade "Anasayfa > X [> Y]" gezinme yolu. TEK, paylaşılan şablon
   (`template-parts/breadcrumb.php`) İKİ entry point'te de AYNI `.lp-breadcrumb-section`
   class'ıyla render edilir (bkz. "22. Filtre Paneli" bölümündeki grid-area
   eşlemesi ve bu bölümün padding kuralı — "24. Sonuç Başlığı" bölümünde).

   Küçük/sade/tek satır (orkestratör talimatı): 13px, `var(--muted)`, ayraç
   "›", SON öğe (aktif sayfa) `var(--ink)` + kalın ve link DEĞİL (aria-current).
   Linkler hover'da `var(--brand-green)` — projede zaten kullanılan link/focus
   rengi, yeni bir hex İCAT EDİLMEDİ. Taşma durumunda (uzun marka adı vb.)
   sayfa GÖVDESİ değil, SADECE `<ol>` yatay kaydırılır (`overflow-x:auto` +
   `white-space:nowrap`) - K7 (yatay kayma yasağı) korunur. */
.lp-breadcrumb ol {
	display: flex;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 6px;
	font-size: 13px;
	color: var(--muted);
	overflow-x: auto;
	white-space: nowrap;
	-webkit-overflow-scrolling: touch;
}
.lp-breadcrumb li {
	display: flex;
	align-items: center;
	gap: 6px;
	flex: none;
}
.lp-breadcrumb li:not(:last-child)::after {
	content: "\203A";
	color: var(--muted);
}
.lp-breadcrumb a {
	color: var(--muted);
	text-decoration: none;
}
.lp-breadcrumb a:hover,
.lp-breadcrumb a:focus-visible {
	color: var(--brand-green);
}
.lp-breadcrumb li[aria-current="page"] span {
	color: var(--ink);
	font-weight: 600;
}

/* ===================== 26. Yeni Sayfalar (Markalar tam liste / İletişim) — navbar 7 sayfa =====================
   `/markalar/`, `/hizmetler/`, `/sss/`, `/iletisim/` ve 3 mevsim sayfası YENİ
   CSS İCAT ETMEDEN mevcut `.lp-section`/`.lp-services-grid`/`.lp-service-card`/
   `.lp-faq-list`/`.lp-btn-*` ile render olur (bkz. o sayfa şablonları) — burada
   SADECE bu turda kullanılan, önceden VAR OLMAYAN iki yeni blok (marka grid'i,
   iletişim düzeni) + anasayfa özet bölümlerindeki "Tümünü Gör" linki için
   küçük bir boşluk kuralı tanımlanır. Tüm renk/radius/gölge tokenları mevcut
   `:root` değişkenlerinden okunur, yeni hex İCAT EDİLMEZ. */

/* Anasayfadaki özet Hizmetler/Markalar/SSS bölümlerinin altına eklenen
   "Tümünü Gör" tarzı linkler (front-page.php) — gruptan biraz ayrık dursun. */
.lp-section-more-link {
	margin-top: 18px;
	width: auto;
}

/* Markalar (/markalar/) — tüm markaların kutu/grid listesi.
   Mini-kart/pill görünümü (aynı karar, bkz. §9.1.1 — homepage .lp-brand-logo-cell
   ile TUTARLI): zemin var(--bg-card) #F1F1F1 yerine daha açık #F8F9FA, hover'da
   kurumsal mavi var(--brand-green) zemin + beyaz metin + translateY(-3px) +
   var(--shadow-card-hover). Bu öge gerçek `<a>` linki (klavye ile tab'lenir) —
   focus-visible durumu hover ile AYNI (translateY hariç, klavye odağında ani
   sıçrama istenmez), hover:hover media'sının DIŞINDA tutulur ki erişilebilirlik
   fare/dokunmatik ayrımından etkilenmesin. */
.lp-brand-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}
/* 🔴 SINIF ADI ÇAKIŞMASI — `.lp-brand-grid` İKİ AYRI BİLEŞENDE KULLANILIYOR:
   (1) burası, `/markalar/` sayfasının marka kart grid'i (page-markalar.php);
   (2) hero filtresinin marka seçim paneli (parklastik.js `initBrandPanel()`
       ~satır 1416, her zaman `.lp-brand-group` içinde üretilir).
   Panelin kuralı dosyada ÇOK DAHA ÖNCE (~1462) ve `padding: 4px 18px 4px 48px`
   veriyor — o 48px'lik sol iç boşluk `/markalar/` grid'ine de SIZIYORDU, yani
   kartlar solda 64px sağda 34px boşlukla ASİMETRİK duruyordu (mobilde gözle
   görülür, canlıda ölçüldü: kart sol kenarı 64px, sağ kenarı 34px).

   Düzeltme BİLEREK `.lp-container > .lp-brand-grid` ile yapıldı: panel grid'i
   hiçbir zaman `.lp-container`ın DOĞRUDAN çocuğu değil (her zaman
   `.lp-brand-group` içinde), dolayısıyla bu seçici ona ASLA eşleşemez.
   Yukarıdaki ~1462 kuralına DOKUNULMADI — onu daraltmak (örn.
   `.lp-brand-group .lp-brand-grid`) özgüllüğünü 0,2,0'a çıkarıp buradaki
   `gap: 12px`i ezer ve panelin görünümünü değiştirirdi. */
.lp-container > .lp-brand-grid { padding: 0; }
.lp-brand-grid-item {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-height: 48px;
	background: #F8F9FA;
	border: 1px solid var(--border-ink);
	border-radius: var(--radius-card);
	padding: 16px;
	transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.lp-brand-grid-item:active { transform: scale(.98); }
.lp-brand-grid-item:focus-visible {
	background: var(--brand-green);
	border-color: var(--brand-green);
	box-shadow: var(--shadow-card-hover);
}
.lp-brand-grid-item:focus-visible .lp-brand-grid-name,
.lp-brand-grid-item:focus-visible .lp-brand-grid-count { color: #fff; }
@media (hover: hover) and (pointer: fine) {
	.lp-brand-grid-item:hover {
		background: var(--brand-green);
		border-color: var(--brand-green);
		box-shadow: var(--shadow-card-hover);
		transform: translateY(-3px);
	}
	.lp-brand-grid-item:hover .lp-brand-grid-name,
	.lp-brand-grid-item:hover .lp-brand-grid-count { color: #fff; }
}
@media (prefers-reduced-motion: reduce) {
	.lp-brand-grid-item { transition: none !important; }
}
.lp-brand-grid-name { font-weight: 700; font-size: 15px; color: var(--ink); transition: color .2s ease; }
.lp-brand-grid-count { font-size: 13px; color: var(--muted); transition: color .2s ease; }

/* --- Marka logoları (2026-08-05) — anasayfadaki §9.1.3 ile AYNI mantık, AYRI sınıf.
   `.lp-brand-grid-item` ile `.lp-brands-row .lp-brand-logo-cell` birbirinden
   bağımsız iki bloktur (CLAUDE.md'de tekrarlayan bir tuzak olarak işaretli) —
   burada da `object-fit: contain` + sabit yükseklikli kutu deseni kullanılıyor
   ama ölçüler bu grid'in kendi ölçülerine göre ayrı ayarlandı.

   Metin hizası: logo ortada, isim/adet solda kalırsa aynı grid içinde iki farklı
   hizalama olurdu (yayındaki 27 markanın ~22'sinde logo var, ~5'inde yok).
   Bu yüzden hizalama HÜCRENİN TAMAMINDA ortalandı — logosuz fallback hücreler de
   ortalanıyor, grid tek bir düzen olarak okunuyor.

   Hover'da mavi dolgu logo hücrelerinde kapatılır (aynı gerekçe: mavi logolar
   mavi zeminde kayboluyor); yerine beyaz zemin + mavi kenarlık gelir ve
   isim/adet metni okunur renginde kalır. */
/* `justify-content: center` ZORUNLU: logolu kart artik marka ADINI basmiyor
   (bkz. page-markalar.php), yani logolu ve logosuz hucrelerin içerik yüksekliği
   farklı. Grid hücreleri satır yüksekliğine gerildiği için içerik üste yapışık
   kalsaydı aynı satırdaki iki kart farklı hizada görünürdü. */
.lp-brand-grid-item { align-items: center; justify-content: center; text-align: center; }
.lp-brand-grid-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin-bottom: 2px;
}
/* Logo HER DURUMDA tam renkli — masaüstü ve mobil aynı (kullanıcı kararı
   2026-08-05, gerekçe §9.1.2). Buradaki `img` üzerinde bilerek filter/opacity
   YOK; dolayısıyla hover/focus'ta geri alınacak bir şey de yok ve eskiden
   bu bloğun SONUNDA durmak zorunda olan `(hover: none)` override'ı silindi. */
.lp-brand-grid-item img {
	width: 100%;
	height: 40px;
	object-fit: contain;
}
.lp-brand-grid-item.has-logo:focus-visible {
	background: #FFFFFF;
	border-color: var(--brand-green);
	box-shadow: var(--shadow-card-hover);
}
/* `.has-logo` hucrede `.lp-brand-grid-name` ARTIK BASILMIYOR (2026-08-05) —
   o yuzden burada yalnizca urun sayisi metni geri renklendiriliyor. */
.lp-brand-grid-item.has-logo:focus-visible .lp-brand-grid-count { color: var(--muted); }
@media (hover: hover) and (pointer: fine) {
	.lp-brand-grid-item.has-logo:hover {
		background: #FFFFFF;
		border-color: var(--brand-green);
	}
	.lp-brand-grid-item.has-logo:hover .lp-brand-grid-count { color: var(--muted); }
}
@media (min-width: 768px) {
	.lp-brand-grid-item img { height: 48px; }
}

@media (min-width: 768px) {
	.lp-brand-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1025px) {
	.lp-brand-grid { grid-template-columns: repeat(4, 1fr); }
}

/* İletişim (/iletisim/) — bilgi bloğu + harita. Mobil: alt alta (bilgi önce,
   harita altta). Masaüstü (≥1025px): yan yana, harita sticky (kullanıcı bilgi
   bloğunu kaydırırken harita görünür kalır). */
.lp-contact-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	align-items: start;
}
.lp-contact-row {
	padding: 14px 0;
	border-bottom: 1px solid var(--border-ink);
}
.lp-contact-row:last-child { border-bottom: none; }
.lp-contact-row h3 { font-size: 15px; margin-bottom: 6px; }
.lp-contact-row p { margin: 0 0 4px; color: var(--muted); }
.lp-contact-row a { color: var(--link); font-weight: 600; }
.lp-contact-row a:hover,
.lp-contact-row a:focus-visible { color: var(--link-hover); }
.lp-contact-directions { font-size: 13px; }
.lp-contact-info .lp-btn-ghost { margin-top: 6px; }

.lp-contact-map {
	position: relative;
	width: 100%;
	min-height: 280px;
	border-radius: var(--radius-card);
	overflow: hidden;
	border: 1px solid var(--border-ink);
}
.lp-contact-map iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

@media (min-width: 1025px) {
	.lp-contact-grid { grid-template-columns: 1fr 1fr; }
	.lp-contact-map { min-height: 440px; position: sticky; top: 24px; }
}

/* Mevsim sayfaları (yaz/kış/4 mevsim) düzeltmesi — canlı ölçümde H1/giriş
   metni AYRI bir `<section>` olarak basıldığında `.lp-main`'in grid'inde
   adlandırılmamış kaldığı (`grid-area: auto`) ve `content` alanının SONUNA
   (footer'ın hemen üstüne) düştüğü tespit edildi (bkz. `template-parts/
   breadcrumb.php` `intro_title` docblock'u). Düzeltme PHP tarafında yapıldı —
   H1/metin artık `.lp-breadcrumb-section` İÇİNDE (breadcrumb ile AYNI `hero`
   grid alanını paylaşarak) basılıyor; burada SADECE breadcrumb çizgisiyle
   başlık arasına görsel bir boşluk ekleniyor (`.lp-breadcrumb`'ın kendi
   alt boşluğu yok, başlık hemen bitişik görünürdü). */
.lp-breadcrumb-section .lp-breadcrumb + .lp-breadcrumb-intro-title {
	margin-top: 10px;
}


/* =====================================================================
   23.5 KAMPANYA / BANNER ŞERİDİ (hero'nun hemen altı)
   =====================================================================
   NUMARA NEDEN 23.5: Aşağıdaki "24. EK CSS'TEN GÖÇ" bloğu dosyanın SONUNDA
   kalmak ZORUNDA (sebebi o bölümün kendi başlığında yazılı — eskiden
   Customizer Ek CSS'ten en son yüklendiği için aynı özgüllükteki kuralları
   eziyordu, aynı davranışı korumanın tek yolu bu). Yeni bölüm bu yüzden
   sona eklenemedi, araya 23.5 olarak girdi. 24'ü aşağıda BIRAKIN.

   TASARIM MANTIĞI — metin görselin boş tarafına oturur, lastiklerin üstüne
   BİNMEZ. Her iki görselde de lastikler yatayda ~%7-48 aralığında (sol
   yarı); mobil görselde ayrıca alt tarafta, üstte geniş bir gökyüzü boşluğu
   var (~üst %36). Buradan iki yerleşim çıkıyor:

     • Masaüstü (>=768px): görsel doğal 21:9 oranında (KIRPMA YOK), metin
       sağ yarıda dikey ortalı, scrim yalnız sağdan sola koyulaşır ve
       görselin %48'inde tamamen şeffaflaşır -> lastiklerin durduğu sol
       yarı hiç karartılmaz.
     • Mobil (<768px): kutu bilerek daha DİK (5/6). Görselin doğal oranı
       16:9 olduğu için `object-fit: cover` yanlardan kırpar; kırpmanın
       lastikleri kesmemesi için `object-position` yatayda %8'e (sola)
       sabitlendi — 320-767px arası her genişlikte lastikler tam görünür
       kalır. Scrim yalnız üstten aşağı koyulaşır ve %40'ta biter;
       lastiklerin başladığı ~%36'lık banttan sonrası net kalır.

   Görsel değişirse bu üç değer birlikte gözden geçirilmeli:
   `aspect-ratio`, `object-position` ve scrim'in duruş noktaları. */
.lp-promo-banner-section {
	padding: 8px 0 20px;
}

/* ---- Slider kabuğu ----------------------------------------------------
   Kaydırma CSS scroll-snap ile yapılıyor, özel sürükleme matematiğiyle
   DEĞİL. Sebep: mobilde parmakla kaydırma, ivme (momentum) ve snap
   davranışını tarayıcı yerel olarak veriyor; JS yalnızca ok/nokta
   tıklamalarında `scrollTo` çağırıyor ve aktif slaytı okuyor. Bu, elle
   yazılmış bir pointer-drag çözümünden hem daha az kod hem daha doğru
   dokunma hissi demek.

   Tek slaytta (`.is-single`) kaydırma da navigasyon da kapalı: taşma zaten
   olmadığı için viewport `overflow-x: hidden`, oklar/noktalar `display:none`.
   Slayt sayısı 2'ye çıkınca front-page.php bu sınıfı basmayı bırakır ve
   yapı kendiliğinden aktifleşir. */
.lp-promo-slider {
	position: relative;
}

.lp-promo-slider-viewport {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;              /* Firefox */
	-ms-overflow-style: none;           /* eski Edge */
	border-radius: var(--radius-card);  /* köşe yuvarlatma slayttan BURAYA taşındı */
}
.lp-promo-slider-viewport::-webkit-scrollbar {
	display: none;
}

.lp-promo-slider-track {
	display: flex;
}

.lp-promo-slider.is-single .lp-promo-slider-viewport {
	overflow-x: hidden;
}
.lp-promo-slider.is-single .lp-promo-slider-arrow,
.lp-promo-slider.is-single .lp-promo-slider-dots {
	display: none;
}

/* ---- Oklar ---- */
.lp-promo-slider-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(8, 18, 28, .55);
	color: #fff;
	cursor: pointer;
	transition: background-color .2s ease, opacity .2s ease;
}
.lp-promo-slider-arrow:hover {
	background: rgba(8, 18, 28, .78);
}
.lp-promo-slider-arrow:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
}
.lp-promo-slider-prev { left: 10px; }
.lp-promo-slider-next { right: 10px; }

/* MOBİLDE OKLAR GÖRSELİN ÜSTÜNDE DEĞİL, ALTINDA — noktaların iki yanında.
   Neden bindirilmiyor: dikey kutuda dikey olarak ortalanan bir ok tam
   olarak ana nesnenin (1. slaytta lastikler, 2. slaytta teknisyen)
   üstüne denk geliyor; bu bölümün tüm yerleşimi görseli kapatmamak
   üzerine kurulu. Alt satırda ise hiçbir şeyi örtmüyorlar.

   Satır düzeni [◀] [• •] [▶] flex `order` ile kuruluyor: DOM sırası
   prev → next → noktalar olduğu için (markup her iki kırılımda da aynı
   kalsın diye böyle), görsel sıra order ile düzeltiliyor. */
@media (max-width: 767px) {
	.lp-promo-slider {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
	}
	.lp-promo-slider-viewport {
		flex: 0 0 100%;
		order: 0;
	}
	.lp-promo-slider-arrow {
		position: static;
		transform: none;
		order: 1;
		width: 48px;
		height: 48px;
		margin-top: 10px;
		/* Açık zemin üzerinde: koyu ikon + nötr gri daire (görselin üstünde
		   değil artık, o yüzden yarı saydam koyu daire okunmuyordu). */
		background: #EDF1F5;
		color: #16232F;
	}
	.lp-promo-slider-arrow:hover {
		background: #DCE3EA;
	}
	.lp-promo-slider-next {
		order: 3;
	}
	.lp-promo-slider-dots {
		order: 2;
		margin: 10px 6px 0;
	}
}

/* ---- Noktalar ----
   Görselin ÜSTÜNDE değil ALTINDA: bindirilseler mobilde lastiklerin,
   masaüstünde metnin üstüne gelirlerdi. */
.lp-promo-slider-dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	margin-top: 12px;
}
.lp-promo-slider-dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #C7CDD3;
	cursor: pointer;
	transition: background-color .2s ease, transform .2s ease;
	/* Görsel nokta 10px ama dokunma hedefi 44px: görünmez bir pseudo-alan. */
	position: relative;
}
.lp-promo-slider-dot::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 44px;
	height: 44px;
	transform: translate(-50%, -50%);
}
.lp-promo-slider-dot.is-active {
	background: var(--cta);
	transform: scale(1.35);
}
.lp-promo-slider-dot:focus-visible {
	outline: 3px solid var(--link);
	outline-offset: 3px;
}

/* MOBİL KUTU ORANI — 3/4 keyfi değil, iki kısıtın kesişimi:

     (a) Lastikler tam görünmeli. Mobil görsel 16:9 ama kutu dik olduğu için
         `cover` YANLARDAN kırpar. Kırpma miktarı orana bağlı; lastikler
         görselin %7.6-%47.5 aralığını kapladığından oran ~0.72'nin altına
         inerse lastikler kutuya SIĞMAZ (hangi ekran genişliğinde olursa
         olsun — bu sınır genişlikten bağımsız, sadece orana bağlı).
     (b) Metin lastiklerin üstündeki gökyüzü bandına sığmalı. O bant
         görselin üst %38.1'i; yüksekliğin sabit oranı olduğu için kutu
         ne kadar kısa olursa metne o kadar az yer kalır.

   3/4 (0.75) ikisini birden sağlayan aralıktadır. Sınırlar gözle değil,
   görsel canvas'a çizilip koyu piksel kütlesi taranarak ölçüldü.

   ⚠ 481-767px'te oran ayrıca 20/21'e çekiliyor (aşağıda): o genişliklerde
   3/4 kutuyu gereksiz yükseltiyordu. */
.lp-promo-banner {
	position: relative;
	overflow: hidden;
	background: #0E1A24; /* görsel yüklenene kadar koyu zemin — metin ilk boyamada da okunur */
	aspect-ratio: 3 / 4;
	isolation: isolate;

	/* Slayt olarak: her biri viewport genişliğinin tamamını kaplar ve snap
	   noktası olur. `flex-shrink: 0` şart — olmadan 2+ slayt tek ekrana
	   sıkışırdı. Köşe yuvarlatma artık `.lp-promo-slider-viewport`'ta. */
	flex: 0 0 100%;
	max-width: 100%;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

.lp-promo-banner-media {
	position: absolute;
	inset: 0;
	margin: 0;
	line-height: 0;
	z-index: 0;
}
/* Global `img { height: auto }` kuralını ezmek için sınıf+eleman özgüllüğü şart. */
/* object-position yatayda %11.5: kırpmanın lastikleri kesmemesi için geçerli
   aralık %9.7-%13.1 (yukarıdaki ölçülen sınırlardan türetildi), %11.5 bu
   aralığın ortası -> sol/sağ pay dengeli (320-767px arası her genişlikte
   ~6-30px). Dikeyde %100: görsel alta yaslı, gökyüzü üstte kalır. */
.lp-promo-banner-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Yatay odak slayt BAZINDA ayarlanabilir: front-page.php'deki slayt dizisi
	   'focus_mobile' verirse slayt elemanına `--lp-slide-focus-x` inline yazılır.
	   Verilmezse %11.5 (1. slaydın ölçülmüş değeri) kullanılır. Neden gerekli:
	   dik kutuda 16:9 görselin yalnızca ~%42'si görünür, hangi %42 olduğu
	   fotoğrafın kompozisyonuna göre değişir. */
	object-position: var(--lp-slide-focus-x, 11.5%) 100%;
	display: block;
}

.lp-promo-banner-scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	/* MOBİL: sadece üst bant; lastiklerin başladığı çizgide SIFIRLANIR.
	   2026-08-05'te metin bloğu aşağı indirildiği için (bkz. bir alttaki
	   kural) duraklar da birlikte aşağı kaydırıldı — eski hâlinde alt yazı
	   scrim'in bittiği bölgeye düşüp korumasız kalıyordu.
	   Lastiklerin üst kenarı ölçümle %39 (canvas'a çizilip satır satır koyu
	   piksel kütlesi tarandı: %37→0.00, %39→0.03, %42→0.34), scrim tam orada
	   0'a iniyor -> lastikler HİÇ karartılmıyor.
	   Ölçülen kontrast (7 genişlik × 2 hedef): en kötü 5.77:1, ortalama ~8. */
	background: linear-gradient(
		to bottom,
		rgba(8, 18, 28, .80) 0%,
		rgba(8, 18, 28, .78) 18%,
		rgba(8, 18, 28, .70) 28%,
		rgba(8, 18, 28, .58) 33%,
		rgba(8, 18, 28, .30) 36%,
		rgba(8, 18, 28, 0) 39%
	);
}

/* MOBİLDE METİN ARTIK ÜSTE DEĞİL, LASTİK ÇİZGİSİNE YASLI (2026-08-05).
   Eskiden `justify-content: flex-start` + sabit `padding-top` vardı; blok
   kutunun tepesinde toplanıyor, lastiklerin başladığı çizgiyle arasında
   boşluk kalıyordu. Artık blok ALTA yaslanıyor ve alt sınırı kutunun
   %38'inde — lastik çizgisinin (%39) hemen üstünde.

   ⚠ NEDEN `padding-bottom` (yüzde), `bottom` DEĞİL:
   `top:0; bottom:62%` de aynı çizgiyi verir AMA içerik o %38'lik kutuya
   sığmazsa taşma YUKARI olur ve kutunun tepesinde kırpılır (2. slayt 320px'te
   tam olarak buna giriyordu). `inset:0` + `padding-bottom` ile kapsayıcı tüm
   kutu yüksekliğini kullanır: alt çizgi yine %38'de sabit, ama uzun içerik
   yukarı doğru serbestçe büyür. Kırpılma riski yok.

   ⚠ %82.667 KEYFİ DEĞİL: yüzdeli padding kutunun YÜKSEKLİĞİNE değil
   GENİŞLİĞİNE göre çözülür (klasik tuzak). Kutu `aspect-ratio: 3/4` olduğu
   için yüksekliğin %62'si = genişliğin %62 × 4/3 = %82.667'si. Oran
   değişirse bu sayı da değişmeli — 481-767px'te kutu 20/21 olduğu için
   aşağıda %65.1'e (62 × 21/20) çekiliyor.

   İki slayt da aynı çizgide biter (içerik yüksekliği farklı olsa bile),
   ölçüldü: 320-767px arası HER genişlikte buton alt kenarı tam %38.0. */
.lp-promo-banner-content {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	text-align: center;
	gap: 5px;
	padding: 10px 14px 82.667%;
}

/* `max-width` 20ch -> 24ch: metin aşağı inince 2. slaydın 3 satırlık başlığı
   %38'lik banda sığmıyordu. Kutuyu genişletmek satır sayısını 3'ten 2'ye
   düşürüyor — fontu küçültmekten iyi (okunabilirlik korunuyor).
   `text-wrap: balance` şart: 24ch'te başlık "Yola Güvenle Çıkın, Fırsatları /
   Kaçırmayın!" diye çirkin bölünüyordu; balance iki satırı dengeleyip
   "Yola Güvenle Çıkın, / Fırsatları Kaçırmayın!" yapıyor. Desteklemeyen
   tarayıcıda yok sayılır (yalnız satır bölünmesi eski hâline döner). */
.lp-promo-banner-title {
	margin: 0;
	color: #fff;
	font-size: clamp(16px, 4.4vw, 21px);
	line-height: 1.2;
	font-weight: 800;
	max-width: 24ch;
	text-wrap: balance;
	text-shadow: 0 2px 10px rgba(0, 0, 0, .45);
}

/* 34ch -> 44ch: aynı gerekçe — 2. slaydın uzun alt yazısı 4 satırdan
   3 satıra iniyor. */
.lp-promo-banner-text {
	margin: 0;
	color: rgba(255, 255, 255, .94);
	font-size: clamp(12px, 3.3vw, 14px);
	line-height: 1.3;
	max-width: 44ch;
	text-wrap: pretty;
	text-shadow: 0 1px 8px rgba(0, 0, 0, .45);
}

/* `.lp-btn` esnek kutuda uzamasın/ezilmesin — .lp-cta-group'taki
   `flex: 1 1 auto` kuralı buraya sızmıyor ama niyet açık dursun.
   min-height 48px korunuyor (dokunma hedefi kuralı, CLAUDE.md 5.1). */
.lp-promo-banner-cta {
	flex: 0 0 auto;
	align-self: center;
	/* Mobilde 0: blok alta yaslandığı için her piksel banda yer açıyor
	   (masaüstünde aşağıda 6px'e dönüyor). min-height 48px KORUNUYOR —
	   dokunma hedefi kuralı, CLAUDE.md 5.1. */
	margin-top: 0;
	min-height: 48px;
	padding: 10px 20px;
	font-size: 14px;
}

/* Mobil scrim varyantı: DERİN.
   Varsayılan mobil scrim %38'de biter — bu, 1. slaydın metin yüksekliğine göre
   ölçülmüştü (metin kutunun %32'sinde bitiyor). Daha uzun başlık/alt yazı
   taşıyan slaytlarda metin bu bandın ALTINA taşıyor ve korumasız kalıyor
   (2. slayt: metin %44.1'e iniyor, en kötü kontrast 3.75'e düşüyordu).
   Bu varyant karartmayı %46'ya kadar uzatır -> en kötü 6.77, ortalama 12.2.
   %46 sınırı keyfi değil: 2. slaytta teknisyenin başı ~%48'de başlıyor,
   yani ana nesne hâlâ hiç karartılmıyor.

   Slayt dizisinde `'scrim_mobile' => 'deep'` ile açılır.

   ⚠ `@media (max-width: 767px)` ŞART: bu seçici (0,2,0) masaüstü kuralından
   (0,1,0) daha özgül olduğu için, medya sorgusu olmadan masaüstündeki yatay
   gradyanı da ezerdi. */
@media (max-width: 767px) {
	.lp-promo-banner--scrim-deep .lp-promo-banner-scrim {
		background: linear-gradient(
			to bottom,
			rgba(8, 18, 28, .84) 0%,
			rgba(8, 18, 28, .78) 18%,
			rgba(8, 18, 28, .68) 28%,
			rgba(8, 18, 28, .52) 36%,
			rgba(8, 18, 28, .26) 42%,
			rgba(8, 18, 28, 0) 46%
		);
	}
}

/* Dar telefonlar (<=389px): gökyüzü bandı piksel olarak küçüldüğü için
   tipografi ve boşluklar bir tık daha sıkışır. 320px'te pay yalnızca ~5px
   kalıyor — bu blok olmadan metin lastiklerin üstüne biniyordu (ölçüldü). */
@media (max-width: 389px) {
	/* gap 4->3 ve satır aralığı 1.28->1.22: 320px'te 2. slaydın bloğu %38'lik
	   banda ~1.5px payla sığıyordu; bu iki tıraş payı ~6px'e çıkarıyor.
	   padding-bottom taban kuralla AYNI (%82.667) — alt çizgi kaymamalı. */
	.lp-promo-banner-content {
		gap: 3px;
		padding: 9px 12px 82.667%;
	}
	.lp-promo-banner-title {
		font-size: 15.5px;
		line-height: 1.18;
	}
	.lp-promo-banner-text {
		font-size: 11.5px;
		line-height: 1.22;
	}
}

/* Büyük telefon / küçük tablet: 3/4 burada kutuyu gereksiz yükseltiyor
   (767px'te 960px'e çıkıyordu). Gökyüzü bandı genişlikle birlikte büyüdüğü
   için daha kısa bir oran da metne yetiyor. */
@media (min-width: 481px) and (max-width: 767px) {
	.lp-promo-banner {
		aspect-ratio: 20 / 21;
	}
	/* Oran 3/4 -> 20/21 değiştiği için yüzdeli padding'in genişlik karşılığı
	   da değişmeli: yüksekliğin %62'si = genişliğin 62 × 21/20 = %65.1'i.
	   Bu satır olmadan alt çizgi %38'den kayardı (ölçüldü). */
	.lp-promo-banner-content {
		padding-bottom: 65.1%;
	}
}

@media (min-width: 768px) {
	.lp-promo-banner-section {
		padding: 10px 0 26px;
	}

	/* Görselin doğal oranı (2560x1086) — cover hiçbir yeri kırpmaz,
	   lastikler her genişlikte tam olarak beklenen yerde kalır. */
	.lp-promo-banner {
		aspect-ratio: 2560 / 1086;
	}

	.lp-promo-banner-media img {
		object-position: center center;
	}

	/* MASAÜSTÜ: karartma sağdan başlar, %52'de (= soldan %48, lastiklerin
	   bittiği nokta) SIFIRLANIR -> sol yarı hiç karartılmaz.

	   Duraklar ölçümle bulundu, keyfi değil. Görselin sağ üstünde güneş
	   parlaması var; ilk denemede (metin soldan %54, kısa rampa) metnin sol
	   kenarında en kötü kontrast 1.61:1'e düşüyordu. Kontrast canvas'a
	   çizilen görselden piksel örnekleyip scrim alfasıyla birleştirerek
	   ölçüldü. İki değişiklik birlikte gerekti:

	     1) Metin %54 yerine %58'den başlıyor (aşağıdaki padding-left) —
	        böylece karartmanın güçlü olduğu bölgeye giriyor.
	     2) Rampa %40 -> %52 arasına yayıldı (~137px). Daha dar bir rampa
	        (%45 -> %52, ~80px) kontrastı düzeltiyordu ama görselin ortasında
	        GÖZLE GÖRÜLÜR dikey bir dikiş bırakıyordu (ekran görüntüsüyle
	        doğrulandı). Genişletince dikiş kayboldu.

	   Sonuç: en kötü 3.94:1, ortalama 9.97:1, lastiklerin üstünde alfa 0. */
	.lp-promo-banner-scrim {
		background: linear-gradient(
			to left,
			rgba(8, 18, 28, .80) 0%,
			rgba(8, 18, 28, .74) 26%,
			rgba(8, 18, 28, .56) 40%,
			rgba(8, 18, 28, .30) 47%,
			rgba(8, 18, 28, .10) 50%,
			rgba(8, 18, 28, 0) 52%
		);
	}

	/* Sol iç boşluk %58 -> metin bloğu lastiklerin bittiği %48'in belirgin
	   şekilde sağında başlar (bkz. yukarıdaki 1. madde). */
	.lp-promo-banner-content {
		justify-content: center;
		align-items: flex-start;
		text-align: left;
		gap: 12px;
		padding: 24px 4% 24px 58%;
	}

	.lp-promo-banner-title {
		font-size: clamp(22px, 2.5vw, 34px);
		max-width: 16ch;
	}

	.lp-promo-banner-text {
		font-size: clamp(14px, 1.25vw, 17px);
		max-width: 32ch;
	}

	/* `align-self` mobil taban kuralında `center`; masaüstünde metin sola
	   yaslandığı için burada da sıfırlanmalı — yoksa buton başlık/alt yazının
	   sol kenarıyla hizasız kalıyor (ölçümle yakalandı: metin 831px'den
	   başlarken buton 983px'den başlıyordu). */
	.lp-promo-banner-cta {
		align-self: flex-start;
		margin-top: 6px;
		padding: 13px 28px;
		font-size: 16px;
	}
}


/* =====================================================================
   24. EK CSS'TEN GÖÇ (Customizer "Ek CSS" -> tema dosyasi)
   =====================================================================
   NEDEN: Bu bloktaki kurallar bugune kadar WordPress Customizer'in "Ek CSS"
   alaninda (`custom_css` post, sayfaya `<style id="wp-custom-css">` olarak
   basilir) duruyordu. Ek CSS tema stil dosyasindan SONRA yuklendigi icin
   ayni ozgullukteki tema kurallarini sessizce eziyordu; yani masaustu
   header'inin gercek kaynagi tema dosyasi DEGIL, veritabanindaki bu metindi.
   Bu, tekrar tekrar surprize yol acti (en son: media sorgusu olmayan
   `.lp-header-search-btn { width:60px }` kurali tema dosyasindaki 44px'i
   ezip mobil arama kutusunun yer tutucu metnini kirpiyordu; sebep dosyada
   hic gorunmedigi icin uzun sure fark edilmedi). CLAUDE.md 7.6/7.7'de
   "Ek CSS koprulem borcu" olarak belgeliydi - bu bolum o borcu kapatir.

   NEDEN DOSYANIN SONUNDA: Ek CSS kaskatta en sonda geliyordu. Ayni davranisi
   birebir korumanin tek yolu, kurallari tema dosyasinin SONUNA ayni sirayla
   koymaktir. Buraya yeni kural eklerken bu sirayi bozmayin.

   BU TUR SAF BIR TASIMA TURUDUR. Icerik Ek CSS'ten BIREBIR kopyalandi:
   deger degistirilmedi, kural silinmedi, birlestirilmedi. Blokta gozle
   gorulur OLU kurallar var (ornegin `.lp-header-top`'a yesil gradient basan
   kural - tema CSS'indeki `#0066E3 !important` onu eziyor; `PL-NAV-PREMIUM`'un
   `.lp-header` gradienti - hemen altindaki `PL-HEADER-2ROW` `transparent` ile
   iptal ediyor). BUNLAR BILEREK SILINMEDI: bu turun tek basari olcutu
   "gorunum zerre degismedi" idi ve bu ancak birebir kopya ile
   kanitlanabilirdi. Olu kod ayiklamasi AYRI bir turda, yine oncesi/sonrasi
   hesaplanmis-stil karsilastirmasiyla yapilmalidir. (`.lp-logo-img` kurallari
   bu bloktan 2026-08-05 olu-secici temizliginde kaldirildi — logo gorseli
   `.lp-logo-word` yazi markasina gecildigi icin markup'ta hicbir seye
   eslesmiyordu.)

   Goc oncesi Ek CSS'in tam yedegi `plcss_backup_migration` WP option'inda.

   FAZ 2 ISTISNASI (2026-08, header rengi guncellemesi): yukaridaki "birebir
   kopya, deger degistirilmedi" ilkesine TEK istisna - bu bloktaki .lp-header-top /
   .lp-header-search-btn / .lp-header-nav kurallarindaki eski mavi hex'ler
   (#0066E3/#004395/#003370/#0B5A21) yeni lacivert paletle (#0B1F3A/#071629/
   #050F1C) senkron tutuldu. Gorsel etkisi YOK (bu kurallar zaten satir ~336/341/
   2225'teki `!important` tema kurallarinca eziliyor, kaskatta hicbir zaman
   kazanmiyorlar) - amac sadece dosyayi okuyan birinin burada eski/tutarsiz renk
   gorup yanlis kaynak sanmasini onlemek (bkz. CLAUDE.md 7.7.1 "deploy gorunmuyor"
   teshis tuzaklari).
   ===================================================================== */
/* PL-HERO-WIDE */
@media (min-width: 1025px) {
  .lp-hero .lp-hero-grid { max-width: none; margin: 0; padding-left: clamp(80px, 6vw, 100px); padding-right: 24px; }
  .lp-hero-content { max-width: 52vw; margin-right: 0; }
  .lp-hero-intro { margin-bottom: 14px; }
  .lp-hero .lp-vehicle-tabs { margin-bottom: 10px; }
  .lp-hero .lp-search-grid-3 { margin-bottom: 10px; }
  .lp-hero .lp-season-toggle-group { margin-bottom: 10px; }
}

/* PL-NAV-PREMIUM */
.lp-header { background: linear-gradient(90deg,#014F1C 0%,#0B5A21 50%,#0E6A27 100%); color:#fff; }
.lp-main-nav-list a, .lp-header-phone, .lp-header-phone-text { color:#fff; }
.lp-main-nav-list a:hover, .lp-main-nav-list a:focus, .lp-header-phone:hover { color:#B6F542; }
.lp-main-nav-list a { text-transform:uppercase; font-size:12px; font-weight:600; white-space:nowrap; letter-spacing:.2px; }
.lp-main-nav-list { flex-wrap:nowrap; gap:12px; }
.lp-header-phone, .lp-header-phone-text { white-space:nowrap; }
.lp-hamburger span { background:#fff; }
.lp-vehicle-tab.active, .lp-vehicle-tab[aria-selected="true"] { background:#0066E4; color:#fff; border-color:#0066E4; }
.lp-season-toggle input:checked + .lp-season-toggle-card { background:#0066E4; color:#fff; border-color:#0066E4; }
/* PL-HEADER-2ROW */
.lp-header { background:transparent; box-shadow:0 4px 18px rgba(0,0,0,.12); }
.lp-header-top { background:#0B1F3A; }
.lp-header-top-inner { display:flex; align-items:center; gap:24px; min-height:92px; padding:8px 0; }
.lp-logo { display:flex; align-items:center; flex:0 0 auto; }
.lp-header-search { display:flex; flex:1 1 auto; max-width:480px; margin:0 auto; background:#fff; border-radius:14px; box-shadow:0 6px 20px rgba(0,0,0,.15); overflow:hidden; border:1px solid rgba(0,0,0,.06); }
.lp-header-search-input { flex:1 1 auto; border:none; outline:none; padding:0 18px; height:52px; font-size:15px; color:#222; background:transparent; width:100%; }
.lp-header-search-input::placeholder { color:#8a8a8a; }
.lp-header-search-btn { flex:0 0 auto; width:60px; height:52px; border:none; background:#071629; color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .15s ease; }
.lp-header-search-btn:hover { background:#050F1C; }
.lp-header-actions { display:flex; align-items:center; gap:12px; flex:0 0 auto; }
.lp-header-phone { display:flex; align-items:center; gap:8px; color:#fff; font-weight:700; font-size:15px; white-space:nowrap; }
.lp-header-phone:hover { color:#B6F542; }
/* .lp-header-wa kurali 2026-08-05'te SILINDI — markup'tan (header.php) kaldirildi. */
.lp-header-nav { background:#071629; border-top:1px solid rgba(255,255,255,.08); }
.lp-header-nav-inner { display:flex; justify-content:center; }
.lp-header-nav .lp-main-nav-list { display:flex; flex-wrap:nowrap; justify-content:center; gap:30px; list-style:none; margin:0; padding:0; min-height:50px; align-items:center; }
.lp-header-nav .lp-main-nav-list a { color:#fff; text-transform:none; font-size:15px; font-weight:600; white-space:nowrap; letter-spacing:0; padding:14px 0; display:inline-block; transition:color .15s ease; }
.lp-header-nav .lp-main-nav-list a:hover { color:#B6F542; }
@media (max-width:1024px){
  .lp-header-search { display:none; }
  .lp-header-nav { display:none; }
  .lp-header-top-inner { min-height:64px; gap:12px; padding:8px 0; }
  .lp-header-phone { display:none; }
}

/* PL-HEADER-COMPACT (masaustu: kompakt ust satir + tek-kenarli arama + esit dagilan nav) */
@media (min-width: 1025px) {
  .lp-header-top-inner { min-height: 60px !important; padding-top: 8px !important; padding-bottom: 8px !important; gap: 28px !important; }
  .lp-header-search { display: flex !important; align-items: stretch !important; height: 46px !important; max-width: 440px !important; padding: 0 !important; border: 1px solid #CFD8DC !important; border-radius: 8px !important; box-shadow: none !important; background: #fff !important; overflow: hidden !important; }
  .lp-header-search:focus-within { border-color: #0066E4 !important; box-shadow: 0 0 0 3px rgba(0,102,228,.15) !important; }
  .lp-header-search-input { flex: 1 1 auto !important; border: none !important; border-radius: 0 !important; height: 100% !important; box-shadow: none !important; background: transparent !important; padding: 0 16px !important; font-size: 15px !important; }
  .lp-header-search-input:focus { outline: none !important; box-shadow: none !important; }
  .lp-header-search-btn { flex: 0 0 auto !important; width: 52px !important; height: 100% !important; border: none !important; border-radius: 0 !important; background: #04408F !important; color: #fff !important; }
  .lp-header-nav-inner { max-width: 1180px !important; }
  .lp-main-nav-list { display: flex !important; width: 100% !important; justify-content: space-between !important; gap: 0 !important; }
}

/* =====================================================================
   25. HEADER TELEFON BUTONU — SADECE MASAUSTU (2026-08-05)
   ---------------------------------------------------------------------
   Sag ust artik "cizgi ikon + numara" degil, DOLGU TURUNCU BUTON
   (var(--cta) #FE5F10). Yanindaki WhatsApp ikonu (.lp-header-wa)
   markup'tan kaldirildi, boylece tek ve net bir aksiyon kaliyor.

   NEDEN BU BLOK DOSYANIN SONUNDA:
   Yukaridaki "24. EK CSS'TEN GOC" blogu, eskiden Customizer Ek CSS'te
   duran ve kaskatta EN SONDA yuklenen kurallarin birebir kopyasi
   (bkz. CLAUDE.md 7.8). `.lp-header-phone` icin orada iki kural var
   (PL-NAV-PREMIUM satir ~4655 ve PL-HEADER-2ROW satir ~4674). Ayni
   ozgullukte olduklari icin bunlari ezmenin tek temiz yolu DAHA SONRA
   gelmek. Bu blogu goc blogunun ONUNE tasimayin — buton rengi sessizce
   beyaza doner.

   NEDEN SADECE MASAUSTU:
   Mobilde (<=1025px) `.lp-header-phone` iki ayri yerde gizleniyor
   (satir ~2487 `display:none !important` ve ~4688). Mobil sag ustteki
   CALAN telefon butonu AYRI bir eleman: `.lp-call-mobile`. Bu blok
   ona HIC dokunmuyor — media sorgusu disina tasirmayin.

   PADDING/RADIUS NEDEN ACIKCA YAZILDI:
   Dosyanin basindaki eski kural (satir ~486) hala olu DEGIL: display
   ve font-size'i sonraki kurallar eziyor ama `min-height:48px`,
   `padding:0 12px` ve `border-radius:var(--radius-btn)` oradan
   geliyordu. Buton olcusu artik tek yerden okunsun diye ucu de burada
   yeniden tanimlaniyor.
   ===================================================================== */
@media (min-width: 1025px) {
	.lp-header-phone {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		min-height: 0;
		padding: 10px 18px;
		background: var(--cta);
		color: #fff;
		font-size: 15px;
		font-weight: 700;
		line-height: 1.2;
		border-radius: 8px;
		white-space: nowrap;
		transition: background .15s ease;
	}
	/* Hover, `.lp-btn-cta` ile ayni koyulasma (satir ~198). Metin/ikon beyaz
	   kalir — goc blogundaki `:hover { color:#B6F542 }` burada geri alinir. */
	.lp-header-phone:hover,
	.lp-header-phone:focus-visible {
		background: #EC6608;
		color: #fff;
	}
	.lp-header-phone:focus-visible {
		outline: 2px solid #fff;
		outline-offset: 2px;
	}
	.lp-header-phone-text { color: #fff; }
}

/* =====================================================================
   26. NAVBAR "LASTİK KATEGORİLERİ" — MASAÜSTÜ DROPDOWN + MOBİL ACCORDION
   (2026-08-05)
   ---------------------------------------------------------------------
   İçerik: katalogda GERÇEKTEN VAR OLAN 4 araç tipi (Binek / 4x4 / C /
   Kamyon — CLAUDE.md §4.1). Motosiklet/off-road/elektrikli araç gibi
   maddeler BİLEREK yok; feed'de o carType'lar hiç gelmiyor, menüye
   konsalardı tıklayan kullanıcı boş sonuç görürdü.

   NEDEN BU BLOK DOSYANIN SONUNDA (25. bölümle AYNI gerekçe):
   Yukarıdaki "24. EK CSS'TEN GÖÇ" bloğunda `.lp-header-nav
   .lp-main-nav-list a` (satır ~4901) ve `.lp-mobile-nav-list a`
   (satır ~2741) kuralları duruyor. Dropdown/alt-menü bağlantılarım AYNI
   ya da bir tık daha yüksek özgüllükte; renk/padding/display'i temiz
   biçimde ezmenin tek yolu DAHA SONRA gelmek. Bu bloğu yukarı taşırsanız
   panel bağlantıları beyaz metin + 14px dikey padding'e döner
   (beyaz zeminde okunamaz).

   ⚠ `.lp-main-nav-list { justify-content: space-between }` (PL-HEADER-COMPACT,
   satır ~4920) BOZULMAMALI: burada listeye ya da onun `gap`/`justify-content`
   değerlerine HİÇ dokunulmuyor — sadece İLK `<li>` konumlandırma bağlamı
   (`position: relative`) alıyor ve nav satırının tam yüksekliğine uzatılıyor
   (`align-self: stretch`). İkincisi kozmetik değil: panel `top: 100%` ile
   `<li>`nin ALTINA açılıyor; `<li>` nav'dan kısa kalsaydı imleç aşağı
   inerken araya boşluk girer ve panel hover'dan düşerdi.
   ===================================================================== */

/* ---- 26.1 Masaüstü açılır panel (≥1025px) — JS YOK, saf hover/focus-within ---- */
@media (min-width: 1025px) {
	.lp-nav-has-dropdown {
		position: relative;
		display: flex;
		align-items: center;
		align-self: stretch;
	}

	.lp-header-nav .lp-main-nav-list .lp-nav-dropdown-toggle {
		display: inline-flex;
		align-items: center;
		gap: 6px;
	}
	.lp-nav-caret {
		display: inline-flex;
		line-height: 0;
		transition: transform .18s ease;
	}
	.lp-nav-has-dropdown:hover .lp-nav-caret,
	.lp-nav-has-dropdown:focus-within .lp-nav-caret { transform: rotate(180deg); }

	.lp-nav-dropdown-panel {
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 120;
		min-width: 272px;
		margin: 0;
		padding: 6px;
		list-style: none;
		background: #FFFFFF;
		border: 1px solid #DDE1E6;
		border-radius: 10px;
		box-shadow: var(--shadow-card-hover);
		/* `visibility` + `opacity` ikilisi (display:none DEĞİL): geçiş
		   animasyonu çalışsın ve kapalıyken panel içindeki bağlantılar
		   sekme sırasına GİRMESİN. */
		opacity: 0;
		visibility: hidden;
		transform: translateY(-6px);
		transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
	}
	.lp-nav-has-dropdown:hover > .lp-nav-dropdown-panel,
	.lp-nav-has-dropdown:focus-within > .lp-nav-dropdown-panel {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.lp-header-nav .lp-nav-dropdown-panel li { border: 0; }
	.lp-header-nav .lp-nav-dropdown-panel a {
		display: block;
		padding: 11px 14px;
		border-radius: 8px;
		color: var(--ink);
		font-size: 14px;
		font-weight: 600;
		line-height: 1.3;
		white-space: nowrap;
		transition: background-color .14s ease, color .14s ease;
	}
	.lp-header-nav .lp-nav-dropdown-panel a:hover,
	.lp-header-nav .lp-nav-dropdown-panel a:focus-visible {
		background: #EAF2FF;
		color: var(--brand-green);
	}
	.lp-header-nav .lp-nav-dropdown-panel a:focus-visible {
		outline: 2px solid var(--brand-green);
		outline-offset: -2px;
	}
}

/* ---- 26.2 Mobil drawer accordion (≤1024px) ----
   Tetikleyici `<button>`; `.lp-mobile-nav-list a` kuralları ona UYGULANMAZ,
   bu yüzden satır ölçüleri (58px, 0 18px, 16px/600) burada BİREBİR
   tekrarlanıyor — komşu satırlarla aynı görünsün diye. Durum tek kaynaktan
   okunur: `aria-expanded` (JS ayrıca sınıf eklemez). */
@media (max-width: 1024px) {
	.lp-mnav-toggle {
		display: flex;
		align-items: center;
		gap: 12px;
		width: 100%;
		height: 58px;
		min-height: 58px;
		padding: 0 18px;
		background: none;
		border: 0;
		font-family: inherit;
		font-size: 16px;
		font-weight: 600;
		color: #222222;
		text-align: left;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
		transition: background-color .15s ease;
	}
	.lp-mnav-toggle:hover,
	.lp-mnav-toggle:active,
	.lp-mnav-toggle[aria-expanded="true"] { background: #EAF2FF; }
	.lp-mnav-toggle:focus-visible {
		outline: 3px solid var(--brand-green);
		outline-offset: -3px;
	}

	.lp-mnav-icon--cats { background: #EAF2FF; color: var(--brand-green); }

	.lp-mnav-chevron {
		flex: 0 0 auto;
		display: flex;
		align-items: center;
		color: #6B7280;
		transition: transform .2s ease;
	}
	.lp-mnav-toggle[aria-expanded="true"] .lp-mnav-chevron { transform: rotate(180deg); }

	.lp-mnav-sub {
		list-style: none;
		margin: 0;
		padding: 0;
		background: #F8F9FA;
	}
	/* `hidden` özniteliği tek kapatma mekanizması — tarayıcı varsayılanı
	   burada AÇIKÇA tekrarlanıyor ki ileride `.lp-mnav-sub`a bir `display`
	   verilirse gizleme sessizce bozulmasın. */
	.lp-mnav-sub[hidden] { display: none; }

	.lp-mobile-nav-list .lp-mnav-sub li { border-bottom: 1px solid #E4E7EB; }
	.lp-mobile-nav-list .lp-mnav-sub li:last-child { border-bottom: none; }
	.lp-mobile-nav-list .lp-mnav-sub a {
		height: 52px;
		min-height: 52px;
		padding: 0 18px 0 30px;
		font-size: 15px;
		color: #333333;
	}
	.lp-mobile-nav-list .lp-mnav-sub a:hover,
	.lp-mobile-nav-list .lp-mnav-sub a:active,
	.lp-mobile-nav-list .lp-mnav-sub a:focus-visible { background: #E3EDFF; }

	.lp-mnav-sub .lp-mnav-icon {
		width: 30px;
		height: 30px;
		background: #FFFFFF;
		color: var(--brand-green);
	}
	.lp-mnav-sub .lp-mnav-icon svg { width: 18px; height: 18px; }
}

/* ===================== 27. SAYFA ALTI SEO MAKALESİ (kategori/filtre sayfaları) =====================
   `template-parts/product-results.php` 'seo_article' sözleşmesinin görsel katmanı.
   Blok `.lp-results-list` section'ının İÇİNDE basılır (grid `content` alanı) —
   ayrı/adsız section tuzağı yok (bkz. o dosyanın docblock'u).

   Daraltma mantığı: sunucu `is-collapsed` basar → gövde `max-height` ile kısılır,
   altta beyaza dönen gradyan fade + "Devamını Oku" butonu. İçeriğin TAMAMI ilk
   yüklemede DOM'dadır (SEO), CSS sadece GÖRÜNÜRLÜĞÜ sınırlar. Açılış animasyonu
   JS'te (`initSeoArticle`) inline max-height ile yapılır; `prefers-reduced-motion`
   varsa geçiş tamamen kapalıdır (projedeki diğer geçişlerle AYNI kural).
   Dosyanın SONUNDA olması 25/26. bölümlerle aynı gerekçe: `24. EK CSS'TEN GÖÇ`
   bloğundaki genel kuralları temiz ezmenin tek yolu daha sonra gelmek. */

.lp-seo-article {
	max-width: 860px;
	margin-top: 56px;
	padding-top: 36px;
	border-top: 1px solid #E4E7EB;
}

.lp-seo-article-title {
	margin: 0 0 14px;
	font-size: 26px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--ink, #181818);
}

.lp-seo-article-intro {
	margin: 0 0 10px;
	font-size: 16px;
	line-height: 1.7;
	color: #333333;
}

.lp-seo-article-body {
	position: relative;
	/* JS açılış/kapanışta inline max-height yazar; geçiş burada tanımlı ki
	   iki yön de aynı eğriyi kullansın. */
	transition: max-height 0.35s ease;
}

.lp-seo-article.is-collapsed .lp-seo-article-body {
	max-height: 230px;
	overflow: hidden;
}

/* Daraltılmış hâlde alt kenarda beyaza dönen fade — "devamı var" sinyali. */
.lp-seo-article.is-collapsed .lp-seo-article-body::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 90px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 92%);
	pointer-events: none;
}

.lp-seo-article-body h3 {
	margin: 26px 0 10px;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--ink, #181818);
}

.lp-seo-article-body p {
	margin: 0 0 14px;
	font-size: 15px;
	line-height: 1.75;
	color: #333333;
}

.lp-seo-article-body ul,
.lp-seo-article-body ol {
	margin: 0 0 14px;
	padding-left: 22px;
}

.lp-seo-article-body li {
	margin: 0 0 6px;
	font-size: 15px;
	line-height: 1.7;
	color: #333333;
}

.lp-seo-article-body a {
	color: var(--link, #3B5998);
	text-decoration: underline;
}

/* "Devamını Oku" / "Daha Az Göster" — 48px dokunma hedefi (mobil kabul kriteri). */
.lp-seo-article-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 48px;
	margin-top: 6px;
	padding: 0 22px;
	border: 2px solid var(--brand-green, #0066E4);
	border-radius: 10px;
	background: #FFFFFF;
	color: var(--brand-green, #0066E4);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.lp-seo-article-toggle:hover,
.lp-seo-article-toggle:focus-visible {
	background: var(--brand-green, #0066E4);
	color: #FFFFFF;
}

.lp-seo-article-toggle:focus-visible {
	outline: 3px solid rgba(0, 102, 228, 0.35);
	outline-offset: 2px;
}

.lp-seo-article-toggle-chevron {
	width: 10px;
	height: 10px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	transition: transform 0.2s ease;
}

.lp-seo-article-toggle[aria-expanded="true"] .lp-seo-article-toggle-chevron {
	transform: rotate(225deg) translateY(-2px);
}

@media (max-width: 767px) {
	.lp-seo-article {
		margin-top: 40px;
		padding-top: 28px;
	}

	.lp-seo-article-title { font-size: 22px; }
	.lp-seo-article-body h3 { font-size: 17px; }

	/* Mobilde daraltılmış pencere biraz daha kısa — liste zaten uzun. */
	.lp-seo-article.is-collapsed .lp-seo-article-body { max-height: 200px; }

	.lp-seo-article-toggle {
		width: 100%;
		justify-content: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lp-seo-article-body,
	.lp-seo-article-toggle,
	.lp-seo-article-toggle-chevron {
		transition: none;
	}
}

/* ===================== 28. BLOG (liste /blog/ + tekil yazı) =====================
   `home.php` (yazı listesi) + `single.php` (tekil yazı) görsel katmanı.
   Kart dili sitedeki diğer kartlarla aynı token'ları kullanır
   (--shadow-card-soft, --ink, --brand-green); içerik tipografisi 27. bölümdeki
   SEO makale gövdesiyle aynı okunabilirlik ölçülerinde. */

.lp-blog-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	margin-top: 8px;
}

@media (min-width: 768px) {
	.lp-blog-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}

@media (min-width: 1025px) {
	.lp-blog-grid { grid-template-columns: repeat(3, 1fr); }
}

.lp-blog-card {
	display: flex;
	flex-direction: column;
	padding: 22px;
	background: #FFFFFF;
	border: 1px solid #E4E7EB;
	border-radius: 12px;
	box-shadow: var(--shadow-card-soft, 0 2px 8px rgba(0, 0, 0, 0.06));
}

.lp-blog-card-title {
	margin: 0 0 8px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.35;
}

.lp-blog-card-title a {
	color: var(--ink, #181818);
	text-decoration: none;
}

.lp-blog-card-title a:hover,
.lp-blog-card-title a:focus-visible {
	color: var(--brand-green, #0066E4);
	text-decoration: underline;
}

.lp-blog-card-date {
	display: block;
	margin-bottom: 10px;
	font-size: 13px;
	color: #6B7280;
}

.lp-blog-card-excerpt {
	flex: 1 1 auto;
	margin: 0 0 14px;
	font-size: 14px;
	line-height: 1.65;
	color: #333333;
}

/* Kart CTA'sı — 48px dokunma hedefi (mobil kabul kriteri). */
.lp-blog-card-more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 48px;
	font-size: 14px;
	font-weight: 600;
	color: var(--brand-green, #0066E4);
	text-decoration: none;
}

.lp-blog-card-more:hover,
.lp-blog-card-more:focus-visible { text-decoration: underline; }

/* ---- Tekil yazı ---- */

.lp-blog-single .lp-container { max-width: 860px; }

.lp-blog-content {
	margin-top: 18px;
}

.lp-blog-content h2 {
	margin: 30px 0 12px;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--ink, #181818);
}

.lp-blog-content h3 {
	margin: 24px 0 10px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--ink, #181818);
}

.lp-blog-content p {
	margin: 0 0 14px;
	font-size: 15px;
	line-height: 1.75;
	color: #333333;
}

.lp-blog-content ul,
.lp-blog-content ol {
	margin: 0 0 14px;
	padding-left: 22px;
}

.lp-blog-content li {
	margin: 0 0 6px;
	font-size: 15px;
	line-height: 1.7;
	color: #333333;
}

.lp-blog-content a {
	color: var(--link, #3B5998);
	text-decoration: underline;
}

.lp-blog-content img {
	max-width: 100%;
	height: auto;
	border-radius: 10px;
}

.lp-blog-back { margin-top: 28px; }

.lp-blog-back a {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	font-size: 14px;
	font-weight: 600;
	color: var(--brand-green, #0066E4);
	text-decoration: none;
}

.lp-blog-back a:hover,
.lp-blog-back a:focus-visible { text-decoration: underline; }

/* ===================== 29. POPÜLER EBATLAR RAFI (anasayfa — 2026-08-05) =====================
   Eski gri `.lp-size-chip` pill'lerinin yerini alan yatay kayan kart rafı.
   Kaydırma promo slider'la (bölüm 23.5) AYNI teknik: CSS scroll-snap — parmakla
   kaydırma/momentum tarayıcıdan gelir, kütüphane YOK. JS (initSizeRail) yalnız
   masaüstü ok butonlarını scrollBy'a çevirir.

   - Oklar SADECE ≥1025px'te var ve raf hover/focus-within'indeyken belirir
     (mobil = dokunmatik kaydırma, promo banner'ın mobil davranışı).
   - Kart gradyanı marka mavisi tonlarında (var(--brand-green) #0066E4 → header
     koyusu #04408F) — "sakin, tek gradyan" kullanıcı isteği.
   - Bölüm padding'i kısıldı (`.lp-section--rail`): raf bir "hızlı kısayol
     şeridi", ağır içerik bloğu değil.
   - Kartın tamamı bağlantı (~104px yükseklik → 48px dokunma hedefi fazlasıyla
     karşılanır); "İncele" pill'i görsel parça, ayrı hedef değil. */

.lp-section--rail { padding: 26px 0 30px; }

.lp-size-rail { position: relative; }

.lp-size-rail-viewport {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-left: 2px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	/* Üst/alt 6px pay: hover'daki translateY(-3px) + gölge kırpılmasın. */
	padding: 6px 2px 10px;
}
.lp-size-rail-viewport::-webkit-scrollbar { display: none; }

.lp-size-card {
	flex: 0 0 150px;
	min-height: 104px;
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 14px;
	border-radius: 12px;
	background: linear-gradient(135deg, var(--brand-green, #0066E4) 0%, #04408F 100%);
	color: #FFFFFF;
	text-decoration: none;
	transition: transform .18s ease, box-shadow .18s ease;
}

.lp-size-card-label {
	font-size: 19px;
	font-weight: 800;
	letter-spacing: .2px;
	line-height: 1.15;
	color: #FFFFFF;
}

.lp-size-card-cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	align-self: flex-start;
	min-height: 30px;
	padding: 4px 12px;
	border-radius: var(--radius-pill, 999px);
	background: rgba(255, 255, 255, .14);
	border: 1px solid rgba(255, 255, 255, .5);
	font-size: 13px;
	font-weight: 600;
	color: #FFFFFF;
	transition: background-color .18s ease, color .18s ease;
}

.lp-size-card-arrow { font-size: 15px; line-height: 1; }

/* Hover yalnız gerçek imleçli cihazlarda (proje standardı — bkz. bölüm 9.1). */
@media (hover: hover) and (pointer: fine) {
	.lp-size-card:hover,
	.lp-size-card:focus-visible {
		transform: translateY(-3px);
		box-shadow: var(--shadow-card-hover, 0 10px 24px rgba(0, 0, 0, .16));
	}
	.lp-size-card:hover .lp-size-card-cta,
	.lp-size-card:focus-visible .lp-size-card-cta {
		background: #FFFFFF;
		color: var(--brand-green, #0066E4);
	}
}

.lp-size-card:active { transform: scale(.97); }

.lp-size-card:focus-visible {
	outline: 2px solid var(--brand-green, #0066E4);
	outline-offset: 2px;
}

/* Ok butonları: taban durumda YOK (mobil/tablet); ≥1025px'te var ama raf
   hover'ına/odağına kadar görünmez. `pointer-events: none` görünmezken kazara
   tıklamayı engeller; klavye odağı pointer-events'ten etkilenmez ve
   `:focus-within` okları görünür yapar. */
.lp-size-rail-arrow { display: none; }

@media (min-width: 1025px) {
	.lp-size-rail-arrow {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		z-index: 2;
		width: 44px;
		height: 44px;
		padding: 0;
		border-radius: 50%;
		border: 1px solid #D9D9D9;
		background: #FFFFFF;
		color: var(--ink, #181818);
		cursor: pointer;
		box-shadow: 0 4px 14px rgba(0, 0, 0, .14);
		opacity: 0;
		pointer-events: none;
		transition: opacity .18s ease, border-color .18s ease;
	}
	.lp-size-rail-arrow--prev { left: -14px; }
	.lp-size-rail-arrow--next { right: -14px; }

	.lp-size-rail:hover .lp-size-rail-arrow,
	.lp-size-rail:focus-within .lp-size-rail-arrow {
		opacity: 1;
		pointer-events: auto;
	}

	.lp-size-rail-arrow:hover { border-color: var(--ink, #181818); }
	.lp-size-rail-arrow:focus-visible {
		outline: 2px solid var(--brand-green, #0066E4);
		outline-offset: 2px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lp-size-card,
	.lp-size-card-cta,
	.lp-size-rail-arrow { transition: none; }
	.lp-size-card:hover,
	.lp-size-card:focus-visible,
	.lp-size-card:active { transform: none; }
}

/* ===================== 30. Filtre formu: otomatik gönderim geri bildirimi (Görev 3) =====================
   `initFilterAutoSubmit()` (parklastik.js) bir facet input'u değiştiğinde
   ~700ms sessiz beklemeye girer, sonra formu kendiliğinden gönderir. Bu
   bekleme boyunca `.lp-filter-form`'a `is-submitting` sınıfı eklenir —
   kullanıcı bir şey olduğunu görsün diye hafif bir görsel geri bildirim.
   Abartılmadı: liste yine okunur kalmalı (yalnız hafif opaklık düşüşü +
   bekleme imleci).

   BİLEREK dosyanın EN SONUNA eklendi: "24. EK CSS'TEN GÖÇ" ve sonrasındaki
   bloklar aynı özgüllükte kurallar içeriyor (bkz. CLAUDE.md §7.8) — bu
   kuralın onları temiz biçimde ezmesinin tek yolu daha sonra gelmek. Yukarı
   taşımayın. */
.lp-filter-form {
	transition: opacity .15s ease;
}
.lp-filter-form.is-submitting {
	/* pointer-events BİLEREK kapatılmadı: 700ms'lik bekleme sırasında
	   kullanıcı art arda birkaç kutu daha işaretleyebilmeli (her change
	   zamanlayıcıyı sıfırlar) — arayüzü kilitlemek bu davranışı kırardı. */
	opacity: .6;
	cursor: progress;
}

@media (prefers-reduced-motion: reduce) {
	.lp-filter-form.is-submitting { transition: none; }
}