/**
 * hortivon® marka görünümü — Porto üzerine.
 *
 * Referans düzenin (hortispares) mavi + turuncu şeması, hortivon® tonlarıyla.
 *
 * Palet:
 *   --hv-primary  #0E56B3  marka mavisi — başlık, bağlantı, birincil düğme
 *   --hv-deep     #0A4189  üst şerit ve alt bilgi zemini
 *   --hv-action   #F08A00  teklife ekle / harekete geçirici
 *   --hv-dark     #16222C  başlık metinleri
 *   --hv-muted    #5D6E7C  ikincil metin
 *   --hv-line     #DDE4EA  kenarlık
 *   --hv-surface  #F3F6F9  açık zemin
 */

:root {
	--hv-primary: #0E56B3;
	--hv-primary-dark: #0A4189;
	--hv-deep: #0A4189;
	--hv-soft: #E8F0FA;
	--hv-action: #F08A00;
	--hv-action-dark: #D67A00;
	--hv-dark: #16222C;
	--hv-muted: #5D6E7C;
	--hv-line: #DDE4EA;
	--hv-surface: #F3F6F9;
	--hv-body: #22313C;
	--hv-radius: 4px;
	--hv-shadow: 0 1px 3px rgba(22, 34, 44, .08);
	--hv-shadow-lg: 0 6px 24px rgba(22, 34, 44, .12);

	/*
	 * Önizlemeden taşınan adlar.
	 *
	 * Vitrin önizlemesi renkleri --bl / --ink / --mist / --slate / --amber
	 * diye adlandırıyor; temaya taşınan kurallar (makale sayfaları, kategori
	 * süzgeçleri, düğmeler, lightbox) o adları getirdi ama tanımları
	 * gelmedi. Sonuç: 35 kural renksiz çiziliyordu — düğmelerin zemini yok,
	 * kenarlıklar görünmez, başlıklar varsayılan siyah.
	 *
	 * Değerler birebir aynı olduğu için 35 kullanımı tek tek değiştirmek
	 * yerine takma ad tanımlıyoruz. Yeni kural yazarken kanonik adları
	 * (--hv-primary, --hv-dark, ...) kullanın; bunlar yalnızca taşınan
	 * kuralları ayakta tutuyor.
	 */
	--hv-blue: var(--hv-primary);
	--hv-ink: var(--hv-dark);
	--hv-mist: var(--hv-surface);
	--hv-slate: var(--hv-muted);
	--hv-amber: var(--hv-action);
}

/* ---------------------------------------------------------------- Temel */

body {
	color: var(--hv-body);
}

.hv-link {
	color: var(--hv-primary);
	font-weight: 600;
	text-decoration: none;
}

.hv-link:hover {
	color: var(--hv-primary-dark);
	text-decoration: underline;
}

.hv-sku {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12px;
	color: var(--hv-muted);
	letter-spacing: .02em;
}

.hv-unit,
.hv-brand {
	font-size: 12px;
	color: var(--hv-muted);
}

.hv-brand {
	text-transform: uppercase;
	letter-spacing: .06em;
	font-weight: 600;
}

/* ------------------------------------------------------------- Düğmeler */

.hv-btn-primary,
.button.hv-btn-primary {
	background: var(--hv-primary);
	border-color: var(--hv-primary);
	color: #fff;
	font-weight: 600;
	border-radius: var(--hv-radius);
}

.hv-btn-primary:hover,
.button.hv-btn-primary:hover {
	background: var(--hv-primary-dark);
	border-color: var(--hv-primary-dark);
	color: #fff;
}

/*
 * Bu sınıf yalnız renk veriyordu. Çıplak bir <a> üzerinde kullanılınca
 * öge satır içi kalıyor, turuncu zemin metnin satır kutusuna yapışıyor ve
 * yazı kutunun içinde kaymış görünüyordu. Düğme kutusunun kendisi burada.
 */
.hv-btn-action,
.button.hv-btn-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 11px 18px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	background: var(--hv-action);
	border: 1px solid var(--hv-action);
	border-radius: var(--hv-radius);
	color: #fff;
	cursor: pointer;
}

.hv-btn-action:hover,
.button.hv-btn-action:hover {
	background: var(--hv-action-dark);
	border-color: var(--hv-action-dark);
	color: #fff;
}

.hv-btn-ghost,
.button.hv-btn-ghost {
	background: transparent;
	border: 1px solid var(--hv-line);
	color: var(--hv-body);
	border-radius: var(--hv-radius);
}

.hv-btn-ghost:hover,
.button.hv-btn-ghost:hover {
	border-color: var(--hv-primary);
	color: var(--hv-primary);
	background: transparent;
}

/* --------------------------------------------- Teklife ekle (ürün kartı) */

.hv-quote-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
}

.hv-add-quote,
.button.hv-add-quote {
	background: var(--hv-action);
	border: 1px solid var(--hv-action);
	color: #fff;
	font-weight: 600;
	font-size: 13px;
	line-height: 1.2;
	padding: 9px 14px;
	border-radius: var(--hv-radius);
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease;
	width: 100%;
}

.hv-add-quote:hover {
	background: var(--hv-action-dark);
	border-color: var(--hv-action-dark);
	color: #fff;
}

.hv-add-quote.is-in-list {
	background: var(--hv-primary);
	border-color: var(--hv-primary);
}

.hv-add-quote.is-loading {
	opacity: .65;
	pointer-events: none;
}

.hv-add-quote--lg {
	font-size: 15px;
	padding: 13px 26px;
	width: auto;
}

.hv-qty-input,
.hv-qty-update {
	width: 68px;
	height: 42px;
	padding: 6px 8px;
	border: 1px solid var(--hv-line);
	border-radius: var(--hv-radius);
	text-align: center;
	font-size: 14px;
}

/* ------------------------------------------------------- Teklif sayacı */

.hv-quote-counter {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	background: var(--hv-action);
	color: #fff;
	border-radius: var(--hv-radius);
	font-weight: 600;
	font-size: 13px;
	text-decoration: none;
	white-space: nowrap;
}

.hv-quote-counter:hover,
.hv-quote-counter:focus {
	background: var(--hv-action-dark);
	color: #fff;
}

.hv-quote-counter__icon::before {
	content: "\f570";
	font-family: "Font Awesome 5 Free", "Font Awesome 6 Free";
	font-weight: 900;
}

.hv-quote-counter__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	background: rgba(255, 255, 255, .25);
	border-radius: 10px;
	font-size: 12px;
}

/* ------------------------------------------------------ Dil değiştirici */

.hv-lang {
	display: inline-flex;
	gap: 2px;
	align-items: center;
}

.hv-lang__item {
	padding: 3px 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	color: inherit;
	opacity: .6;
	text-decoration: none;
	border-radius: 3px;
}

.hv-lang__item.is-current,
.hv-lang__item:hover {
	opacity: 1;
	background: rgba(255, 255, 255, .12);
}

/* ------------------------------------------------------------- Izgaralar */

.hv-cat-grid,
.hv-machine-grid,
.hv-parts-grid,
.hv-brand-grid {
	display: grid;
	gap: 20px;
	margin: 24px 0 40px;
}

/*
 * Sütun sınıfı unutulursa ızgara tek sütuna düşüyor ve kartlar alt alta
 * diziliyordu — makine sayfasındaki 24 parça bunun yüzünden dikey bir
 * listeye dönüşmüştü. Sınıf yokken makul bir varsayılan veriyoruz.
 */
.hv-cat-grid:not([class*="hv-cols-"]),
.hv-machine-grid:not([class*="hv-cols-"]),
.hv-parts-grid:not([class*="hv-cols-"]),
.hv-brand-grid:not([class*="hv-cols-"]) {
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}

/*
 * Sütun sayıları. Önizlemede ana sayfa şeritleri geniş ekranda tek satır:
 * ürün grupları ve parçalar sekiz, makineler altı sütun. Burada yalnız
 * 2/3/4/6 tanımlıydı; 5 ve 8 sınıfları hiçbir kurala denk gelmediği için
 * ızgara varsayılana düşüyor ve şeritler iki satıra kırılıyordu.
 */
.hv-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hv-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hv-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hv-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.hv-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.hv-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.hv-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }

/*
 * Sekiz sütunda kart ~120 piksele iniyor; 20 piksellik boşluk ve normal
 * kart dolgusu bu genişlikte metni okunmaz yapıyor. Önizlemedeki sıkı
 * şerit ölçüleri.
 */
.hv-cols-8 { gap: 13px; }

.hv-cols-8 .hv-part-card__body,
.hv-cols-8 .hv-kart__bag { padding: 10px 11px 12px; }

.hv-cols-8 .hv-part-card h4,
.hv-cols-8 .hv-kart__ad { font-size: 11.8px; line-height: 1.3; }

.hv-cols-8 .hv-part-card__img img,
.hv-cols-8 .hv-kart img { max-width: 93%; max-height: 93%; }

/* Sıkışık şeritler önce kademe kademe iner — kart genişliği okunur kalsın. */
@media (max-width: 1400px) {
	.hv-cols-8 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.hv-cols-7 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.hv-cols-6 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 1100px) {
	.hv-cols-8 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.hv-cols-5, .hv-cols-6, .hv-cols-7 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 991px) {
	.hv-cols-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
	.hv-cols-3, .hv-cols-4, .hv-cols-5,
	.hv-cols-6, .hv-cols-7, .hv-cols-8 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Kategori kartı */

.hv-cat-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 10px;
	padding: 22px 16px;
	background: #fff;
	border: 1px solid var(--hv-line);
	border-radius: var(--hv-radius);
	text-decoration: none;
	color: var(--hv-dark);
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.hv-cat-card:hover {
	border-color: var(--hv-primary);
	box-shadow: var(--hv-shadow-lg);
	transform: translateY(-2px);
	color: var(--hv-dark);
}

.hv-cat-card__img img {
	max-height: 92px;
	width: auto;
}

.hv-cat-card__title {
	font-weight: 600;
	font-size: 15px;
	line-height: 1.35;
}

.hv-cat-card__count {
	font-size: 12px;
	color: var(--hv-muted);
}

/* Makine kartı */

.hv-machine-card,
.hv-part-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--hv-line);
	border-radius: var(--hv-radius);
	overflow: hidden;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.hv-machine-card:hover,
.hv-part-card:hover {
	border-color: var(--hv-primary);
	box-shadow: var(--hv-shadow-lg);
}

.hv-machine-card__img,
.hv-part-card__img {
	display: block;
	background: var(--hv-surface);
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.hv-machine-card__img img,
.hv-part-card__img img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.hv-machine-card__body,
.hv-part-card__body {
	padding: 14px 16px 16px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1;
}

.hv-machine-card h4,
.hv-part-card h4 {
	margin: 0;
	font-size: 15px;
	line-height: 1.35;
	font-weight: 600;
}

.hv-machine-card h4 a,
.hv-part-card h4 a {
	color: var(--hv-dark);
	text-decoration: none;
}

.hv-machine-card h4 a:hover,
.hv-part-card h4 a:hover {
	color: var(--hv-primary);
}

.hv-parts-count {
	font-size: 12px;
	color: var(--hv-primary);
	font-weight: 600;
}

.hv-part-card.is-highlight {
	border-color: var(--hv-action);
	box-shadow: 0 0 0 3px rgba(240, 122, 19, .2);
}

/* Marka kartı */

.hv-brand-card {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 88px;
	padding: 14px;
	background: #fff;
	border: 1px solid var(--hv-line);
	border-radius: var(--hv-radius);
	text-decoration: none;
}

.hv-brand-card:hover {
	border-color: var(--hv-primary);
}

.hv-brand-card img {
	max-height: 46px;
	width: auto;
	filter: grayscale(1);
	opacity: .75;
	transition: filter .15s ease, opacity .15s ease;
}

.hv-brand-card:hover img {
	filter: none;
	opacity: 1;
}

.hv-brand-card__text {
	font-weight: 700;
	color: var(--hv-dark);
	font-size: 14px;
}

/* ---------------------------------------------------------- Güven şeridi */

.hv-usp {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: var(--hv-line);
	border: 1px solid var(--hv-line);
	border-radius: var(--hv-radius);
	overflow: hidden;
	margin: 28px 0;
}

@media (max-width: 767px) {
	.hv-usp { grid-template-columns: repeat(2, 1fr); }
}

.hv-usp__item {
	background: #fff;
	padding: 20px 22px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.hv-usp__item strong {
	font-size: 15px;
	color: var(--hv-dark);
}

.hv-usp__item span {
	font-size: 13px;
	color: var(--hv-muted);
	line-height: 1.5;
}

/* -------------------------------------------------------- Makine seçici */

.hv-finder {
	background: var(--hv-surface);
	border: 1px solid var(--hv-line);
	border-radius: var(--hv-radius);
	padding: 26px;
	margin: 28px 0;
}

.hv-finder__head h3 {
	margin: 0 0 4px;
	font-size: 20px;
}

.hv-finder__head p {
	margin: 0;
	color: var(--hv-muted);
	font-size: 14px;
}

.hv-finder__controls {
	display: flex;
	gap: 14px;
	margin: 20px 0;
	flex-wrap: wrap;
}

.hv-finder__field {
	display: flex;
	flex-direction: column;
	gap: 5px;
	flex: 1 1 240px;
}

.hv-finder__field span {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--hv-muted);
}

.hv-finder__field select,
.hv-finder__field input {
	height: 44px;
	padding: 8px 12px;
	border: 1px solid var(--hv-line);
	border-radius: var(--hv-radius);
	background: #fff;
	font-size: 14px;
}

/*
 * Sonuçlar artık düz bir kart ızgarası değil, kategori blokları taşıyor;
 * ızgara alt seviyeye (.hv-fgroup__grid) indi.
 */
.hv-finder__results { display: block; }

.hv-finder__item {
	display: flex;
	gap: 12px;
	align-items: center;
	padding: 12px;
	background: #fff;
	border: 1px solid var(--hv-line);
	border-radius: var(--hv-radius);
	text-decoration: none;
	color: var(--hv-dark);
}

.hv-finder__item:hover {
	border-color: var(--hv-primary);
	color: var(--hv-dark);
}

.hv-finder__item[hidden] { display: none; }

.hv-finder__img img {
	width: 64px;
	height: 64px;
	object-fit: contain;
	background: var(--hv-surface);
	border-radius: 3px;
}

.hv-finder__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.hv-finder__text strong {
	font-size: 14px;
	line-height: 1.3;
}

.hv-finder__empty {
	margin: 18px 0 0;
	color: var(--hv-muted);
	font-size: 14px;
}

/* ------------------------------------------------------- Makine sayfası */

/* Ürün yan paneli.
   Makine ve parça sayfası aynı iskeleti kullanır: marka satırı (logosuyla),
   künye, eylemler, güvence listesi. Böylece iki sayfa arasında tek piksel
   hizalama farkı kalmaz. */
.hv-machine__lead { margin: 0 0 18px; }
.hv-machine__lead .hv-machine__title { margin: 0 0 5px; }
.hv-machine__lead .hv-machine__subtitle { margin: 0; }

.hv-buy {
	background: var(--hv-mist);
	border: 1px solid var(--hv-line);
	border-radius: var(--hv-radius);
	padding: 24px 26px;
	align-self: start;
}

/* Marka satırı — makine ve parça panelinde birebir aynı yükseklik. */
.hv-buy__brand {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	min-height: 34px;
	margin: 0 0 16px;
	padding: 0 0 15px;
	border-bottom: 1px solid var(--hv-line);
}

.hv-buy__lbl { color: var(--hv-muted); font-size: 13px; }

.hv-buy__bn {
	color: var(--hv-blue);
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	margin-right: auto;
}

.hv-buy__bn:hover { text-decoration: underline; }

/* Rozet zemini nötr: turuncu bir marka, altındaki turuncu düğmeyle
   karışıp ikinci bir düğme gibi okunmasın. Renk yalnızca yazıda. */
.hv-blogo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 12px;
	border-radius: 3px;
	flex: 0 0 auto;
	line-height: 1;
	border: 1px solid var(--hv-line);
	background: #fff;
}

.hv-blogo__t {
	font-weight: 800;
	font-size: 11.5px;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--bl);
	white-space: nowrap;
}

.hv-blogo--img {
	border: 0;
	background: none;
	padding: 0;
	width: auto;
	max-width: 158px;
	object-fit: contain;
}

.hv-blogo--hv {
	font-size: 15px;
	letter-spacing: -.01em;
	color: var(--hv-dark);
}

.hv-blogo--hv b { font-weight: 800; }
.hv-blogo--hv i { font-style: normal; font-weight: 300; }
.hv-blogo--hv sup { font-size: .5em; font-weight: 600; vertical-align: super; margin-left: 1px; }

.hv-buy__meta {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 0;
	margin: 0 0 18px;
	font-size: 14px;
}

.hv-buy__meta dt { color: var(--hv-muted); padding: 9px 20px 9px 0; border-bottom: 1px solid var(--hv-line); }
.hv-buy__meta dd { margin: 0; padding: 9px 0; border-bottom: 1px solid var(--hv-line); text-align: right; }

/* Panel içindeki eylemler tam genişlik: iki düğme de aynı hizada başlar biter. */
.hv-buy .button {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.hv-btn-amber { background: var(--hv-amber); color: #fff; }
.hv-btn-amber:hover { background: var(--hv-amber-deep, #D67A00); color: #fff; }
.hv-btn-blue { background: var(--hv-blue); color: #fff; letter-spacing: .02em; }
.hv-btn-blue:hover { background: var(--hv-blue-deep, #0A4189); color: #fff; }

.hv-buy__cap { font-size: 12.5px; color: var(--hv-muted); line-height: 1.55; margin: 9px 0 18px; }

.hv-buy__list { list-style: none; margin: 16px 0 0; padding: 16px 0 0; border-top: 1px solid var(--hv-line); }

.hv-buy__list li {
	position: relative;
	padding-left: 24px;
	font-size: 12.5px;
	line-height: 1.5;
	margin-bottom: 9px;
}

.hv-buy__list li:last-child { margin-bottom: 0; }

.hv-buy__list li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 5px;
	width: 11px;
	height: 6px;
	border-left: 2px solid var(--hv-blue);
	border-bottom: 2px solid var(--hv-blue);
	transform: rotate(-45deg);
}

.hv-buy__save { margin: 18px 0 0; padding: 15px 0 0; border-top: 1px solid var(--hv-line); }

/* ------------------------------------------------------- Bilgi merkezi */

/* Bilgi merkezi ızgarası: satırda sekiz konu.
   Otuz altı yazı beş satırda ve her kart görselini taşıyor. On sütunda kart
   123 piksele düşüyor ve görsel bandı sığmıyordu; sekizde 156 piksel kalıyor,
   görsel de başlık da rahat duruyor. Özet satır başına yirmi karaktere
   düştüğü için karta değil, kartın title'ına konuyor. */
.hv-posts { display: grid; grid-template-columns: repeat(8, 1fr); gap: 12px; }

@media (max-width: 1180px) { .hv-posts { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 900px)  { .hv-posts { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 640px)  { .hv-posts { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 440px)  { .hv-posts { grid-template-columns: repeat(2, 1fr); } }

.hv-post {
	position: relative;
	border: 1px solid var(--hv-line);
	border-radius: var(--hv-radius);
	background: #fff;
	overflow: hidden;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.hv-post:hover, .hv-post:focus-within {
	border-color: var(--hv-blue);
	box-shadow: 0 2px 10px rgba(14, 86, 179, .10);
}

.hv-post__link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }

.hv-post__i {
	background: var(--hv-blue-soft, #E8F0FA);
	aspect-ratio: 4 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	flex: 0 0 auto;
}

.hv-post__i img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hv-post__b { padding: 11px 11px 13px; display: flex; flex-direction: column; gap: 5px; flex: 1 1 auto; }

.hv-post__k {
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--hv-amber);
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Başlık dört satırda kırpılır: kart yükseklikleri ızgara boyunca eşit kalır. */
.hv-post__b h3 {
	margin: 0;
	font-size: 12.5px;
	font-weight: 650;
	line-height: 1.34;
	height: 5.36em;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	color: var(--hv-ink);
}

.hv-post:hover .hv-post__b h3 { color: var(--hv-blue); }
.hv-post__b p, .hv-post__go { display: none; }


.hv-kfilt { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }

.hv-kfilt__b {
	padding: 8px 16px;
	border: 1px solid var(--hv-line);
	background: #fff;
	color: var(--hv-ink);
	border-radius: 99px;
	text-decoration: none;
	font-weight: 600;
	font-size: 13px;
	line-height: 1.3;
}

.hv-kfilt__b:hover { border-color: var(--hv-blue); color: var(--hv-blue); }
.hv-kfilt__b.is-on { background: var(--hv-blue); border-color: var(--hv-blue); color: #fff; }

/* Tekil yazı.
   Üç sütun: yapışkan içindekiler, metin, eylem kartları. Tek sütunlu düzende
   metnin sağında yüzlerce piksellik boş bir alan kalıyordu; sayfa dağınık ve
   yarım görünüyordu. */
.hv-yazi { max-width: 1320px; margin: 0 auto; }

.hv-yazi__head { border-bottom: 1px solid var(--hv-line); padding-bottom: 22px; margin-bottom: 30px; }
.hv-yazi__meta { display: flex; align-items: center; gap: 14px; margin: 0 0 12px; }

.hv-yazi__k {
	padding: 5px 13px;
	border-radius: 99px;
	border: 1px solid var(--hv-line);
	background: var(--hv-mist);
	color: var(--hv-amber);
	text-decoration: none;
	font-weight: 700;
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.hv-yazi__k:hover { border-color: var(--hv-amber); color: var(--hv-amber); }
.hv-yazi__sure { font-size: 12.5px; color: var(--hv-muted); }
.hv-yazi__sure::before { content: "\00B7"; margin-right: 14px; color: var(--hv-line); }

.hv-yazi__head h1 { font-size: 32px; line-height: 1.2; letter-spacing: -.015em; margin: 0 0 11px; max-width: 28ch; }
.hv-yazi__d { color: var(--hv-muted); font-size: 15px; line-height: 1.58; margin: 0; max-width: 68ch; }

.hv-yazi__wrap {
	display: grid;
	grid-template-columns: 216px minmax(0, 1fr) 268px;
	gap: 44px;
	align-items: start;
}

/* İçindekiler — okurken kaybolmamak için sayfayla birlikte gider. */
.hv-yazi__toc { position: sticky; top: 112px; }
.hv-yazi__toc-in { border-left: 2px solid var(--hv-line); padding-left: 16px; }

.hv-yazi__toc h2 {
	font-weight: 700;
	font-size: 11px;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--hv-muted);
	margin: 0 0 12px;
}

.hv-yazi__toc ol { list-style: none; counter-reset: toc; margin: 0; padding: 0; }
.hv-yazi__toc li { counter-increment: toc; margin-bottom: 10px; }

.hv-yazi__toc a {
	display: block;
	font-size: 13px;
	line-height: 1.4;
	color: var(--hv-muted);
	text-decoration: none;
	padding-left: 22px;
	position: relative;
}

.hv-yazi__toc a::before {
	content: counter(toc);
	position: absolute;
	left: 0;
	top: 0;
	font-weight: 600;
	font-size: 11px;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	color: var(--hv-line);
}

.hv-yazi__toc a:hover, .hv-yazi__toc a:hover::before { color: var(--hv-blue); }

.hv-yazi__body { font-size: 14.5px; line-height: 1.78; color: var(--hv-ink); max-width: 74ch; }

/* Kısa cevap — okuyucu üç saniyede aradığını bulsun. */
.hv-yazi__ozet { background: var(--hv-blue-soft, #E8F0FA); border-radius: 6px; padding: 20px 24px; margin: 0 0 32px; }

.hv-yazi__ozet h2 {
	font-weight: 700;
	font-size: 11px;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--hv-blue);
	margin: 0 0 8px;
	border: 0;
	padding: 0;
}

.hv-yazi__ozet p { margin: 0; font-size: 13.5px; line-height: 1.62; color: var(--hv-ink); }

/* Her başlıkta çizgi çekmek sayfayı defter kağıdına çeviriyordu; ayrımı
   boşluk ve punto yapıyor. */
.hv-yazi__body h2 {
	font-size: 21px;
	font-weight: 700;
	line-height: 1.3;
	margin: 38px 0 12px;
	letter-spacing: -.01em;
	scroll-margin-top: 120px;
	border: 0;
	padding: 0;
}

.hv-yazi__body h2:first-of-type { margin-top: 0; }
.hv-yazi__body h3 { font-size: 15px; font-weight: 600; margin: 24px 0 7px; }
.hv-yazi__body p { margin: 0 0 16px; }
.hv-yazi__body ul, .hv-yazi__body ol { margin: 0 0 18px; padding-left: 24px; }
.hv-yazi__body li { margin-bottom: 9px; padding-left: 4px; }
.hv-yazi__body li::marker { color: var(--hv-blue); }
.hv-yazi__body .mtable { margin: 6px 0 20px; font-size: 13px; }

.hv-yazi__body .note {
	margin: 34px 0 0;
	padding: 15px 19px;
	background: var(--hv-mist);
	border-left: 3px solid var(--hv-amber);
	border-radius: 0 4px 4px 0;
	font-size: 12.5px;
	color: var(--hv-muted);
	line-height: 1.65;
}

/* Önceki / sonraki — okuyucu aynı kategoride kalır. */
.hv-yazi__gez {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin: 44px 0 0;
	padding-top: 26px;
	border-top: 1px solid var(--hv-line);
}

.hv-yazi__gez-b {
	display: flex;
	flex-direction: column;
	gap: 5px;
	align-items: flex-start;
	text-align: left;
	padding: 15px 17px;
	border: 1px solid var(--hv-line);
	border-radius: var(--hv-radius);
	background: #fff;
	color: var(--hv-ink);
	text-decoration: none;
}

.hv-yazi__gez-b:hover { border-color: var(--hv-blue); background: var(--hv-mist); }

.hv-yazi__gez-b span {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--hv-muted);
}

.hv-yazi__gez-b strong { font-size: 14px; font-weight: 600; line-height: 1.35; }
.hv-yazi__gez-b--n { text-align: right; align-items: flex-end; }

.hv-yazi__yan { position: sticky; top: 112px; display: flex; flex-direction: column; gap: 14px; }
.hv-yazi__kart { border: 1px solid var(--hv-line); border-radius: 6px; background: var(--hv-mist); padding: 20px; }
.hv-yazi__kart--cta { background: #fff; }
.hv-yazi__kart h3 { margin: 0 0 7px; font-size: 14.5px; }
.hv-yazi__kart p { margin: 0 0 15px; font-size: 13px; color: var(--hv-muted); line-height: 1.55; }
.hv-yazi__kart .button { width: 100%; display: flex; align-items: center; justify-content: center; }

@media (max-width: 1200px) {
	.hv-yazi__wrap { grid-template-columns: minmax(0, 1fr) 268px; gap: 36px; }
	.hv-yazi__toc { display: none; }
}

@media (max-width: 900px) {
	.hv-yazi__wrap { grid-template-columns: 1fr; gap: 28px; }
	.hv-yazi__yan { position: static; flex-direction: row; }
	.hv-yazi__yan .hv-yazi__kart { flex: 1 1 0; min-width: 0; }
}

@media (max-width: 640px) {
	.hv-yazi__head h1 { font-size: 24px; max-width: none; }
	.hv-yazi__d { font-size: 14px; }
	.hv-yazi__body { font-size: 14px; }
	.hv-yazi__body h2 { font-size: 18px; margin-top: 30px; }
	.hv-yazi__gez { grid-template-columns: 1fr; }
	.hv-yazi__gez-b--n { text-align: left; align-items: flex-start; }
	.hv-yazi__yan { flex-direction: column; }
}

/* Ana kategori girişi — referanstaki "Go directly to" bloğu. */
.hv-cat-tail { font-weight: 300; color: var(--hv-muted); }
.hv-cat-intro { max-width: 82ch; color: var(--hv-muted); line-height: 1.7; margin: 14px 0 0; font-size: 15px; }
.hv-catjump { margin: 20px 0 26px; }
.hv-catjump__h { font-size: 14px; font-weight: 700; margin: 0 0 12px; color: var(--hv-dark); }
.hv-catjump__row { display: flex; flex-wrap: wrap; gap: 12px; }

.hv-catjump__b {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 220px;
	padding: 13px 22px;
	background: var(--hv-blue);
	color: #fff;
	border-radius: var(--hv-radius);
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	text-align: center;
	line-height: 1.3;
}

.hv-catjump__b:hover { background: var(--hv-blue-deep, #0A4189); color: #fff; }

@media (max-width: 640px) {
	.hv-catjump__row { display: grid; grid-template-columns: 1fr; gap: 9px; }
	.hv-catjump__b { min-width: 0; width: 100%; }
}


.hv-machine__head {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 40px;
	margin-bottom: 40px;
}

@media (max-width: 991px) {
	.hv-machine__head { grid-template-columns: 1fr; gap: 26px; }
}

.hv-machine__main-img {
	background: var(--hv-surface);
	border: 1px solid var(--hv-line);
	border-radius: var(--hv-radius);
	padding: 24px;
	text-align: center;
}

.hv-machine__main-img img {
	max-height: 460px;
	width: auto;
	object-fit: contain;
}

.hv-machine__thumbs {
	display: flex;
	gap: 8px;
	margin-top: 10px;
	flex-wrap: wrap;
}

.hv-thumb {
	width: 72px;
	height: 72px;
	padding: 4px;
	background: #fff;
	border: 1px solid var(--hv-line);
	border-radius: 3px;
	cursor: pointer;
}

.hv-thumb.is-active,
.hv-thumb:hover {
	border-color: var(--hv-primary);
}

.hv-thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.hv-machine__brand {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--hv-primary);
	text-decoration: none;
	margin-bottom: 6px;
}

.hv-machine__title {
	margin: 0 0 6px;
	font-size: 30px;
	line-height: 1.2;
	color: var(--hv-dark);
}

.hv-machine__subtitle {
	color: var(--hv-muted);
	font-size: 15px;
	margin-bottom: 18px;
}

.hv-machine__meta,
.hv-part-meta,
.hv-specs {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 22px;
	font-size: 14px;
}

.hv-machine__meta th,
.hv-part-meta th,
.hv-specs th {
	text-align: left;
	font-weight: 600;
	color: var(--hv-muted);
	padding: 9px 0;
	width: 42%;
	border-bottom: 1px solid var(--hv-line);
	vertical-align: top;
}

.hv-machine__meta td,
.hv-part-meta td,
.hv-specs td {
	padding: 9px 0;
	border-bottom: 1px solid var(--hv-line);
	color: var(--hv-dark);
}

.hv-machine__actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: center;
}

/*
 * Yan paneldeki "Makinelerime ekle" tasarımda çerçeveli bir düğme değil,
 * simgeli düz bir satır. Çerçeveli hâli mavi teklif düğmesiyle yarışıyor
 * ve panelde iki eşit ağırlıkta düğme gibi duruyordu.
 */
.hv-save-machine {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	width: 100%;
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--hv-primary);
	cursor: pointer;
	text-align: left;
}

.hv-save-machine svg { width: 19px; height: 19px; flex: 0 0 19px; }

.hv-save-machine:hover { color: var(--hv-primary-deep, #0b4fa8); }

.hv-save-machine.is-saved { color: #047857; }

/* Yan panelden parça ızgarasına giden satır. */
.hv-buy__parts {
	display: flex;
	align-items: center;
	gap: 9px;
	width: 100%;
	padding: 11px 0;
	border-bottom: 1px solid var(--hv-line);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--hv-primary);
	text-decoration: none;
}

.hv-buy__parts:hover { color: var(--hv-ink, #0f172a); }

.hv-buy__parts svg { width: 19px; height: 19px; flex: 0 0 19px; color: var(--hv-amber, #f59e0b); }

.hv-buy__parts span { flex: 1; min-width: 0; }

.hv-buy__parts b {
	font-family: var(--hv-mono, "IBM Plex Mono", monospace);
	font-size: 11.5px;
	font-weight: 700;
	line-height: 1;
	color: var(--hv-muted);
	background: var(--hv-mist, #f1f5f9);
	border-radius: 20px;
	padding: 5px 9px;
}

/* Doküman sekmesi boşken. */
.hv-docs__bos { font-size: 13.5px; color: var(--hv-muted); line-height: 1.6; max-width: 62ch; }

.hv-docs__bos a { margin-left: 4px; font-weight: 600; }

/* Sekmeler */

.hv-tabs {
	margin: 0 0 44px;
}

.hv-tabs__nav {
	display: flex;
	gap: 0;
	border-bottom: 2px solid var(--hv-line);
	flex-wrap: wrap;
}

.hv-tabs__btn {
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	margin-bottom: -2px;
	padding: 12px 20px;
	font-size: 14px;
	font-weight: 600;
	color: var(--hv-muted);
	cursor: pointer;
}

.hv-tabs__btn.is-active {
	color: var(--hv-primary);
	border-bottom-color: var(--hv-primary);
}

.hv-tabs__panel {
	display: none;
	padding: 26px 0 0;
}

.hv-tabs__panel.is-active {
	display: block;
}

.hv-docs {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
}

.hv-docs li {
	border-bottom: 1px solid var(--hv-line);
}

.hv-docs a {
	display: block;
	padding: 11px 0 11px 26px;
	position: relative;
	color: var(--hv-body);
	text-decoration: none;
	font-size: 14px;
}

.hv-docs a::before {
	content: "PDF";
	position: absolute;
	left: 0;
	top: 12px;
	font-size: 9px;
	font-weight: 700;
	color: #fff;
	background: var(--hv-muted);
	padding: 2px 4px;
	border-radius: 2px;
}

.hv-docs a:hover {
	color: var(--hv-primary);
}

.hv-videos {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

@media (max-width: 767px) { .hv-videos { grid-template-columns: 1fr; } }

.hv-video iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
}

/* Patlatılmış görünüm */

.hv-exploded {
	margin: 0 0 44px;
}

.hv-exploded__hint {
	color: var(--hv-muted);
	font-size: 14px;
}

.hv-exploded__stage {
	position: relative;
	display: inline-block;
	max-width: 100%;
	background: var(--hv-surface);
	border: 1px solid var(--hv-line);
	border-radius: var(--hv-radius);
}

.hv-exploded__img {
	display: block;
	max-width: 100%;
	height: auto;
}

.hv-hotspot {
	position: absolute;
	transform: translate(-50%, -50%);
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 2px solid #fff;
	background: var(--hv-action);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}

.hv-hotspot:hover,
.hv-hotspot.is-active {
	background: var(--hv-primary);
	transform: translate(-50%, -50%) scale(1.15);
}

/* Parça bölümü */

.hv-machine-parts__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	border-bottom: 2px solid var(--hv-line);
	padding-bottom: 10px;
}

.hv-machine-parts__head h2 {
	margin: 0;
	font-size: 20px;
}

/* -------------------------------------------------------- Teklif listesi */

.hv-quote-list {
	margin: 24px 0 40px;
}

table.hv-quote-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

table.hv-quote-table th {
	text-align: left;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--hv-muted);
	padding: 10px 12px;
	border-bottom: 2px solid var(--hv-line);
}

table.hv-quote-table td {
	padding: 14px 12px;
	border-bottom: 1px solid var(--hv-line);
	vertical-align: middle;
}

table.hv-quote-table .hv-col-img { width: 76px; }
table.hv-quote-table .hv-col-img img { width: 60px; height: 60px; object-fit: contain; background: var(--hv-surface); }
table.hv-quote-table .hv-col-qty { width: 100px; }
table.hv-quote-table .hv-col-act { width: 48px; text-align: right; }

table.hv-quote-table .hv-col-name a {
	color: var(--hv-dark);
	font-weight: 600;
	text-decoration: none;
	display: block;
}

table.hv-quote-table .hv-col-name a:hover { color: var(--hv-primary); }

.hv-remove-item {
	background: none;
	border: 0;
	font-size: 22px;
	line-height: 1;
	color: var(--hv-muted);
	cursor: pointer;
	padding: 4px 8px;
}

.hv-remove-item:hover { color: #c0392b; }

.hv-quote-list__foot {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-top: 24px;
	flex-wrap: wrap;
}

.hv-quote-note {
	margin-top: 16px;
	font-size: 13px;
	color: var(--hv-muted);
	background: var(--hv-surface);
	border-left: 3px solid var(--hv-primary);
	padding: 12px 16px;
}

/* ----------------------------------------------------------- Teklif formu */

.hv-quote-form-wrap {
	max-width: 720px;
}

.hv-quote-summary {
	background: var(--hv-surface);
	border: 1px solid var(--hv-line);
	border-radius: var(--hv-radius);
	padding: 18px 20px;
	margin-bottom: 26px;
}

.hv-quote-summary h4 { margin: 0 0 10px; font-size: 15px; }

.hv-quote-summary-list {
	list-style: none;
	margin: 0 0 10px;
	padding: 0;
	font-size: 13px;
}

.hv-quote-summary-list li {
	display: flex;
	gap: 10px;
	padding: 5px 0;
	border-bottom: 1px solid var(--hv-line);
}

.hv-quote-summary-list .hv-name { flex: 1; }

.hv-field-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}

@media (max-width: 575px) { .hv-field-grid { grid-template-columns: 1fr; } }

.hv-field--full { grid-column: 1 / -1; }

.hv-field {
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin: 0;
}

.hv-field label {
	font-size: 13px;
	font-weight: 600;
	color: var(--hv-dark);
}

.hv-field .req { color: #c0392b; }

.hv-field input,
.hv-field textarea,
.hv-field select {
	width: 100%;
	border: 1px solid var(--hv-line);
	border-radius: var(--hv-radius);
	padding: 11px 13px;
	font-size: 14px;
	background: #fff;
	color: var(--hv-dark);
	font-family: inherit;
}

.hv-field input:focus,
.hv-field textarea:focus,
.hv-field select:focus {
	outline: none;
	border-color: var(--hv-primary);
	box-shadow: 0 0 0 3px rgba(14, 86, 179, .12);
}

/* Seçim kutusu, metin alanlarıyla aynı yükseklik ve çerçevede dursun. */
.hv-field select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' fill='none'%3E%3Cpath d='m1 1 4.5 4.5L10 1' stroke='%235D6E7C' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 13px center;
	padding-right: 34px;
	cursor: pointer;
}

.hv-field [data-hv-city-wrap] { display: block; }

.hv-hp { position: absolute; left: -9999px; }

.hv-submit { margin-top: 22px; }

.hv-form-note {
	font-size: 12px;
	color: var(--hv-muted);
	margin-top: 12px;
}

.hv-notice {
	padding: 16px 20px;
	border-radius: var(--hv-radius);
	margin-bottom: 24px;
}

.hv-notice--success {
	background: #E8F0FA;
	border-left: 3px solid var(--hv-primary);
}

.hv-notice--success h3 { margin: 0 0 6px; font-size: 17px; color: var(--hv-primary); }

.hv-notice--error {
	background: #fdeeec;
	border-left: 3px solid #c0392b;
	color: #8e2a1e;
}

.hv-notice--error ul { margin: 0; padding-left: 18px; }

/* ------------------------------------------------------------ Boş durum */

.hv-empty {
	text-align: center;
	padding: 48px 24px;
	background: var(--hv-surface);
	border: 1px dashed var(--hv-line);
	border-radius: var(--hv-radius);
}

.hv-empty h3 { margin: 0 0 8px; }

.hv-empty p { color: var(--hv-muted); margin-bottom: 14px; }

/* ------------------------------------------------------------ Makinelerim */

.hv-my-machines {
	display: grid;
	gap: 14px;
}

.hv-my-machine {
	display: flex;
	gap: 16px;
	padding: 16px;
	border: 1px solid var(--hv-line);
	border-radius: var(--hv-radius);
	background: #fff;
}

.hv-my-machine__img img {
	width: 96px;
	height: 96px;
	object-fit: contain;
	background: var(--hv-surface);
}

.hv-my-machine__body h4 { margin: 0 0 4px; font-size: 16px; }

.hv-my-machine .hv-model { color: var(--hv-muted); font-size: 13px; margin-bottom: 10px; }

.hv-my-machine .hv-actions { display: flex; gap: 10px; align-items: center; margin: 0; }

/* --------------------------------------------------------- Arşiv başlığı */

.hv-archive-head {
	margin-bottom: 26px;
}

.hv-archive-head h1 { margin: 0 0 6px; font-size: 28px; }

.hv-archive-head p { color: var(--hv-muted); margin: 0; }

/* ------------------------------------------------------------ Bildirimler */

.hv-toast {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 9999;
	background: var(--hv-dark);
	color: #fff;
	padding: 14px 20px;
	border-radius: var(--hv-radius);
	box-shadow: var(--hv-shadow-lg);
	font-size: 14px;
	display: flex;
	align-items: center;
	gap: 14px;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity .2s ease, transform .2s ease;
}

.hv-toast.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.hv-toast a {
	color: #fff;
	text-decoration: underline;
	font-weight: 600;
	white-space: nowrap;
}

.hv-toast--error { background: #a5301f; }

/* ------------------------------------------- Porto e-ticaret izlerini gizle */

.woocommerce-cart-form,
.woocommerce-checkout,
.cart-collaterals,
.product .cart,
.woocommerce-variation-add-to-cart,
.porto-compare,
.yith-wcwl-add-to-wishlist,
.quickview,
.woocommerce-result-count .price,
.wc-block-components-product-price {
	display: none !important;
}


/* ------------------------------------------------------------ Markalar */

.hv-brands__intro {
	max-width: 68ch;
	color: var(--hv-muted);
	font-size: 15px;
	margin-bottom: 22px;
}

.hv-alphabet {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 32px;
}

.hv-alphabet__i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 34px;
	padding: 0 7px;
	border: 1px solid var(--hv-line);
	border-radius: var(--hv-radius);
	font-size: 13px;
	font-weight: 600;
	color: var(--hv-primary);
	text-decoration: none;
	background: #fff;
}

.hv-alphabet__i:hover {
	background: var(--hv-primary);
	border-color: var(--hv-primary);
	color: #fff;
}

.hv-alphabet__i.is-off {
	color: var(--hv-line);
	background: var(--hv-surface);
	pointer-events: none;
}

.hv-brands__group {
	margin-bottom: 34px;
	scroll-margin-top: 90px;
}

.hv-brands__letter {
	font-size: 17px;
	margin: 0 0 12px;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--hv-line);
	color: var(--hv-dark);
}

/* ------------------------------------------------------------ İletişim */

.hv-contact {
	border: 1px solid var(--hv-line);
	border-radius: var(--hv-radius);
	background: #fff;
	padding: 22px 24px;
	max-width: 520px;
}

.hv-contact dl {
	display: grid;
	grid-template-columns: 140px 1fr;
	gap: 10px 16px;
	margin: 0;
	font-size: 14px;
}

.hv-contact dt {
	color: var(--hv-muted);
	font-weight: 500;
}

.hv-contact dd {
	margin: 0;
	color: var(--hv-dark);
}

.hv-contact a {
	color: var(--hv-primary);
	font-weight: 500;
	text-decoration: none;
}

.hv-contact a:hover {
	text-decoration: underline;
}

@media (max-width: 520px) {
	.hv-contact dl { grid-template-columns: 1fr; gap: 3px 0; }
	.hv-contact dt { margin-top: 10px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
}

/* ---------------------------------------------------------------- Uzman */

/* Uzman bandı.
   Bloğun işi yardım teklif etmek; sayfanın ana düğmesini tekrarlamaz, doğrudan
   iletişim yolu verir. Zemin tonlu ve solunda vurgu çizgisi var, böylece
   sayfadan ayrılıp bir kenar notu gibi okunur. Fotoğraf yoksa boş silüet değil,
   baş harf rozeti durur. */
/*
 * Üç sütunlu ızgaraydı ve kırılma noktaları ekran genişliğine bakıyordu.
 * Kart dar bir içerik sütununun içinde durduğu için o kırılmalar hiç
 * tetiklenmiyor, `auto` sütunlar metni eziyordu: her kelime alt alta
 * düşüyordu. Şimdi sarmalanan bir satır — metin 300 pikselin altına
 * inmeden eylem sütunu bir alt satıra geçiyor.
 */
.hv-expert {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px 22px;
	background: var(--hv-surface);
	border: 1px solid var(--hv-line);
	border-left: 3px solid var(--hv-action);
	border-radius: var(--hv-radius);
	padding: 22px 26px;
	margin: 28px 0;
}

.hv-expert__ph { flex: 0 0 64px; }

.hv-expert__body { flex: 1 1 300px; min-width: 0; }

.hv-expert__act { flex: 0 0 210px; margin-left: auto; }

/* Sarmaladığında eylem bloğu tam satır olur ve yan yana dizilir. */
@media (max-width: 720px) {
	.hv-expert__act {
		flex: 1 1 100%;
		margin-left: 0;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: 10px 18px;
	}

	.hv-expert__act .hv-btn-action { flex: 0 0 auto; }
}

.hv-expert__ph {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0;
	background: var(--hv-primary-soft, #E8F0FA);
	display: flex;
	align-items: center;
	justify-content: center;
}

.hv-expert__ph img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }

.hv-expert__ini { font-weight: 700; font-size: 20px; color: var(--hv-primary); letter-spacing: .02em; }

.hv-expert__k {
	display: block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--hv-muted);
	margin-bottom: 5px;
}

.hv-expert__n { font-weight: 700; font-size: 16px; margin: 0 0 5px; line-height: 1.3; color: var(--hv-dark); }

.hv-expert__r { font-weight: 400; font-size: 13px; color: var(--hv-muted); }

.hv-expert__r::before { content: " · "; color: var(--hv-line); }

.hv-expert__note { font-size: 13.5px; color: var(--hv-muted); margin: 0; line-height: 1.55; max-width: 64ch; }

.hv-expert__act { display: flex; flex-direction: column; gap: 8px; align-items: stretch; min-width: 190px; }

.hv-expert__act .hv-btn,
.hv-expert__act .hv-btn-action { justify-content: center; text-align: center; white-space: nowrap; }

/* Telefon ve WhatsApp satırları düğmeyle aynı eksende hizalanır. */
.hv-expert__act .hv-expert__l {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--hv-primary);
	text-decoration: none;
	white-space: nowrap;
}

.hv-expert__act .hv-expert__l svg { width: 16px; height: 16px; flex: 0 0 16px; }

.hv-expert__act .hv-expert__l:hover { text-decoration: underline; }

.hv-expert__l {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	font-size: 13px;
	font-weight: 500;
	color: var(--hv-primary);
	padding: 4px 0;
	text-decoration: none;
}

.hv-expert__l svg { width: 15px; height: 15px; flex-shrink: 0; }

.hv-expert__l:hover { text-decoration: underline; }

/* Teknik veri künyesi — altı satırı geçen liste iki sütuna bölünür. */
.hv-spec {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 56px;
	max-width: 1180px;
}

.hv-spec--tek { grid-template-columns: minmax(0, 1fr); max-width: 680px; }

@media (max-width: 900px) {
	.hv-spec { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

.hv-spec__dl {
	display: grid;
	grid-template-columns: minmax(130px, auto) minmax(0, 1fr);
	gap: 0;
	margin: 0;
	font-size: 13.5px;
	align-content: start;
}

.hv-spec__dl dt {
	color: var(--hv-muted);
	padding: 10px 20px 10px 0;
	border-top: 1px solid var(--hv-line);
	line-height: 1.45;
}

.hv-spec__dl dd {
	margin: 0;
	padding: 10px 0;
	border-top: 1px solid var(--hv-line);
	line-height: 1.45;
}

@media (max-width: 520px) {
	.hv-spec__dl { grid-template-columns: minmax(0, 1fr); }
	.hv-spec__dl dt { padding-bottom: 0; }
	.hv-spec__dl dd { padding-top: 2px; border-top: 0; }
}

/* Uzman — alt bilgi sütunu */

.hv-fexp {
	display: grid;
	grid-template-columns: 1fr 96px;
	gap: 14px;
	align-items: end;
}

.hv-fexp__n { font-weight: 700; font-size: 14px; margin: 0 0 2px; }

.hv-fexp__r { color: var(--hv-muted); font-size: 13px; margin: 0 0 8px; line-height: 1.4; }

.hv-fexp__m { display: block; font-size: 13px; color: var(--hv-primary); text-decoration: none; }

.hv-fexp__m:hover { text-decoration: underline; }

.hv-fexp__ph { aspect-ratio: 3 / 4; align-self: end; }

.hv-fexp__ph img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: bottom;
	display: block;
}

.hv-fexp__ph.is-empty {
	border: 1px dashed var(--hv-line);
	border-bottom: 0;
	border-radius: 3px 3px 0 0;
	background: var(--hv-surface);
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding-bottom: 6px;
	color: var(--hv-line);
}

.hv-fexp__ph.is-empty svg { width: 64%; }

/* ------------------------------------------- Teklif sayfası — sıkı düzen */

.hv-quote-form-wrap { max-width: none; }

.hv-quote-form .hv-field-grid { gap: 12px; }

.hv-quote-form .hv-field label { font-size: 12px; }

.hv-quote-form .hv-field input,
.hv-quote-form .hv-field textarea {
	padding: 9px 12px;
	font-size: 14px;
}

.hv-quote-summary { padding: 14px 16px; margin-bottom: 18px; }

.hv-quote-summary-list { max-height: 120px; overflow-y: auto; }

.hv-submit { margin-top: 16px; }

/* Teklifte ne bulacaksınız */

.hv-benefits h4 {
	font-size: 13px;
	margin: 0 0 10px;
	font-weight: 700;
}

.hv-benefit {
	display: flex;
	gap: 11px;
	align-items: flex-start;
	padding: 11px 13px;
	border: 1px solid var(--hv-line);
	border-radius: var(--hv-radius);
	background: #fff;
	margin-bottom: 9px;
}

.hv-benefit__n {
	flex: 0 0 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--hv-action);
	color: #fff;
	font: 700 11px/22px var(--hv-body-font, inherit);
	text-align: center;
}

.hv-benefit__t strong {
	display: block;
	font-size: 13.5px;
	line-height: 1.3;
	margin-bottom: 2px;
}

.hv-benefit__t span {
	font-size: 12px;
	color: var(--hv-muted);
	line-height: 1.45;
}

/* --------------------------------------------------------------- Bülten */

.hv-news {
	background: var(--hv-primary);
	color: #fff;
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 32px;
	align-items: center;
	padding: 18px 24px;
	border-radius: var(--hv-radius);
}

@media (max-width: 860px) {
	.hv-news { grid-template-columns: 1fr; gap: 14px; }
}

.hv-news__k {
	font-weight: 700;
	font-size: 14px;
	white-space: nowrap;
}

.hv-news__t strong { display: block; font-size: 14.5px; margin-bottom: 2px; }

.hv-news__t span { font-size: 12.5px; opacity: .82; }

.hv-news__f { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.hv-news__f input[type="email"] {
	height: 38px;
	min-width: 230px;
	border: 1px solid rgba(255, 255, 255, .45);
	background: rgba(255, 255, 255, .1);
	color: #fff;
	border-radius: 99px;
	padding: 0 16px;
	font-size: 13.5px;
}

.hv-news__f input[type="email"]::placeholder { color: rgba(255, 255, 255, .7); }

.hv-news__f input[type="email"]:focus {
	outline: none;
	background: #fff;
	color: var(--hv-dark);
	border-color: #fff;
}

.hv-news__b {
	background: #fff;
	border: 1px solid #fff;
	color: var(--hv-primary);
	height: 38px;
	padding: 0 22px;
	border-radius: 99px;
	font-weight: 600;
	font-size: 13px;
	cursor: pointer;
}

.hv-news__b:hover {
	background: var(--hv-action);
	border-color: var(--hv-action);
	color: #fff;
}

.hv-news__ok {
	font-size: 13.5px;
	font-weight: 600;
	white-space: nowrap;
}

.hv-news__msg {
	flex-basis: 100%;
	font-size: 12.5px;
	opacity: .9;
}

.hv-news__msg.is-error { color: #FFD9CC; }

/* --------------------------------------------- Onay kutusu ve doğrulama */

.hv-consent {
	margin: 18px 0 0;
	font-size: 13px;
	color: var(--hv-muted);
}

.hv-consent label {
	display: flex;
	gap: 9px;
	align-items: flex-start;
	line-height: 1.5;
	cursor: pointer;
}

.hv-consent input { margin-top: 2px; flex-shrink: 0; }

.hv-captcha { margin-top: 18px; }

.hv-captcha__k {
	display: block;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--hv-muted);
	margin-bottom: 8px;
}

.hv-captcha .g-recaptcha { display: inline-block; }

/* ============================================================ Ürün kartı */
/* Porto'nun kart düzeninin üzerine tek bir ölçü disiplini koyar: görsel kutusu
   her kartta aynı kare, görsel kutudan taşmaz, başlık iki satıra sabitlenir.
   Böylece ızgarada kod ve düğme satırları hiçbir zaman kaymaz. */

.woocommerce ul.products li.product .product-image,
.woocommerce ul.products li.product .product-thumb,
.woocommerce ul.products li.product a > img {
	background: var(--hv-surface);
}

.woocommerce ul.products li.product .product-image,
.woocommerce ul.products li.product .product-thumb {
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	padding: 12px;
}

.woocommerce ul.products li.product .product-image img,
.woocommerce ul.products li.product .product-thumb img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}

/* Başlık iki satırda sabit — üçüncü satır kartı uzatıp ızgarayı kaydırmasın. */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .product-name {
	height: 2.6em;
	line-height: 1.3;
	font-size: 13px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	margin: 0 0 4px;
}

/* Kart gövdesi: kod ve düğme daima alta yaslanır. */
.woocommerce ul.products li.product {
	display: flex;
	flex-direction: column;
}

.woocommerce ul.products li.product .hv-sku {
	margin-top: auto;
	padding-top: 4px;
}

/* ================================================== Görsel büyütme penceresi */

.hv-zoomable,
[data-zoom] img,
img[data-zoom] { cursor: zoom-in; }

/* Büyütme penceresi.
   Tam ekrana yayılan bir karartma, küçük bir ürün fotoğrafını ortada yalnız
   bırakıyor ve okları görselden metrelerce uzağa, ekran kenarına atıyordu.
   Bunun yerine görselin ölçüsüne oturan bir pencere var; oklar da mutlak
   konumla değil, görselin iki yanında akış içinde duruyor. */
.hv-lightbox {
	position: fixed;
	inset: 0;
	z-index: 200000;
	background: rgba(11, 20, 28, .62);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 26px;
	backdrop-filter: blur(2px);
}

.hv-lbox {
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 6px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
	width: auto;
	max-width: min(940px, 94vw);
	max-height: 92vh;
	overflow: hidden;
	cursor: default;
}

.hv-lbox__top {
	display: flex;
	align-items: center;
	gap: 14px;
	flex: 0 0 auto;
	padding: 13px 14px 13px 20px;
	border-bottom: 1px solid var(--hv-line);
}

.hv-lbox__t {
	font-weight: 600;
	font-size: 14px;
	color: var(--hv-ink);
	flex: 1 1 auto;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.hv-lbox__x {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid var(--hv-line);
	background: #fff;
	color: var(--hv-slate);
	font: 300 21px/1 inherit;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hv-lbox__x:hover { background: var(--hv-mist); color: var(--hv-ink); border-color: var(--hv-blue); }

/* Oklar akış içinde: görsel ne kadar dar olursa olsun tam dibinde kalırlar. */
.hv-lbox__stage {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 16px;
	background: var(--hv-mist);
}

/* Yüzdeli max-height, yüksekliği içeriğinden gelen bir kapsayıcıda yok
   sayılır; bu yüzden görselin tavanı doğrudan ekran yüksekliğine bağlı. */
.hv-lbox__stage img {
	flex: 0 1 auto;
	min-width: 0;
	min-height: 0;
	max-width: 100%;
	max-height: min(62vh, 640px);
	object-fit: contain;
	display: block;
	background: #fff;
	border: 1px solid var(--hv-line);
	border-radius: var(--hv-radius);
	cursor: default;
}

.hv-lbox__nav {
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 1px solid var(--hv-line);
	background: #fff;
	color: var(--hv-ink);
	cursor: pointer;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}

.hv-lbox__nav svg { width: 20px; height: 20px; }
.hv-lbox__nav:hover { background: var(--hv-blue); border-color: var(--hv-blue); color: #fff; }

.hv-lbox__bot {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 20px;
	border-top: 1px solid var(--hv-line);
}

.hv-lbox__thumbs { display: flex; gap: 8px; flex: 1 1 auto; flex-wrap: wrap; }

.hv-lbox__th {
	width: 48px;
	height: 48px;
	padding: 3px;
	background: #fff;
	border: 1px solid var(--hv-line);
	border-radius: 3px;
	cursor: pointer;
}

.hv-lbox__th img { width: 100%; height: 100%; object-fit: contain; display: block; }
.hv-lbox__th.is-on { border-color: var(--hv-blue); box-shadow: 0 0 0 2px rgba(14, 86, 179, .18); }

.hv-lbox__n {
	flex: 0 0 auto;
	font: 600 12px ui-monospace, SFMono-Regular, Menlo, monospace;
	color: var(--hv-slate);
	letter-spacing: .06em;
}

@media (max-width: 620px) {
	.hv-lightbox { padding: 12px; }
	.hv-lbox { width: 100%; max-height: 92vh; }
	.hv-lbox__stage { gap: 6px; padding: 10px; }
	.hv-lbox__nav { width: 36px; height: 36px; }
	.hv-lbox__nav svg { width: 17px; height: 17px; }
	.hv-lbox__th { width: 40px; height: 40px; }
}

/* ================================================================ Arama
 *
 * Üst arama kutusu, öneri paneli, kapsam seçicisi ve sonuç sayfası.
 *
 * Kapsam seçicisi tarayıcının `<select>` kutusu değil, kendi çizimimiz:
 * yerleşik kutunun yüksekliği ve yazı tipi işletim sistemine bağlı ve
 * Windows'ta satırın dışına taşıyordu. Seçili değer gizli bir select'te
 * durduğu için form JavaScript kapalıyken de çalışıyor.
 */

.hv-ara {
	position: relative;
	width: 100%;
	max-width: 620px;
}

.hv-ara__kutu {
	display: flex;
	align-items: stretch;
	background: #fff;
	border: 1px solid var(--hv-line);
	border-radius: var(--hv-radius);
	overflow: visible;
}

.hv-ara__girdi {
	flex: 1 1 auto;
	min-width: 0;
	height: 42px;
	padding: 0 12px;
	border: 0;
	background: transparent;
	font-size: 14px;
	color: var(--hv-body);
	box-shadow: none;
}

.hv-ara__girdi:focus {
	outline: 0;
	box-shadow: none;
}

/* Tarayıcının kendi temizleme çarpısı kutuyu kalabalıklaştırıyor. */
.hv-ara__girdi::-webkit-search-cancel-button {
	display: none;
}

.hv-ara__kat {
	position: relative;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	border-left: 1px solid var(--hv-line);
}

/* Gizli ama erişilebilir: değer formla gider, ekran okuyucu görmez. */
.hv-ara__yerlesik {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: 0;
	border: 0;
	opacity: 0;
	pointer-events: none;
	clip-path: inset(50%);
}

.hv-ara__katbtn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 42px;
	max-width: 180px;
	padding: 0 12px;
	border: 0;
	background: transparent;
	font-size: 13px;
	color: var(--hv-muted);
	cursor: pointer;
}

.hv-ara__katbtn:hover {
	color: var(--hv-primary);
}

.hv-ara__katad {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hv-ara__ok {
	flex: 0 0 10px;
	width: 10px;
	height: 7px;
	transition: transform .15s ease;
}

.hv-ara__katbtn[aria-expanded="true"] .hv-ara__ok {
	transform: rotate(180deg);
}

.hv-ara__btn {
	flex: 0 0 auto;
	width: 46px;
	border: 0;
	background: var(--hv-primary);
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.hv-ara__btn:hover {
	background: var(--hv-primary-dark);
}

.hv-ara__btn svg {
	width: 18px;
	height: 18px;
	display: block;
}

/* ------------------------------------------------------- kapsam paneli */

.hv-katp {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 70;
	width: 236px;
	max-height: 320px;
	overflow-y: auto;
	padding: 5px;
	background: #fff;
	border: 1px solid var(--hv-line);
	border-radius: var(--hv-radius);
	box-shadow: var(--hv-shadow-lg);
}

.hv-katp__i {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	padding: 8px 10px;
	border: 0;
	border-radius: 3px;
	background: transparent;
	font-size: 13px;
	text-align: left;
	color: var(--hv-body);
	cursor: pointer;
}

.hv-katp__i:hover,
.hv-katp__i.is-on {
	background: var(--hv-soft);
}

.hv-katp__i[aria-selected="true"] {
	color: var(--hv-primary);
	font-weight: 600;
}

.hv-katp__n {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hv-katp__c {
	flex: 0 0 auto;
	font-size: 11px;
	color: var(--hv-muted);
	font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------- öneri paneli */

.hv-oneri {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	z-index: 72;
	max-height: 420px;
	overflow-y: auto;
	padding: 6px;
	background: #fff;
	border: 1px solid var(--hv-line);
	border-radius: var(--hv-radius);
	box-shadow: var(--hv-shadow-lg);
}

.hv-oneri__g + .hv-oneri__g {
	margin-top: 4px;
	border-top: 1px solid var(--hv-line);
	padding-top: 4px;
}

.hv-oneri__gb {
	padding: 6px 10px 4px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--hv-muted);
}

.hv-oneri__i {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 10px;
	border-radius: 3px;
	font-size: 13.5px;
	color: var(--hv-body);
	text-decoration: none;
}

.hv-oneri__i:hover,
.hv-oneri__i.is-on {
	background: var(--hv-soft);
	color: var(--hv-primary-dark);
}

.hv-oneri__n {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hv-oneri__c {
	flex: 0 0 auto;
	font-size: 11.5px;
	color: var(--hv-muted);
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.hv-oneri__tum {
	margin-top: 4px;
	border-top: 1px solid var(--hv-line);
	padding-top: 10px;
	justify-content: center;
	font-weight: 600;
	color: var(--hv-primary);
}

.hv-oneri__yok {
	padding: 16px 12px;
	text-align: center;
	font-size: 13px;
	color: var(--hv-muted);
}

/* ------------------------------------------------------- sonuç sayfası */

.hv-sonuc {
	max-width: 1200px;
	margin: 0 auto;
	padding: 26px 16px 56px;
}

.hv-sonuc__bas {
	margin-bottom: 26px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--hv-line);
}

.hv-sonuc__h1 {
	margin: 0 0 6px;
	font-size: 26px;
	color: var(--hv-dark);
}

.hv-sonuc__ozet {
	margin: 0;
	font-size: 14px;
	color: var(--hv-muted);
}

.hv-sonuc__sifirla {
	margin-left: 4px;
	font-size: 13px;
}

.hv-blok {
	margin-bottom: 34px;
}

.hv-blok__h2 {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 14px;
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--hv-dark);
}

.hv-blok__n {
	padding: 1px 8px;
	border-radius: 10px;
	background: var(--hv-surface);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0;
	color: var(--hv-muted);
	font-variant-numeric: tabular-nums;
}

.hv-katlist {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid var(--hv-line);
	border-radius: var(--hv-radius);
	overflow: hidden;
}

.hv-katlist li + li {
	border-top: 1px solid var(--hv-line);
}

.hv-katlist a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	padding: 12px 14px;
	font-size: 14px;
	color: var(--hv-body);
	text-decoration: none;
}

.hv-katlist a:hover {
	background: var(--hv-soft);
	color: var(--hv-primary-dark);
}

.hv-katlist__c {
	flex: 0 0 auto;
	font-size: 12px;
	color: var(--hv-muted);
}

.hv-grid {
	display: grid;
	gap: 14px;
}

/*
 * Sütun sınıfı verilmemişse kendi kendine doldurur. Sınıf varsa ona
 * karışmaz — eskiden bu kural dosyada daha sonra geldiği için hv-cols-*
 * sınıflarını sessizce eziyordu.
 */
.hv-grid:not([class*="hv-cols-"]) {
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}

.hv-kart {
	border: 1px solid var(--hv-line);
	border-radius: var(--hv-radius);
	background: #fff;
	transition: box-shadow .15s ease;
}

.hv-kart:hover {
	box-shadow: var(--hv-shadow);
}

.hv-kart__bag {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 12px;
	text-decoration: none;
	color: var(--hv-body);
}

.hv-kart__gorsel {
	display: block;
	aspect-ratio: 1 / 1;
	background: var(--hv-surface);
	border-radius: 3px;
	overflow: hidden;
}

.hv-kart__gorsel img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.hv-kart__bos {
	display: block;
	width: 100%;
	height: 100%;
}

.hv-kart__ad {
	font-size: 13.5px;
	line-height: 1.35;
}

.hv-kart__sku {
	font-size: 11.5px;
	color: var(--hv-muted);
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ----------------------------------------------------- sonuç bulunamadı */

.hv-yok {
	max-width: 760px;
	margin: 0 auto;
	padding: 24px 0 8px;
	text-align: center;
}

.hv-yok__ikon {
	width: 92px;
	height: 74px;
	margin: 0 auto 14px;
	color: var(--hv-line);
}

.hv-yok__h2 {
	margin: 0 0 12px;
	font-size: 21px;
	color: var(--hv-dark);
}

.hv-yok__oneri {
	margin: 0 0 10px;
	font-size: 15px;
}

.hv-yok__kapsam {
	margin: 0 0 18px;
	font-size: 13.5px;
	color: var(--hv-muted);
}

.hv-yok__ipucu,
.hv-yok__kat {
	margin: 26px 0;
	padding: 18px 20px;
	background: var(--hv-surface);
	border-radius: var(--hv-radius);
	text-align: left;
}

.hv-yok__ipucu h3,
.hv-yok__kat h3 {
	margin: 0 0 10px;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--hv-dark);
}

.hv-yok__ipucu ul {
	margin: 0;
	padding-left: 20px;
	font-size: 13.5px;
	line-height: 1.7;
	color: var(--hv-body);
}

.hv-yok__katlar {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.hv-yok__katbag {
	padding: 7px 13px;
	background: #fff;
	border: 1px solid var(--hv-line);
	border-radius: 100px;
	font-size: 13px;
	color: var(--hv-body);
	text-decoration: none;
}

.hv-yok__katbag:hover {
	border-color: var(--hv-primary);
	color: var(--hv-primary);
}

.hv-yok__teklif {
	margin: 22px 0 0;
}

@media (max-width: 782px) {
	.hv-ara__katbtn {
		max-width: 108px;
	}

	.hv-ara__katad {
		display: none;
	}

	.hv-katp {
		width: 216px;
	}

	.hv-sonuc__h1 {
		font-size: 21px;
	}

	.hv-grid:not([class*="hv-cols-"]) {
		grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	}
}

/* ------------------------------------------ Makine seçici — kategori grupları
 * Önizlemedeki düzen: her kök kategori kendi başlığı, makine sayısı ve parça
 * bağlantısıyla ayrı bir blok; altında üçlü kart ızgarası, gerekiyorsa
 * "N makine daha" düğmesi ve alt kategori şeridi.
 */

.hv-fgroup { margin-top: 22px; }

.hv-fgroup:first-child { margin-top: 0; }

.hv-fgroup__head {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 0 0 12px;
	padding-bottom: 9px;
	border-bottom: 1px solid var(--hv-line);
}

.hv-fgroup__t {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-family: var(--hv-display, Archivo, sans-serif);
	font-weight: 700;
	font-size: 15px;
	color: var(--hv-ink, #0f172a);
	text-decoration: none;
}

.hv-fgroup__t:hover { color: var(--hv-primary); }

.hv-fgroup__t svg { width: 14px; height: 14px; opacity: .45; transition: transform .16s ease; }

.hv-fgroup__t:hover svg { opacity: 1; transform: translateX(3px); }

.hv-fgroup__n {
	font-family: var(--hv-mono, "IBM Plex Mono", monospace);
	font-size: 11px;
	font-weight: 600;
	color: var(--hv-muted);
	background: #fff;
	border: 1px solid var(--hv-line);
	border-radius: 99px;
	padding: 1px 8px;
	white-space: nowrap;
}

.hv-fgroup__p {
	margin-left: auto;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--hv-primary);
	text-decoration: none;
	white-space: nowrap;
}

.hv-fgroup__p:hover { text-decoration: underline; }

.hv-fgroup__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

/* Altıncıdan sonrakiler grup açılana kadar durur. Süzgeç açıkken hepsi görünür. */
.hv-fgroup:not(.hv-acik):not(.hv-suzuluyor) .hv-finder__item.hv-fazla { display: none; }

.hv-fgroup__daha {
	display: block;
	width: 100%;
	margin: 12px 0 0;
	padding: 11px 14px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	color: var(--hv-primary);
	background: #fff;
	border: 1px solid var(--hv-line);
	border-radius: var(--hv-radius);
	cursor: pointer;
	transition: border-color .16s ease, background .16s ease;
}

.hv-fgroup__daha:hover { border-color: var(--hv-primary); background: var(--hv-primary-soft, #eff6ff); }

/* Süzgeç açıkken "daha" düğmesi ve alt kategori şeridi gizlenir. */
.hv-fgroup.hv-suzuluyor .hv-fgroup__daha,
.hv-fgroup.hv-suzuluyor .hv-fgroup__sub { display: none; }

.hv-fgroup__sub { display: flex; flex-wrap: wrap; gap: 7px; margin: 11px 0 0; }

.hv-fchip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 11px;
	border-radius: 99px;
	border: 1px solid var(--hv-line);
	background: #fff;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--hv-ink, #0f172a);
	text-decoration: none;
}

.hv-fchip:hover { border-color: var(--hv-primary); color: var(--hv-primary); }

.hv-fchip b { font-family: var(--hv-mono, "IBM Plex Mono", monospace); font-size: 11px; font-weight: 600; color: var(--hv-muted); }

.hv-fchip:hover b { color: var(--hv-primary); }

.hv-fchip--all { background: var(--hv-primary-soft, #eff6ff); font-weight: 600; }

@media (max-width: 1000px) {
	.hv-fgroup__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
	.hv-fgroup__grid { grid-template-columns: 1fr; }
	.hv-fgroup__head { flex-wrap: wrap; }
	.hv-fgroup__p { margin-left: 0; flex-basis: 100%; }
}