/* Harvekon · ana sayfa A (tuval taslağı)
   Sayfa onaylanınca bu bileşenler tasarım sistemine (components/bundle.css)
   taşınır, bu dosya kalkar. */

/* ---------- Ortak: koyu üst alan ve büyük başlık ---------- */
.hk-ust-alan[data-theme="koyu"] .hk-ust-alan__menu-satiri {
	border-top-color: var(--cizgi);
}

.hk-giris__baslik {
	font-family: var(--font-sans);
	font-size: 56px;
	line-height: 60px;
	font-weight: 700;
	letter-spacing: -0.025em;
	color: var(--metin-baslik);
	margin: 0;
	text-wrap: balance;
}

/* Üst şerit (telefon ve e-posta) 15 Ekim 2026'da bütün sayfalardan
   kaldırıldı (Beest kararı); kuralları da kalktı. */

/* Üst alan: WhatsApp simge düğmesi (Teklif iste'nin solunda) */
.hk-ust-alan__wa {
	width: var(--kontrol-yuksekligi);
	padding: 0;
	--hk-dugme-kenar: transparent;
	--hk-dugme-yazi: var(--eylem);
}

.hk-ust-alan__wa-simge {
	display: block;
	width: 26px;
	height: 26px;
	fill: currentcolor;
}

.hk-ust-alan__wa:hover,
.hk-ust-alan__wa:active {
	--hk-dugme-zemin: transparent;
	--hk-dugme-yazi: var(--eylem-vurgu);
	--hk-dugme-kenar: transparent;
	box-shadow: none;
}

.hk-ust-alan__menu-dugmesi .hk-ust-alan__menu-yazi {
	display: inline;
}

@container (max-width: 599px) {

	.hk-ust-alan__eylem .hk-ust-alan__wa,
	.hk-ust-alan__eylem .hk-ust-alan__menu-dugmesi {
		width: var(--kontrol-yuksekligi-kucuk);
		padding: 0;
	}

	.hk-ust-alan__menu-dugmesi .hk-ust-alan__menu-yazi {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

/* Üst alan: arama kutusu yatayda ortada. Logo solda, eylemler sağda; iki yan
   sütun eşit olduğu için
   kutu sayfanın ortasına oturur. Dar ekranda (959 px ve altı) tasarım
   sistemindeki alt satır düzeni kalır. */
@container (width > 959px) {

	.hk-ust-alan__satir {
		display: grid;
		grid-template-columns: minmax(max-content, 1fr) minmax(0, 520px) minmax(max-content, 1fr);
	}

	.hk-ust-alan__logo {
		justify-self: start;
	}

	.hk-ust-alan__eylem {
		justify-self: end;
	}
}

/* Üst alan: ana menü bağlantıları yatayda ortada (arama kutusunun altında, aynı
   eksende).
   Tasarım sistemindeki ilk bağlantının sola kaydırması (kap kenarına
   hizalama) burada gerekmez. */
.hk-ust-alan__menu-satiri .hk-ana-menu ul {
	justify-content: center;
}

.hk-ust-alan__menu-satiri .hk-ana-menu ul > li:first-child .hk-ana-menu__baglanti {
	margin-left: 0;
}

/* Üst alan düzeni (Beest kararı, 15 Ekim 2026; önce ana sayfada denendi, sonra
   bütün şablonlara uygulandı;
   hk-ust-alan--logo-ortada, katalog/ortak.py). Stiller değişmez, yalnızca
   konum: iki satır arasındaki çizgi kalkar;
   Hakkımızda, İletişim ve Blog ayrı listede sağa yaslı (son bağlantının,
   Blog'un yazısı Teklif iste'nin sağ kenarıyla
   hizalı), öbür bağlantılar sayfanın ortasında (arama kutusunun altında); logo
   iki satırın dikeyde ortasında (menü
   satırının yarısı, 24 px aşağıda) ve büyük: 56 px (önceki 40 px). Eksi dış
   boşluk satırın yüksekliğini korur. 1200 px
   altında iki grup ortada tek sırada durur, logo ilk satırda ve 40 px kalır:
   orada sağdaki grup ortadakine, logo
   menüye değerdi. */
.hk-ust-alan--logo-ortada .hk-ust-alan__menu-satiri {
	border-top: 0;
}

.hk-ust-alan--logo-ortada .hk-ana-menu {
	display: flex;
	justify-content: center;
	gap: var(--bosluk-1);
}

@container (min-width: 1200px) {

	.hk-ust-alan--logo-ortada .hk-ust-alan__logo {
		position: relative;
		top: calc(var(--kontrol-yuksekligi) / 2);
		margin-block: -8px;
	}

	.hk-ust-alan--logo-ortada .hk-ust-alan__logo img {
		height: 56px;
	}

	.hk-ust-alan--logo-ortada .hk-ana-menu {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
		align-items: center;
		gap: 0;
	}

	.hk-ust-alan--logo-ortada .hk-ana-menu > ul:first-child {
		grid-column: 2;
	}

	.hk-ust-alan--logo-ortada .hk-ana-menu > .hk-ana-menu__sag {
		grid-column: 3;
		justify-self: end;
	}

	.hk-ust-alan--logo-ortada .hk-ana-menu__sag > li:last-child .hk-ana-menu__baglanti {
		margin-right: calc(-1 * var(--bosluk-3));
	}
}

/* ---------- Yapışkan üst alan: sayfanın başında koyu, aşağı kaydırınca açık
   ----------
   Tema data-theme ile değişir (koyu → acik); renkler aynı sürede geçer.
   İki logo aynı hücrede üst üste: koyu zemin logosu başta, açık zemin logosu
   kaydırınca. */
.hk-ust-alan.hk-ust-alan--yapiskan {
	position: sticky;
	top: 0;
	z-index: var(--katman-menu);
	transition: background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

.hk-ust-alan--yapiskan[data-theme="acik"] {
	box-shadow: 0 6px 20px rgb(35 37 37 / 0.08);
}

.hk-ust-alan--yapiskan :is(.hk-dugme, .hk-arama__alan, .hk-ana-menu__baglanti, .hk-ust-alan__menu-satiri) {
	transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

.hk-ust-alan--yapiskan .hk-ust-alan__logo {
	display: inline-grid;
}

.hk-ust-alan--yapiskan .hk-ust-alan__logo img {
	grid-area: 1 / 1;
	transition: opacity 200ms ease, visibility 200ms;
}

.hk-ust-alan--yapiskan:not([data-theme="acik"]) .hk-ust-alan__logo-acik,
.hk-ust-alan--yapiskan[data-theme="acik"] .hk-ust-alan__logo-koyu {
	opacity: 0;
	visibility: hidden;
}

/* odaklanan öğe yapışkan alanın altında kalmasın */
html {
	scroll-padding-top: 152px;
}

.hk-giris__satir {
	display: block;
}

.hk-giris__arama--buyuk .hk-arama__alan {
	height: 56px;
	font-size: 18px;
	padding-inline: var(--bosluk-4);
}

.hk-giris__arama--buyuk .hk-dugme {
	min-height: 56px;
	padding-inline: var(--bosluk-5);
}

.hk-giris .hk-dugme-dizisi .hk-dugme {
	min-height: 52px;
}

/* Kanıt şeridi: Harvekon'un teyit edeceği rakamlar */
.hk-kanit {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: 0;
	border-top: var(--kenar-ince) solid var(--cizgi);
}

.hk-kanit__oge {
	display: flex;
	flex-direction: column-reverse;
	justify-content: flex-end;
	gap: var(--bosluk-1);
	padding: var(--bosluk-5) var(--bosluk-5) var(--bosluk-6);
	border-left: var(--kenar-ince) solid var(--cizgi);
}

.hk-kanit__oge:first-child {
	border-left: 0;
	padding-left: 0;
}

/* rakam sayısından bağımsız: 960 px ve üstünde beşe kadar tek satır, altı ve
   üstünde üçlü ızgara */
@container (width > 959px) {

	.hk-kanit {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
	}

	.hk-kanit:has(> :nth-child(6)) {
		grid-auto-flow: row;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.hk-kanit dd {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 44px;
	line-height: 48px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--metin-baslik);
	font-variant-numeric: tabular-nums;
}

.hk-kanit dd span {
	color: var(--vurgu);
}

.hk-kanit dt {
	font-family: var(--font-sans);
	font-size: 14px;
	line-height: 20px;
	color: var(--metin);
}

/* Girişteki kanıt şeridi: kenardan kenara logo mavisi zemin. Yazılar grafit
   (logo mavisi üstünde 5,1:1);
   beyaz yazı bu mavide 3:1'de kaldığı için küçük etiketlerde kullanılmaz. */
.hk-kanit-serit {
	--metin-baslik: var(--grafit);
	--metin: var(--grafit);
	--vurgu: var(--beyaz);
	--cizgi: rgb(35 37 37 / 0.22);
	background: var(--logo-mavisi);
	color: var(--metin);
}

/* Tweaks › Kanıt şeridi › Koyu mavi: koyu mavi zemin, beyaz yazı (5,6:1) */
.hk-kanit-serit[data-renk="koyu-mavi"] {
	--metin-baslik: var(--beyaz);
	--metin: var(--beyaz);
	--vurgu: var(--beyaz);
	--cizgi: rgb(255 255 255 / 0.22);
	background: var(--koyu-mavi);
}

.hk-kanit-serit .hk-kanit {
	border-top: 0;
}

.hk-kanit-serit .hk-kanit__oge {
	padding-block: var(--bosluk-6);
}

.hk-kanit-serit .hk-kanit dt {
	font-weight: 600;
}

@container (max-width: 959px) {

	.hk-giris__baslik {
		font-size: 48px;
		line-height: 52px;
	}

	.hk-kanit {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hk-kanit__oge:nth-child(3) {
		border-left: 0;
		padding-left: 0;
	}

	.hk-kanit__oge:nth-child(n+3) {
		border-top: var(--kenar-ince) solid var(--cizgi);
	}
}

@container (max-width: 599px) {

	.hk-giris__baslik {
		font-size: 36px;
		line-height: 42px;
		letter-spacing: -0.02em;
	}

	.hk-giris__arama--buyuk .hk-arama__alan {
		height: var(--kontrol-yuksekligi);
		font-size: 16px;
		padding-inline: var(--bosluk-3);
	}

	.hk-giris__arama--buyuk .hk-dugme {
		min-height: var(--kontrol-yuksekligi);
		padding-inline: var(--bosluk-4);
	}

	.hk-giris .hk-dugme-dizisi {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}

	.hk-kanit__oge {
		padding: var(--bosluk-4) var(--bosluk-4) var(--bosluk-5);
	}

	.hk-kanit-serit .hk-kanit__oge {
		padding-block: var(--bosluk-5);
	}

	.hk-kanit dd {
		font-size: 32px;
		line-height: 36px;
	}

	.hk-kanit dt {
		font-size: 13px;
		line-height: 18px;
	}
}

@keyframes hk-yanip {

	0%,
	100% {
		opacity: 0.2;
	}

	50% {
		opacity: 1;
	}
}

@keyframes hk-akis {

	to {
		stroke-dashoffset: -40;
	}
}

@keyframes hk-seviye {

	0%,
	100% {
		transform: scaleY(0.55);
	}

	50% {
		transform: scaleY(0.9);
	}
}

@keyframes hk-belir {

	from {
		opacity: 0;
		transform: translateY(8px);
	}
}

@keyframes hk-ciz {

	from {
		stroke-dashoffset: 1;
	}

	to {
		stroke-dashoffset: 0;
	}
}

/* ---------- A · Pano çizimi ---------- */
.hk-giris--cizim {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.hk-giris--cizim::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image:
		linear-gradient(rgb(0 158 227 / 0.11) 1px, transparent 1px),
		linear-gradient(90deg, rgb(0 158 227 / 0.11) 1px, transparent 1px),
		linear-gradient(rgb(197 198 198 / 0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgb(197 198 198 / 0.05) 1px, transparent 1px);
	background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
	background-position: -1px -1px;
	-webkit-mask-image: linear-gradient(90deg, transparent 15%, #000 62%);
	mask-image: linear-gradient(90deg, transparent 15%, #000 62%);
}

.hk-giris--cizim .hk-giris__ic {
	grid-template-columns: minmax(0, 600px) minmax(0, 1fr);
	gap: var(--bosluk-6);
	align-items: center;
	padding-block: var(--bosluk-7) var(--bosluk-6);
}

.hk-giris--cizim .hk-giris__metin {
	gap: var(--bosluk-5);
}

.hk-cizim {
	position: relative;
	margin: 0 -40px 0 0;
}

.hk-cizim::before {
	content: "";
	position: absolute;
	left: 12%;
	top: 2%;
	width: 86%;
	aspect-ratio: 1;
	pointer-events: none;
	background: radial-gradient(closest-side, rgb(0 158 227 / 0.15), transparent);
}

.hk-cizim > svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.hk-cizim .led {
	fill: #009ee3;
}

.hk-cizim .led--yan {
	animation: hk-yanip 2.2s ease-in-out infinite;
}

.hk-cizim .akis {
	fill: none;
	stroke: #009ee3;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-dasharray: 5 15;
	animation: hk-akis 1.2s linear infinite;
}

.hk-cizim .seviye {
	transform-box: fill-box;
	transform-origin: 50% 100%;
	animation: hk-seviye 7s ease-in-out infinite;
}

.hk-cizim__not {
	position: absolute;
	display: grid;
	gap: 2px;
	font-family: var(--font-sans);
	font-size: 14px;
	line-height: 18px;
	font-weight: 600;
	color: var(--metin-baslik);
	white-space: nowrap;
	animation: hk-belir 0.7s ease-out both;
}

.hk-cizim__not--satir {
	display: flex;
	align-items: baseline;
	gap: var(--bosluk-2);
}

.hk-cizim__not b {
	font-family: var(--font-mono);
	font-size: 12px;
	line-height: 16px;
	font-weight: 400;
	color: var(--vurgu);
	letter-spacing: 0.04em;
}

.hk-cizim__not small {
	font-size: 12px;
	line-height: 16px;
	font-weight: 400;
	color: var(--metin);
}

.hk-cizim__not:nth-of-type(2) {
	animation-delay: 0.12s;
}

.hk-cizim__not:nth-of-type(3) {
	animation-delay: 0.24s;
}

.hk-cizim__not:nth-of-type(4) {
	animation-delay: 0.36s;
}

.hk-cizim__not:nth-of-type(5) {
	animation-delay: 0.48s;
}

@container (max-width: 1199px) {

	.hk-cizim {
		margin-right: 0;
	}
}

@container (max-width: 959px) {

	.hk-giris--cizim .hk-giris__ic {
		grid-template-columns: 1fr;
	}

	/* Tek sütunda görsel (çizim, fotoğraf, mozaik) metnin üstünde: sayfaya girince
   görsel karşılar
     (Beest kararı, 13 Ekim 2026; masaüstü düzeni değişmez) */
	.hk-giris--cizim .hk-giris__ic > figure {
		order: -1;
	}

	.hk-cizim {
		max-width: 640px;
	}
}

@container (max-width: 599px) {

	.hk-giris--cizim::before {
		-webkit-mask-image: linear-gradient(0deg, transparent 30%, #000 75%);
		mask-image: linear-gradient(0deg, transparent 30%, #000 75%);
	}

	.hk-giris--cizim .hk-giris__ic {
		padding-block: var(--bosluk-6) var(--bosluk-5);
		gap: var(--bosluk-5);
	}

	.hk-cizim .hk-cizim__not {
		display: none;
	}

	.hk-cizim .cizgi-not {
		display: none;
	}
}

/* Ana sayfa girişi: rakamlar (kanıt) masaüstünde ilk ekranda görünsün (Beest
   isteği, 15 Ekim 2026).
   Pano çiziminin yüksekliği ekranın yüksekliğine göre: ekran − giriş payı. Pay
   = üst alan 130 + giriş iç boşlukları
   48 + 32 + antet 90 + antetin altı 32 = 332 px (rakamlar antette, aşağıda; üst
   şerit 15 Ekim'de kalktı). Başka bir
   düzen kendi payını --hk-giris-pay ile verir (Güven şeridi denemeleri). En çok
   552 px (çizimin asıl boyu; 1440×900'de
   antet tam görünür), en az 400 px (aşırı küçülmesin; 700 px'ten alçak
   ekranlarda antetin bir kısmı ilk ekranın altında
   kalır). Tuvalde 100svh panonun kendi boyu olduğundan panoda 552 px görünür.
   Çizim sütunun başına yaslı: sol kenarı
   yerinde kalır, sağdaki notlar daralan çizimle içeri çekilir (daha dar
   ekranlarda kesilmesinler). 959 px altındaki
   düzen değişmez. */
@container (min-width: 960px) {

	.hk-giris--ana .hk-cizim {
		--hk-cizim-boy: clamp(400px, calc(100svh - var(--hk-giris-pay, 332px)), 552px);
		justify-self: start;
		width: min(calc(100% + 40px), calc(var(--hk-cizim-boy) * 760 / 690));
	}
}

@container (min-width: 960px) and (max-width: 1199px) {

	.hk-giris--ana .hk-cizim {
		width: min(100%, calc(var(--hk-cizim-boy) * 760 / 690));
	}
}

/* Alt kenarından konumlanan not (HMI'nin üstündeki "Yazılım"): çizim küçülse de
   cihaza binmez. translate, belirme
   animasyonundaki transform'la çakışmaz. */
.hk-cizim__not--alttan {
	translate: 0 -100%;
}

/* Ana sayfa girişinde rakamlar: pafta anteti (Güven şeridi denemeleri C; Beest
   kararı, 15 Ekim 2026). Girişin içinde,
   teknik çizimdeki antet gibi ince logo mavisi çizgili kutu; köşelerde kesim
   işaretleri. Etiket rakamın tam sağında,
   17 px yarı kalın beyaz (önceki 14 px); rakam 44 px beyaz, artı logo mavisi.
   Mavi bant kalktı. Öbür sayfalardaki
   logo mavisi şerit (hk-kanit-serit) değişmez. */
.hk-kanit-antet {
	position: relative;
	margin-bottom: var(--bosluk-6);
	border: var(--kenar-ince) solid rgb(0 158 227 / 0.55);
	background: rgb(17 18 18 / 0.55);
}

.hk-kanit-antet .hk-kanit {
	border-top: 0;
}

.hk-kanit-antet .hk-kanit .hk-kanit__oge,
.hk-kanit-antet .hk-kanit .hk-kanit__oge:first-child {
	flex-direction: row-reverse;
	align-items: center;
	justify-content: flex-end;
	gap: var(--bosluk-4);
	padding: 20px var(--bosluk-5);
	border-left: var(--kenar-ince) solid rgb(0 158 227 / 0.35);
}

.hk-kanit-antet .hk-kanit .hk-kanit__oge:first-child {
	border-left: 0;
}

.hk-kanit-antet .hk-kanit dd {
	flex: none;
	font-size: 44px;
	line-height: 48px;
	color: var(--beyaz);
}

.hk-kanit-antet .hk-kanit dd span {
	color: var(--logo-mavisi);
}

.hk-kanit-antet .hk-kanit dt {
	font-size: 17px;
	line-height: 22px;
	font-weight: 600;
	color: var(--beyaz);
	text-wrap: balance;
}

.hk-kanit-antet__kose {
	position: absolute;
	width: 14px;
	height: 14px;
	border: 0 solid var(--logo-mavisi);
	pointer-events: none;
}

.hk-kanit-antet__kose--1 {
	top: -8px;
	left: -8px;
	border-top-width: 2px;
	border-left-width: 2px;
}

.hk-kanit-antet__kose--2 {
	top: -8px;
	right: -8px;
	border-top-width: 2px;
	border-right-width: 2px;
}

.hk-kanit-antet__kose--3 {
	bottom: -8px;
	left: -8px;
	border-bottom-width: 2px;
	border-left-width: 2px;
}

.hk-kanit-antet__kose--4 {
	bottom: -8px;
	right: -8px;
	border-bottom-width: 2px;
	border-right-width: 2px;
}

/* 959 px ve altında küçük yazı; 600–959 px'te 2 × 2, antetin hücreleri gibi
   (tek sütunda satırlar yarı boş kalıyordu).
   Masaüstünde (960 px ve üstü) dört sütun: antet ilk ekranda kalsın diye (iki
   satırlı antet çizimi 400 px'in altına
   iterdi). */
@container (max-width: 959px) {

	.hk-kanit-antet .hk-kanit {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hk-kanit-antet .hk-kanit .hk-kanit__oge,
	.hk-kanit-antet .hk-kanit .hk-kanit__oge:first-child {
		padding: 14px var(--bosluk-4);
	}

	.hk-kanit-antet .hk-kanit .hk-kanit__oge:nth-child(odd) {
		border-left: 0;
	}

	.hk-kanit-antet .hk-kanit .hk-kanit__oge:nth-child(n+3) {
		border-top: var(--kenar-ince) solid rgb(0 158 227 / 0.35);
	}

	.hk-kanit-antet .hk-kanit dd {
		font-size: 36px;
		line-height: 40px;
	}

	.hk-kanit-antet .hk-kanit dt {
		font-size: 16px;
		line-height: 21px;
	}
}

/* 599 px ve altında dört satır: rakamlar bir sütunda hizalı, etiketler
   sağda; satırlar antetin çizgileriyle ayrılır */
@container (max-width: 599px) {

	.hk-kanit-antet .hk-kanit {
		grid-template-columns: minmax(0, 1fr);
	}

	.hk-kanit-antet .hk-kanit .hk-kanit__oge,
	.hk-kanit-antet .hk-kanit .hk-kanit__oge:first-child,
	.hk-kanit-antet .hk-kanit .hk-kanit__oge:nth-child(even),
	.hk-kanit-antet .hk-kanit .hk-kanit__oge:nth-child(n+3) {
		border-left: 0;
		border-top: 0;
	}

	.hk-kanit-antet .hk-kanit .hk-kanit__oge + .hk-kanit__oge {
		border-top: var(--kenar-ince) solid rgb(0 158 227 / 0.35);
	}

	.hk-kanit-antet .hk-kanit dd {
		min-width: 80px;
	}
}


/* ---------- Sayfa geneli ---------- */
.hk-sayfa-a .hk-bolum {
	padding-block: var(--bosluk-9);
}

/* Bölüm kendi kap sorgusunu göremez; main kap olunca 959px ve 599px altındaki
   bölüm boşlukları (64px, 48px) uygulanır
   (14 Ekim 2026). Yatay ölçüler ve 1440 düzeni değişmez. */
.hk-sayfa-a > main {
	container-type: inline-size;
}

.hk-sayfa-a .hk-bolum__ic {
	gap: var(--bosluk-7);
}

.hk-sayfa-a .hk-bolum-basligi__metin {
	gap: var(--bosluk-4);
}

.hk-sayfa-a .hk-bolum-basligi .govde {
	font-size: 18px;
	line-height: 28px;
}

.hk-bolum--koyu {
	background: var(--zemin);
}

/* Koyu bantta ızgara deseni */
.hk-desenli {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.hk-desenli::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image:
		linear-gradient(rgb(0 158 227 / 0.1) 1px, transparent 1px),
		linear-gradient(90deg, rgb(0 158 227 / 0.1) 1px, transparent 1px),
		linear-gradient(rgb(197 198 198 / 0.045) 1px, transparent 1px),
		linear-gradient(90deg, rgb(197 198 198 / 0.045) 1px, transparent 1px);
	background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
	background-position: -1px -1px;
	-webkit-mask-image: radial-gradient(120% 90% at 85% 0%, #000 0%, transparent 70%);
	mask-image: radial-gradient(120% 90% at 85% 0%, #000 0%, transparent 70%);
}

/* Açık zemin çizim alanı: teknik çizim kâğıdı */
.hk-cizim-alani {
	position: relative;
	display: block;
	overflow: hidden;
	background-color: var(--beyaz);
	background-image:
		linear-gradient(rgb(0 110 158 / 0.1) 1px, transparent 1px),
		linear-gradient(90deg, rgb(0 110 158 / 0.1) 1px, transparent 1px),
		linear-gradient(rgb(35 37 37 / 0.045) 1px, transparent 1px),
		linear-gradient(90deg, rgb(35 37 37 / 0.045) 1px, transparent 1px);
	background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px;
	background-position: -1px -1px;
}

.hk-cizim-alani > svg {
	display: block;
	width: 100%;
	height: 100%;
}

.hk-akis-acik {
	animation: hk-akis 1.6s linear infinite;
}

.akis {
	animation: hk-akis 1.2s linear infinite;
}

/* ---------- Üç kapı ---------- */
.hk-kapilar {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--bosluk-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* kapı sayısından bağımsız: 960 px ve üstünde dörde kadar tek satır, beş ve
   üstünde üçlü ızgara */
@container (width > 959px) {

	.hk-kapilar {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
	}

	.hk-kapilar:has(> :nth-child(5)) {
		grid-auto-flow: row;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.hk-kapi-a {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: var(--yuzey);
	border: var(--kenar-ince) solid var(--cizgi);
	border-radius: var(--kose-orta);
	overflow: hidden;
	transition: border-color 120ms ease, box-shadow 120ms ease;
}

.hk-kapi-a .hk-cizim-alani {
	aspect-ratio: 16 / 10;
	border-bottom: var(--kenar-ince) solid var(--cizgi);
}

.hk-kapi-a__govde {
	display: grid;
	gap: var(--bosluk-2);
	padding: var(--bosluk-5) var(--bosluk-5) var(--bosluk-6);
}

.hk-kapi-a__no {
	font-family: var(--font-mono);
	font-size: 13px;
	line-height: 16px;
	letter-spacing: 0.04em;
	color: var(--baglanti);
}

.hk-kapi-a__ok {
	display: inline-flex;
	align-items: center;
	gap: var(--bosluk-2);
	margin-top: var(--bosluk-2);
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 24px;
	font-weight: 600;
	color: var(--baglanti);
}

.hk-kapi-a__ok .hk-simge {
	transition: transform 120ms ease, color 120ms ease;
}

.hk-kapi-a:has(.hk-kart__baglanti:hover) {
	border-color: var(--metin-baslik);
	box-shadow: var(--golge-yuzen);
}

.hk-kapi-a:has(.hk-kart__baglanti:hover) .hk-kapi-a__ok .hk-simge {
	transform: translateX(3px);
}

.hk-kapi-a:has(.hk-kart__baglanti:focus-visible),
.hk-sektor-a:has(.hk-kart__baglanti:focus-visible),
.hk-video-a:has(.hk-kart__baglanti:focus-visible) {
	outline: var(--odak-kalinligi) solid var(--odak);
	outline-offset: var(--odak-boslugu);
}

/* ---------- Ürün grupları: vitrin (tuvaldeki "Ürün grupları B") ----------
   PLC büyük koyu pafta, operatör paneli geniş logo mavisi kutu, diğer gruplar
   küçük kutu; altta ürün koduyla arama.
   Çizimdeki ışıklar (.hk-led) ve kesikli bağlantılar (.hk-akis-9) kutunun
   üzerine gelince canlanır. */
@keyframes hk-akis-9 {

	to {
		stroke-dashoffset: -36;
	}
}

.hk-akis-9 {
	animation: hk-akis-9 1.4s linear infinite paused;
}

.hk-vitrin-kutu:is(:hover, :focus-within) .hk-akis-9 {
	animation-play-state: running;
}

.hk-vitrin-kutu:is(:hover, :focus-within) .hk-led {
	animation: hk-yanip 1.6s ease-in-out infinite;
}

.hk-vitrin-kutu .hk-led:nth-of-type(3n) {
	animation-delay: 0.5s;
}

.hk-vitrin-kutu .hk-led:nth-of-type(3n + 1) {
	animation-delay: 1s;
}

.hk-vitrin {
	display: grid;
	gap: var(--bosluk-5);
	margin: 0;
	padding: 0;
	list-style: none;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-template-rows: repeat(3, 268px) auto;
	grid-template-areas: "plc plc hmi hmi" "plc plc srv ser" "gvn rol hab pan" "ara ara ara ara";
}

.hk-vitrin__oge {
	display: flex;
	min-width: 0;
}

.hk-vitrin__oge--plc {
	grid-area: plc;
}

.hk-vitrin__oge--hmi {
	grid-area: hmi;
}

.hk-vitrin__oge--srv {
	grid-area: srv;
}

.hk-vitrin__oge--ser {
	grid-area: ser;
}

.hk-vitrin__oge--gvn {
	grid-area: gvn;
}

.hk-vitrin__oge--rol {
	grid-area: rol;
}

.hk-vitrin__oge--hab {
	grid-area: hab;
}

.hk-vitrin__oge--pan {
	grid-area: pan;
}

.hk-vitrin__oge--ara {
	grid-area: ara;
}

.hk-vitrin-kutu {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	width: 100%;
	min-width: 0;
	border: var(--kenar-ince) solid var(--cizgi);
	border-radius: var(--kose-orta);
	background: var(--yuzey);
	color: var(--metin);
	transition: transform 350ms cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 350ms ease, border-color 350ms ease;
}

.hk-vitrin-kutu__cizim {
	flex: 1;
	min-height: 0;
	padding: var(--bosluk-5) var(--bosluk-5) 0;
	transition: transform 800ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.hk-vitrin-kutu__cizim > svg {
	display: block;
	width: 100%;
	height: 100%;
}

.hk-vitrin-kutu__alt {
	display: flex;
	align-items: flex-end;
	gap: var(--bosluk-3);
	padding: var(--bosluk-3) var(--bosluk-4) var(--bosluk-4) var(--bosluk-5);
}

.hk-vitrin-kutu__metin {
	flex: 1;
	min-width: 0;
	display: grid;
	gap: 2px;
	padding-bottom: 2px;
}

.hk-vitrin-kutu__baslik {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 18px;
	line-height: 24px;
	font-weight: 600;
	color: var(--metin-baslik);
	text-wrap: balance;
}

.hk-vitrin-kutu__baslik a {
	color: inherit;
	text-decoration: none;
}

.hk-vitrin-kutu__marka {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 13px;
	line-height: 18px;
	color: var(--metin);
}

.hk-vitrin-kutu:is(:hover, :focus-within) {
	transform: translateY(-4px);
	box-shadow: 0 16px 32px rgb(35 37 37 / 0.16);
}

.hk-vitrin-kutu:is(:hover, :focus-within) .hk-vitrin-kutu__cizim {
	transform: scale(1.04);
}

/* açık bölümün üstünde odak halkası koyu mavi */
.hk-vitrin-kutu:has(.hk-kart__baglanti:focus-visible) {
	outline: var(--odak-kalinligi) solid var(--koyu-mavi);
	outline-offset: var(--odak-boslugu);
}

/* yuvarlak ok düğmesi: kutunun üzerine gelince maviye döner, ok yer
   değiştirir */
.hk-vitrin-kutu:is(:hover, :focus-within) .hk-ok-dugme {
	background: var(--logo-mavisi);
}

.hk-vitrin-kutu:is(:hover, :focus-within) .hk-ok-dugme .hk-simge:first-child {
	transform: translate(150%, -150%);
}

.hk-vitrin-kutu:is(:hover, :focus-within) .hk-ok-dugme .hk-simge + .hk-simge {
	transform: none;
}

/* küçük kutular: açık çizim kâğıdı */
.hk-vitrin-kutu--tek {
	background-image:
		linear-gradient(rgb(0 110 158 / 0.08) 1px, transparent 1px),
		linear-gradient(90deg, rgb(0 110 158 / 0.08) 1px, transparent 1px),
		linear-gradient(rgb(35 37 37 / 0.035) 1px, transparent 1px),
		linear-gradient(90deg, rgb(35 37 37 / 0.035) 1px, transparent 1px);
	background-size: 64px 64px, 64px 64px, 16px 16px, 16px 16px;
	background-position: -1px -1px;
}

.hk-vitrin-kutu--tek:is(:hover, :focus-within) {
	border-color: var(--metin-baslik);
}

.hk-vitrin-kutu--tek .hk-ok-dugme {
	width: var(--kontrol-yuksekligi-kucuk);
	height: var(--kontrol-yuksekligi-kucuk);
}

.hk-vitrin-kutu--tek .hk-ok-dugme .hk-simge {
	width: 24px;
	height: 24px;
}

/* büyük kutu: PLC, koyu pafta (çerçeveli); büyük ölçekte çizgiler ince kalır */
.hk-vitrin-kutu.hk-vitrin-kutu--buyuk {
	border-color: transparent;
	background-color: var(--grafit);
	background-image:
		linear-gradient(rgb(0 158 227 / 0.12) 1px, transparent 1px),
		linear-gradient(90deg, rgb(0 158 227 / 0.12) 1px, transparent 1px),
		linear-gradient(rgb(197 198 198 / 0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgb(197 198 198 / 0.05) 1px, transparent 1px);
	background-size: 64px 64px, 64px 64px, 16px 16px, 16px 16px;
	background-position: -1px -1px;
}

.hk-vitrin-kutu--buyuk::before {
	content: "";
	position: absolute;
	inset: 10px;
	z-index: -1;
	pointer-events: none;
	border: var(--kenar-ince) solid rgb(197 198 198 / 0.18);
	border-radius: 2px;
	transition: border-color 350ms ease;
}

.hk-vitrin-kutu--buyuk:is(:hover, :focus-within)::before {
	border-color: rgb(0 158 227 / 0.5);
}

.hk-vitrin-kutu--buyuk svg * {
	vector-effect: non-scaling-stroke;
}

.hk-vitrin-kutu--buyuk .hk-vitrin-kutu__cizim {
	padding: 64px 72px 8px;
}

.hk-vitrin-kutu--buyuk .hk-vitrin-kutu__alt {
	padding: var(--bosluk-6);
}

.hk-vitrin-kutu--buyuk .hk-vitrin-kutu__metin {
	gap: var(--bosluk-1);
}

.hk-vitrin-kutu--buyuk .hk-vitrin-kutu__baslik {
	font-size: 44px;
	line-height: 48px;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.hk-vitrin-kutu--buyuk .hk-vitrin-kutu__marka {
	font-size: 15px;
	line-height: 22px;
}

.hk-vitrin-kutu--buyuk:is(:hover, :focus-within) {
	box-shadow: 0 20px 40px rgb(35 37 37 / 0.28);
}

/* geniş kutu: operatör paneli, logo mavisi zemin, grafit yazı (5,1:1) */
.hk-vitrin-kutu--genis {
	--metin-baslik: var(--grafit);
	--metin: var(--grafit);
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
	border-color: transparent;
	background: var(--logo-mavisi);
}

.hk-vitrin-kutu--genis .hk-vitrin-kutu__cizim {
	grid-column: 2;
	grid-row: 1;
	padding: var(--bosluk-5) var(--bosluk-5) var(--bosluk-5) 0;
}

.hk-vitrin-kutu--genis .hk-vitrin-kutu__alt {
	grid-column: 1;
	grid-row: 1;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	padding: var(--bosluk-6);
}

.hk-vitrin-kutu--genis .hk-vitrin-kutu__metin {
	flex: none;
	gap: var(--bosluk-1);
}

.hk-vitrin-kutu--genis .hk-vitrin-kutu__baslik {
	font-size: 28px;
	line-height: 34px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.hk-vitrin-kutu--genis .hk-vitrin-kutu__marka {
	font-size: 14px;
	line-height: 20px;
}

.hk-vitrin-kutu--genis .hk-ok-dugme {
	background: var(--beyaz);
}

.hk-vitrin-kutu--genis:is(:hover, :focus-within) .hk-ok-dugme {
	background: var(--grafit);
	color: var(--beyaz);
}

/* ürün koduyla arama şeridi */
.hk-vitrin__ara {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
	align-items: center;
	gap: var(--bosluk-6);
	width: 100%;
	padding: var(--bosluk-6) var(--bosluk-7);
	border-radius: var(--kose-orta);
	background: var(--grafit);
	color: var(--metin);
}

.hk-vitrin__ara-baslik {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 24px;
	line-height: 32px;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--metin-baslik);
}

.hk-vitrin__arama .hk-dugme {
	padding-inline: var(--bosluk-6);
}

/* ---------- Hizmetler: genişleyen paneller (koyu bant) ---------- */
.hk-hs-sayi {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 13px;
	line-height: 16px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--logo-mavisi);
}

/* min-width: 0, ızgara hücresinin panellerin iç genişliğiyle büyümesini
   önler */
.hk-hp {
	display: flex;
	gap: var(--bosluk-2);
	height: 560px;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hk-hp__panel {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: var(--bosluk-6);
	border-radius: var(--kose-orta);
	transition: flex-grow 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.hk-hp__panel > img {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(0.62) saturate(0.85);
	transform: scale(1.08);
	transition: filter 600ms ease, transform 900ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.hk-hp__panel::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(to top, rgb(35 37 37 / 0.95) 0%, rgb(35 37 37 / 0.72) 44%, rgb(35 37 37 / 0) 78%);
}

/* daralmış panelde başlık dikey yazılır */
.hk-hp__dikey {
	position: absolute;
	left: var(--bosluk-5);
	bottom: var(--bosluk-6);
	margin: 0;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	white-space: nowrap;
	font-family: var(--font-sans);
	font-size: 22px;
	line-height: 28px;
	font-weight: 600;
	color: var(--beyaz);
	transition: opacity 250ms ease;
}

/* açık panelin içeriği; sabit genişlik, panel genişlerken metin akışı
   bozulmasın */
.hk-hp__acik {
	flex: none;
	width: 460px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	column-gap: var(--bosluk-5);
	row-gap: var(--bosluk-3);
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 250ms ease, transform 500ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.hk-hp__acik > * {
	grid-column: 1;
}

.hk-hp__acik > .hk-ok-dugme {
	grid-column: 2;
	grid-row: 1 / span 3;
	align-self: end;
}

.hk-hp__baslik {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 36px;
	line-height: 44px;
	font-weight: 700;
	letter-spacing: -0.015em;
	color: var(--beyaz);
}

.hk-hp__baglanti {
	color: inherit;
	text-decoration: none;
}

.hk-hp__baglanti::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.hk-hp__baglanti:focus-visible {
	outline: none;
}

.hk-hp__panel:has(.hk-hp__baglanti:focus-visible) {
	outline: var(--odak-kalinligi) solid var(--odak);
	outline-offset: -3px;
}

/* Grubun fotoğrafı yüklenmemişse panel teknik ızgaralı koyu zeminde (Beest
   kararı, 16 Ekim 2026) */
.hk-hp__panel:not(:has(> img)) {
	background-color: var(--grafit);
	background-image:
		linear-gradient(rgb(0 158 227 / 0.12) 1px, transparent 1px),
		linear-gradient(90deg, rgb(0 158 227 / 0.12) 1px, transparent 1px),
		linear-gradient(rgb(197 198 198 / 0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgb(197 198 198 / 0.05) 1px, transparent 1px);
	background-size: 64px 64px, 64px 64px, 16px 16px, 16px 16px;
	background-position: -1px -1px;
}

.hk-hp__liste {
	display: grid;
	gap: var(--bosluk-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hk-hp__liste a {
	position: relative;
	z-index: 2;
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 26px;
	font-weight: 500;
	color: rgb(255 255 255 / 0.86);
	text-decoration: none;
}

/* ok metnin hemen ardından gelir; satır kırılsa da sağa kaçmaz */
.hk-hp__liste a .hk-simge {
	display: inline-block;
	vertical-align: -2px;
	margin-left: 6px;
	width: var(--simge-kucuk);
	height: var(--simge-kucuk);
	color: var(--logo-mavisi);
	transition: transform 150ms ease;
}

.hk-hp__liste a:hover {
	color: var(--beyaz);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.hk-hp__liste .hk-tek-satir {
	white-space: nowrap;
}

.hk-hp__liste a:hover .hk-simge {
	transform: translateX(2px);
}

/* açık panel: üzerine gelinen ya da odaktaki; hiçbiri değilse ilki */
.hk-hp__panel:is(:hover, :focus-within),
.hk-hp:not(:has(.hk-hp__panel:is(:hover, :focus-within))) .hk-hp__panel:first-child {
	flex-grow: 4.6;
}

.hk-hp__panel:is(:hover, :focus-within) > img,
.hk-hp:not(:has(.hk-hp__panel:is(:hover, :focus-within))) .hk-hp__panel:first-child > img {
	filter: none;
	transform: none;
}

.hk-hp__panel:is(:hover, :focus-within) .hk-hp__dikey,
.hk-hp:not(:has(.hk-hp__panel:is(:hover, :focus-within))) .hk-hp__panel:first-child .hk-hp__dikey {
	opacity: 0;
}

.hk-hp__panel:is(:hover, :focus-within) .hk-hp__acik,
.hk-hp:not(:has(.hk-hp__panel:is(:hover, :focus-within))) .hk-hp__panel:first-child .hk-hp__acik {
	opacity: 1;
	transform: none;
	transition-delay: 250ms;
}

.hk-hp__panel:not(:is(:hover, :focus-within)) .hk-hp__acik {
	pointer-events: none;
}

.hk-hp:not(:has(.hk-hp__panel:is(:hover, :focus-within))) .hk-hp__panel:first-child .hk-hp__acik {
	pointer-events: auto;
}

/* ---------- Yuvarlak ok düğmesi (proje kartı, hizmet paneli) ---------- */
.hk-ok-dugme {
	display: grid;
	place-items: center;
	flex: none;
	overflow: hidden;
	width: var(--kontrol-yuksekligi);
	height: var(--kontrol-yuksekligi);
	border-radius: var(--kose-daire);
	background: var(--cok-acik-gri);
	color: var(--grafit);
	pointer-events: none;
	transition: background-color 250ms ease;
}

.hk-ok-dugme .hk-simge {
	grid-area: 1 / 1;
	width: var(--simge-iri);
	height: var(--simge-iri);
	transition: transform 400ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.hk-ok-dugme .hk-simge + .hk-simge {
	transform: translate(-150%, 150%);
}

:is(.hk-proje-b, .hk-hp__panel):is(:hover, :focus-within) .hk-ok-dugme {
	background: var(--logo-mavisi);
}

:is(.hk-proje-b, .hk-hp__panel):is(:hover, :focus-within) .hk-ok-dugme .hk-simge:first-child {
	transform: translate(150%, -150%);
}

:is(.hk-proje-b, .hk-hp__panel):is(:hover, :focus-within) .hk-ok-dugme .hk-simge + .hk-simge {
	transform: none;
}

.hk-hp:not(:has(.hk-hp__panel:is(:hover, :focus-within))) .hk-hp__panel:first-child .hk-ok-dugme {
	background: var(--logo-mavisi);
}

.hk-hp:not(:has(.hk-hp__panel:is(:hover, :focus-within))) .hk-hp__panel:first-child .hk-ok-dugme .hk-simge:first-child {
	transform: translate(150%, -150%);
}

.hk-hp:not(:has(.hk-hp__panel:is(:hover, :focus-within))) .hk-hp__panel:first-child .hk-ok-dugme .hk-simge + .hk-simge {
	transform: none;
}

/* ---------- Sektör kartı ---------- */
.hk-sektor-a .hk-cizim-alani {
	aspect-ratio: 16 / 10;
	border-bottom: var(--kenar-ince) solid var(--cizgi);
}

.hk-sektor-a .hk-kart__govde {
	gap: var(--bosluk-3);
}

.hk-sektor-a__uygulamalar {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bosluk-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hk-sektor-a__uygulamalar li {
	padding: 3px var(--bosluk-2);
	border: var(--kenar-ince) solid var(--cizgi);
	border-radius: var(--kose-kucuk);
	background: var(--zemin-ikincil);
	font-family: var(--font-sans);
	font-size: 13px;
	line-height: 18px;
	color: var(--metin-baslik);
}

.hk-sektor-a:has(.hk-kart__baglanti:hover) {
	border-color: var(--metin-baslik);
}

/* ---------- Video kartı (bütün şablonlar; Beest kararları, 14 Ekim 2026)
   ----------
   Video kartı denemelerindeki A (açık kart) ve C'deki oynat karesi. Ana sayfa,
   ürün kategorisi, ürün ve Rehber videolar
   sayfaları aynı kartı kullanır (anasayfa.video_kart). Video detay sayfası yok:
   kartın tamamı videoyu YouTube'da yeni
   sekmede açar. Eski koyu kart (hk-video-a) kaldırıldı; koyu süre etiketi
   Rehber videolar mozaiği için duruyor. */

/* Oynat karesi (Beest kararı, 14 Ekim 2026; Video kartı denemeleri C'den):
   kapağın ortasında logo mavisi kare, beyaz
   simge. Bütün video kartlarında, Rehber videolar girişindeki mozaikte ve
   kanal bandında aynı. */
.hk-oynat-v {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 1;
	transform: translate(-50%, -50%);
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: var(--kose-kucuk);
	background: var(--logo-mavisi);
	color: var(--beyaz);
	box-shadow: 0 6px 14px rgb(0 110 158 / 0.35);
	transition: background-color 160ms ease, color 160ms ease;
	pointer-events: none;  /* tıklama alttaki bağlantıya geçer */
}

.hk-oynat-v .hk-simge {
	width: 18px;
	height: 18px;
	fill: currentcolor;
	stroke: none;
	margin-left: 2px;
}

.hk-video-v {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--beyaz);
	border: var(--kenar-ince) solid color-mix(in srgb, var(--acik-gri) 60%, var(--beyaz));
	border-radius: var(--kose-orta);
	overflow: hidden;
	transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.hk-video-v:has(.hk-kart__baglanti:hover) {
	border-color: var(--logo-mavisi);
	box-shadow: 0 14px 28px rgb(0 110 158 / 0.14);
	transform: translateY(-3px);
}

.hk-video-v:has(.hk-kart__baglanti:hover) .hk-video-v__kapak > img {
	transform: scale(1.04);
}

.hk-video-v:has(.hk-kart__baglanti:hover) .hk-oynat-v {
	background: var(--grafit);
}

.hk-video-v:has(.hk-kart__baglanti:focus-visible) {
	outline: var(--odak-kalinligi) solid var(--odak);
	outline-offset: var(--odak-boslugu);
}

.hk-video-v__kapak {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--cok-acik-gri);
}

.hk-video-v__kapak > img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.hk-video-v__sure {
	position: absolute;
	right: var(--bosluk-3);
	bottom: var(--bosluk-3);
	padding: 3px var(--bosluk-2);
	border-radius: var(--kose-kucuk);
	background: var(--beyaz);
	color: var(--grafit);
	font-family: var(--font-mono);
	font-size: 12px;
	line-height: 16px;
	font-weight: 600;
	box-shadow: 0 2px 8px rgb(35 37 37 / 0.2);
}

.hk-video-v__govde {
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
	padding: 18px var(--bosluk-5) var(--bosluk-5);
}

.hk-video-v__ust {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--bosluk-2);
	margin: 0;
}

.hk-video-v__konu {
	padding: 3px var(--bosluk-2);
	border-radius: var(--kose-kucuk);
	background: color-mix(in srgb, var(--logo-mavisi) 12%, var(--beyaz));
	color: var(--koyu-mavi);
	font-family: var(--font-sans);
	font-size: 12px;
	line-height: 16px;
	font-weight: 600;
}

.hk-video-v__marka {
	font-family: var(--font-sans);
	font-size: 13px;
	line-height: 16px;
	color: var(--metin);
}

.hk-video-v__ad {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 18px;
	line-height: 26px;
	font-weight: 600;
	color: var(--grafit);
}

.hk-video-v__ad .hk-kart__baglanti {
	color: inherit;
}

.hk-video-v__alt {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: var(--bosluk-2) var(--bosluk-4);
	margin-top: auto;
	padding-top: 14px;
	border-top: var(--kenar-ince) solid var(--cok-acik-gri);
	font-family: var(--font-sans);
	font-size: 13px;
	line-height: 18px;
	color: var(--metin);
}

/* YouTube'da izle: video detay sayfası yok (Beest kararı, 14 Ekim 2026);
   kartın tamamı videoyu YouTube'da açar, bu yalnızca etiket */
.hk-video-v__yt {
	display: inline-flex;
	align-items: center;
	gap: var(--bosluk-1);
	color: var(--koyu-mavi);
	font-family: var(--font-sans);
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
}

.hk-video-v:has(.hk-kart__baglanti:hover) .hk-video-v__yt {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.hk-video-v__yt .hk-simge {
	width: var(--simge-kucuk);
	height: var(--simge-kucuk);
}

/* koyu süre etiketi (Rehber videolar girişindeki mozaik) */
.hk-video-a__sure {
	position: absolute;
	right: var(--bosluk-3);
	bottom: var(--bosluk-3);
	padding: 2px var(--bosluk-2);
	border-radius: var(--kose-kucuk);
	background: rgb(35 37 37 / 0.88);
	color: var(--beyaz);
	font-family: var(--font-mono);
	font-size: 12px;
	line-height: 18px;
}

@container (max-width: 599px) {

	/* telefonda kartlar tek sütun, dikey */
	.hk-video-v .hk-oynat-v {
		width: 40px;
		height: 40px;
	}

	.hk-video-v .hk-oynat-v .hk-simge {
		width: 16px;
		height: 16px;
	}

	.hk-video-v__govde {
		gap: var(--bosluk-2);
		padding: var(--bosluk-4);
	}

	.hk-video-v__ad {
		font-size: 17px;
		line-height: 24px;
	}

	.hk-video-v__alt {
		padding-top: var(--bosluk-3);
	}
}

.hk-bolum-basligi__eylemler {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bosluk-2) var(--bosluk-6);
	align-items: center;
}

/* yatayda ortalı bölüm başlığı (Çalıştığımız markalar) */
.hk-bolum-basligi--orta {
	justify-content: center;
	text-align: center;
}

.hk-bolum-basligi--orta .hk-bolum-basligi__metin {
	justify-items: center;
}

/* ---------- Süreç adımları ---------- */
.hk-adimlar {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--bosluk-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hk-adim {
	position: relative;
	display: grid;
	gap: var(--bosluk-2);
	align-content: start;
	padding-top: 88px;
}

.hk-adim__no {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	border: var(--kenar-kalin) solid var(--metin-baslik);
	background: var(--zemin);
	font-family: var(--font-mono);
	font-size: 18px;
	line-height: 1;
	color: var(--metin-baslik);
}

.hk-adim:not(:last-child)::after {
	content: "";
	position: absolute;
	left: 76px;
	right: -12px;
	top: 31px;
	border-top: var(--kenar-kalin) dashed var(--cizgi);
}

.hk-adim__baslik {
	font-family: var(--font-sans);
	font-size: 20px;
	line-height: 28px;
	font-weight: 600;
	color: var(--metin-baslik);
	margin: 0;
}

/* ---------- Kanıt ---------- */
.hk-kanit-a {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--bosluk-6);
	align-items: start;
}

.hk-kanit-a__giris {
	display: grid;
	gap: var(--bosluk-4);
	align-content: start;
}

.hk-kanit-a__giris .hk-dugme {
	justify-self: start;
}

.hk-vaka-a .hk-cizim-alani {
	aspect-ratio: 16 / 10;
	border-bottom: var(--kenar-ince) solid var(--cizgi);
	display: grid;
}

.hk-vaka-a .hk-cizim-alani > svg {
	grid-area: 1 / 1;
}

.hk-vaka-a__yer {
	grid-area: 1 / 1;
	align-self: center;
	justify-self: center;
	display: grid;
	justify-items: center;
	gap: var(--bosluk-2);
	font-family: var(--font-sans);
	font-size: 14px;
	line-height: 20px;
	color: var(--metin);
	text-align: center;
}

.hk-vaka-a__yer .hk-simge {
	width: var(--simge-iri);
	height: var(--simge-iri);
	color: var(--metin-baslik);
}

.hk-vaka-a .hk-kart__govde {
	gap: var(--bosluk-3);
}

/* ---------- Markalar ---------- */
.hk-markalar-a {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: var(--kenar-kalin) solid var(--metin-baslik);
}

.hk-markalar-a li {
	display: grid;
	place-items: center;
	min-height: 120px;
	padding: var(--bosluk-4);
	border-bottom: var(--kenar-ince) solid var(--cizgi);
	border-right: var(--kenar-ince) solid var(--cizgi);
	font-family: var(--font-sans);
	font-size: 24px;
	line-height: 32px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--metin-baslik);
}

.hk-markalar-a li:last-child {
	border-right: 0;
}

/* Marka sayısından bağımsız (Beest kararı, 16 Ekim 2026: gruplar yönetim
   panelinden eklenip çıkarılır): 960 px ve üstünde yedi
   markaya kadar tek satır, sütun sayısı marka sayısı kadar; daha çoksa satırlar
   dengelenir (8 → 4 + 4, 9–10 → beşli,
   11–12 → altılı, 13 ve üstü yedili). 959 px ve altındaki üç ve iki sütun
   değişmez. */
@container (width > 959px) {

	.hk-markalar-a {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
	}

	.hk-markalar-a:has(> li:nth-child(8)) {
		grid-auto-flow: row;
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.hk-markalar-a:has(> li:nth-child(9)) {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	.hk-markalar-a:has(> li:nth-child(11)) {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	.hk-markalar-a:has(> li:nth-child(13)) {
		grid-template-columns: repeat(7, minmax(0, 1fr));
	}

	.hk-markalar-a:has(> li:nth-child(8)):not(:has(> li:nth-child(9))) > li:nth-child(4n),
	.hk-markalar-a:has(> li:nth-child(9)):not(:has(> li:nth-child(11))) > li:nth-child(5n),
	.hk-markalar-a:has(> li:nth-child(11)):not(:has(> li:nth-child(13))) > li:nth-child(6n),
	.hk-markalar-a:has(> li:nth-child(13)) > li:nth-child(7n) {
		border-right: 0;
	}
}

/* logolar kendi renkleriyle; görsel ağırlıklar dengelensin diye yükseklikler
   ayrı */
.hk-markalar-a__logo {
	display: block;
	width: auto;
	max-width: 100%;
	height: 24px;
}

.hk-markalar-a__logo--siemens {
	height: 20px;
}

.hk-markalar-a__logo--keyence {
	height: 22px;
}

.hk-markalar-a__logo--cognex {
	height: 20px;
}

.hk-markalar-a__logo--sick {
	height: 30px;
}

.hk-markalar-a__logo--banner {
	height: 34px;
}

/* katalogdaki markalar (12 Ekim 2026): yükseklikler Ürünler sayfasındaki
   marka kartlarıyla aynı oranda */
.hk-markalar-a__logo--phoenix-contact {
	height: 28px;
}

.hk-markalar-a__logo--loobar {
	height: 30px;
}

.hk-markalar-a__logo--murrelektronik {
	height: 22px;
}

.hk-markalar-a__logo--schmersal {
	height: 26px;
}

.hk-markalar-a__logo--pizzato {
	height: 28px;
}

.hk-markalar-a__logo--teltonika {
	height: 18px;
}

/* ---------- SSS ---------- */
.hk-sss-a {
	display: grid;
	grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
	gap: var(--bosluk-8);
	align-items: start;
}

.hk-sss-a__giris {
	display: grid;
	gap: var(--bosluk-4);
	align-content: start;
}

.hk-sss-a .hk-sss {
	max-width: none;
	border-top: var(--kenar-kalin) solid var(--metin-baslik);
}

/* SSS: açılır kapanır yanıtlar. Soru düğmesi: numara · soru · artı işareti;
   açılınca artı eksiye döner, daire maviye.
   Yanıt yükseklik animasyonuyla (0fr → 1fr) açılır; kapalı yanıt görünmez ve
   odak almaz (visibility). */
.hk-sss-a .hk-sss__oge {
	display: block;
	padding: 0;
}

.hk-sss__baslik {
	margin: 0;
}

.hk-sss__soru {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr) 40px;
	align-items: center;
	column-gap: var(--bosluk-4);
	width: 100%;
	padding: var(--bosluk-5) 0;
	border: 0;
	background: none;
	cursor: pointer;
	text-align: left;
	font: inherit;
	color: var(--metin-baslik);
}

.hk-sss__soru:focus-visible {
	outline: var(--odak-kalinligi) solid var(--odak);
	outline-offset: var(--odak-boslugu);
}

.hk-sss-a .hk-sss__no {
	font-family: var(--font-mono);
	font-size: 14px;
	line-height: 28px;
	color: var(--baglanti);
}

.hk-sss__soru-metni {
	font-family: var(--font-sans);
	font-size: 20px;
	line-height: 28px;
	font-weight: 600;
}

.hk-sss__isaret {
	position: relative;
	width: 40px;
	height: 40px;
	border-radius: var(--kose-daire);
	background: var(--yuzey);
	color: var(--metin-baslik);
	transition: background-color 250ms ease;
}

.hk-sss__isaret::before,
.hk-sss__isaret::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 14px;
	height: 2px;
	margin: -1px 0 0 -7px;
	border-radius: 1px;
	background: currentcolor;
	transition: transform 400ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.hk-sss__isaret::after {
	transform: rotate(90deg);
}

.hk-sss__soru:hover .hk-sss__isaret,
.hk-sss__oge[data-acik="true"] .hk-sss__isaret {
	background: var(--logo-mavisi);
}

.hk-sss__oge[data-acik="true"] .hk-sss__isaret::after {
	transform: rotate(0deg);
}

.hk-sss-a .hk-sss__yanit {
	display: grid;
	grid-template-rows: 0fr;
	gap: 0;
	visibility: hidden;
	transition: grid-template-rows 400ms cubic-bezier(0.2, 0.7, 0.2, 1), visibility 400ms;
}

.hk-sss__yanit-ic {
	min-height: 0;
	overflow: hidden;
}

.hk-sss__yanit-ic > p {
	margin: 0;
	padding: 0 56px var(--bosluk-5) 64px;
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity 300ms ease, transform 400ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.hk-sss__oge[data-acik="true"] .hk-sss__yanit {
	grid-template-rows: 1fr;
	visibility: visible;
}

.hk-sss__oge[data-acik="true"] .hk-sss__yanit-ic > p {
	opacity: 1;
	transform: none;
	transition-delay: 100ms;
}

/* ---------- Kapanış bandı ---------- */
.hk-kapanis-a {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.hk-kapanis-a__ic {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
	gap: var(--bosluk-8);
	align-items: end;
}

.hk-kapanis-a__metin {
	display: grid;
	gap: var(--bosluk-5);
	align-content: start;
	justify-items: start;
	padding-block: var(--bosluk-9);
}

.hk-kapanis-a__metin .baslik-1 {
	max-width: 640px;
}

.hk-kapanis-a__metin .hk-dugme-dizisi {
	margin-top: var(--bosluk-2);
}

.hk-kapanis-a__cizim {
	align-self: end;
	margin-bottom: -150px;
	padding-top: var(--bosluk-7);
	opacity: 0.75;
	pointer-events: none;
}

.hk-kapanis-a__cizim > svg {
	display: block;
	width: 100%;
	height: auto;
}

/* ---------- Projeler: tek satır, yatay kayan kart galerisi ---------- */

/* sahne: kaydırılan şerit ve iki gezinme düğmesi aynı ızgara hücresinde */
.hk-galeri__sahne {
	display: grid;
	margin-top: calc(var(--bosluk-7) - var(--bosluk-3));
}

.hk-galeri__iz {
	grid-area: 1 / 1;
	min-width: 0;
	display: flex;
	gap: var(--bosluk-5);
	margin: 0 0 calc(-1 * var(--bosluk-7));
	padding: var(--bosluk-3) 0 var(--bosluk-7);
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	padding-inline: max(var(--sayfa-kenari), calc((100% - var(--genis-genislik)) / 2));
	scroll-padding-inline: max(var(--sayfa-kenari), calc((100% - var(--genis-genislik)) / 2));
}

.hk-galeri__iz::-webkit-scrollbar {
	display: none;
}

.hk-galeri__oge {
	flex: 0 0 368px;
	display: flex;
	scroll-snap-align: start;
}

/* gezinme düğmeleri: kartların dikey ortasında (şeridin 12 px üst payı
   margin-top ile atlanır), kap kenarlarının
   tam üstünde; görsellerin üzerinde okunsun diye beyaz daire ve gölge. Başta
   önceki, sonda sonraki gizlenir. */
.hk-galeri__ok {
	grid-area: 1 / 1;
	align-self: center;
	position: relative;
	z-index: 2;
	display: grid;
	place-items: center;
	width: var(--kontrol-yuksekligi);
	height: var(--kontrol-yuksekligi);
	margin-top: var(--bosluk-3);
	padding: 0;
	border: 0;
	border-radius: var(--kose-daire);
	background: var(--beyaz);
	color: var(--grafit);
	box-shadow: 0 6px 20px rgb(35 37 37 / 0.28);
	cursor: pointer;
	transition: background-color 200ms ease, opacity 250ms ease, visibility 250ms, transform 200ms ease;
}

.hk-galeri__ok .hk-simge {
	width: 24px;
	height: 24px;
}

.hk-galeri__ok--geri {
	justify-self: start;
	margin-left: max(var(--bosluk-2), calc(max(var(--sayfa-kenari), (100% - var(--genis-genislik)) / 2) - var(--kontrol-yuksekligi) / 2));
}

.hk-galeri__ok--ileri {
	justify-self: end;
	margin-right: max(var(--bosluk-2), calc(max(var(--sayfa-kenari), (100% - var(--genis-genislik)) / 2) - var(--kontrol-yuksekligi) / 2));
}

.hk-galeri__ok:hover {
	background: var(--logo-mavisi);
}

.hk-galeri__ok:active {
	transform: scale(0.94);
}

.hk-galeri__ok:focus-visible {
	outline: var(--odak-kalinligi) solid var(--koyu-mavi);
	outline-offset: var(--odak-boslugu);
}

.hk-galeri__ok:disabled {
	opacity: 0;
	visibility: hidden;
}

/* Proje kartı: görsel kartın tamamını kaplar; başlık altta, sağ altta
   yuvarlak ok düğmesi */
.hk-proje-b {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	width: 100%;
	aspect-ratio: 4 / 5;
	border-radius: var(--kose-orta);
	background: var(--grafit);
	color: var(--metin);
	transition: transform 350ms cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 350ms ease;
	animation: hk-kart-gel 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.hk-galeri__oge:nth-child(2) .hk-proje-b {
	animation-delay: 0.08s;
}

.hk-galeri__oge:nth-child(3) .hk-proje-b {
	animation-delay: 0.16s;
}

.hk-galeri__oge:nth-child(4) .hk-proje-b {
	animation-delay: 0.24s;
}

.hk-galeri__oge:nth-child(n+5) .hk-proje-b {
	animation-delay: 0.32s;
}

@keyframes hk-kart-gel {

	from {
		opacity: 0;
		transform: translateY(20px);
	}
}

.hk-proje-b__gorsel {
	position: absolute;
	inset: 0;
	z-index: -2;
	transition: transform 800ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.hk-proje-b__gorsel > img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hk-proje-b__gorsel--cizim {
	background-color: var(--grafit);
	background-image:
		linear-gradient(rgb(0 158 227 / 0.12) 1px, transparent 1px),
		linear-gradient(90deg, rgb(0 158 227 / 0.12) 1px, transparent 1px),
		linear-gradient(rgb(197 198 198 / 0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgb(197 198 198 / 0.05) 1px, transparent 1px);
	background-size: 64px 64px, 64px 64px, 16px 16px, 16px 16px;
	background-position: -1px -1px;
}

.hk-proje-b__gorsel--cizim > svg {
	position: absolute;
	left: 6%;
	top: 7%;
	width: 88%;
	height: auto;
}

.hk-proje-b::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(to top, rgb(35 37 37 / 0.97) 0%, rgb(35 37 37 / 0.88) 28%, rgb(35 37 37 / 0) 60%);
}

.hk-proje-b__icerik {
	display: grid;
	gap: var(--bosluk-2);
	padding: var(--bosluk-5);
}

.hk-proje-b__etiketler {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 var(--bosluk-1);
	padding: 0;
	list-style: none;
}

.hk-proje-b__etiketler li {
	padding: 2px var(--bosluk-2);
	border: var(--kenar-ince) solid rgb(255 255 255 / 0.24);
	border-radius: var(--kose-kucuk);
	background: rgb(255 255 255 / 0.07);
	font-family: var(--font-sans);
	font-size: 12px;
	line-height: 18px;
	font-weight: 600;
	color: var(--metin-baslik);
}

.hk-proje-b__alt {
	display: flex;
	align-items: flex-end;
	gap: var(--bosluk-4);
}

/* Başlığın son satırı düğmenin ortasına hizalanır: (48 - 28) / 2 */
.hk-proje-b__baslik {
	flex: 1;
	min-width: 0;
	margin: 0;
	padding-bottom: calc((var(--kontrol-yuksekligi) - 28px) / 2);
	font-family: var(--font-sans);
	font-size: 20px;
	line-height: 28px;
	font-weight: 600;
	letter-spacing: -0.005em;
	color: var(--metin-baslik);
	text-wrap: balance;
}

.hk-proje-b__baslik a {
	color: inherit;
	text-decoration: none;
}

.hk-proje-b .hk-akis-acik {
	animation-play-state: paused;
}

.hk-proje-b:hover,
.hk-proje-b:focus-within {
	transform: translateY(-6px);
	box-shadow: 0 20px 40px rgb(35 37 37 / 0.3);
}

.hk-proje-b:hover .hk-proje-b__gorsel,
.hk-proje-b:focus-within .hk-proje-b__gorsel {
	transform: scale(1.06);
}

.hk-proje-b:hover .hk-akis-acik,
.hk-proje-b:focus-within .hk-akis-acik {
	animation-play-state: running;
}

.hk-proje-b:has(.hk-kart__baglanti:focus-visible) {
	outline: var(--odak-kalinligi) solid var(--odak);
	outline-offset: var(--odak-boslugu);
}

/* ---------- Duyarlı düzen ---------- */
@container (max-width: 1199px) {

	.hk-hp__baslik {
		font-size: 30px;
		line-height: 38px;
	}

	.hk-hp__acik {
		width: 400px;
	}

	.hk-kanit-a {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.hk-kanit-a__giris {
		grid-column: 1 / -1;
	}
}

@container (max-width: 959px) {

	.hk-hp {
		flex-direction: column;
		height: auto;
	}

	.hk-hp__panel {
		flex: none;
		min-height: 300px;
	}

	.hk-hp__panel > img {
		filter: none;
		transform: none;
	}

	.hk-hp__dikey {
		display: none;
	}

	.hk-hp__acik {
		width: auto;
		opacity: 1;
		transform: none;
	}

	.hk-hp__panel:not(:is(:hover, :focus-within)) .hk-hp__acik {
		pointer-events: auto;
	}

	.hk-hp__panel::after {
		background: linear-gradient(to top, rgb(35 37 37 / 0.95) 0%, rgb(35 37 37 / 0.8) 55%, rgb(35 37 37 / 0.3) 100%);
	}

	/* alt alta dizilişte hepsi açık; ilk panelin düğmesi ötekilerden ayrışmasın */
	.hk-hp:not(:has(.hk-hp__panel:is(:hover, :focus-within))) .hk-hp__panel:first-child .hk-ok-dugme {
		background: var(--cok-acik-gri);
	}

	.hk-hp:not(:has(.hk-hp__panel:is(:hover, :focus-within))) .hk-hp__panel:first-child .hk-ok-dugme .hk-simge:first-child {
		transform: none;
	}

	.hk-hp:not(:has(.hk-hp__panel:is(:hover, :focus-within))) .hk-hp__panel:first-child .hk-ok-dugme .hk-simge + .hk-simge {
		transform: translate(-150%, 150%);
	}

	.hk-sayfa-a .hk-bolum {
		padding-block: var(--bosluk-8);
	}

	.hk-kapilar {
		grid-template-columns: 1fr;
	}

	.hk-kapi-a {
		flex-direction: row;
	}

	.hk-kapi-a .hk-cizim-alani {
		width: 44%;
		flex: none;
		aspect-ratio: auto;
		min-height: 220px;
		border-bottom: 0;
		border-right: var(--kenar-ince) solid var(--cizgi);
	}

	.hk-kapi-a__govde {
		align-content: center;
	}

	.hk-adimlar {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: var(--bosluk-6);
	}

	.hk-adim:nth-child(2)::after {
		display: none;
	}

	.hk-markalar-a {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.hk-markalar-a li:nth-child(3n) {
		border-right: 0;
	}

	.hk-sss-a {
		grid-template-columns: 1fr;
		gap: var(--bosluk-6);
	}

	.hk-kapanis-a__ic {
		grid-template-columns: 1fr;
	}

	.hk-kapanis-a__cizim {
		display: none;
	}
}

@container (max-width: 599px) {

	.hk-hp__panel {
		min-height: 280px;
		padding: var(--bosluk-5) var(--bosluk-4);
	}

	.hk-hp__baslik {
		font-size: 26px;
		line-height: 32px;
	}

	.hk-galeri__oge {
		flex-basis: 82%;
	}

	.hk-galeri__ok {
		display: none;
	}

	.hk-galeri__sahne {
		margin-top: calc(var(--bosluk-5) - var(--bosluk-3));
	}

	.hk-proje-b__icerik {
		padding: var(--bosluk-4);
	}

	.hk-proje-b__alt {
		gap: var(--bosluk-3);
	}

	.hk-proje-b__baslik {
		font-size: 18px;
		line-height: 26px;
		padding-bottom: calc((var(--kontrol-yuksekligi) - 26px) / 2);
	}

	.hk-galeri__iz {
		gap: var(--bosluk-3);
		padding-inline: var(--sayfa-kenari-mobil);
		scroll-padding-inline: var(--sayfa-kenari-mobil);
	}

	.hk-sayfa-a .hk-bolum {
		padding-block: var(--bosluk-7);
	}

	.hk-sayfa-a .hk-bolum__ic {
		gap: var(--bosluk-6);
	}

	.hk-sayfa-a .hk-bolum-basligi .govde {
		font-size: 16px;
		line-height: 26px;
	}

	.hk-kapi-a {
		flex-direction: column;
	}

	.hk-kapi-a .hk-cizim-alani {
		width: auto;
		min-height: 0;
		aspect-ratio: 16 / 10;
		border-right: 0;
		border-bottom: var(--kenar-ince) solid var(--cizgi);
	}

	.hk-kapi-a__govde {
		padding: var(--bosluk-4) var(--bosluk-4) var(--bosluk-5);
	}

	.hk-adimlar {
		grid-template-columns: 1fr;
		row-gap: var(--bosluk-5);
	}

	.hk-adim {
		padding: 0 0 0 76px;
		min-height: 64px;
	}

	.hk-adim:not(:last-child)::after {
		display: block;
		left: 31px;
		right: auto;
		top: 72px;
		bottom: -16px;
		border-top: 0;
		border-left: var(--kenar-kalin) dashed var(--cizgi);
	}

	.hk-kanit-a {
		grid-template-columns: 1fr;
	}

	.hk-markalar-a {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hk-markalar-a li {
		min-height: 88px;
		font-size: 20px;
		line-height: 28px;
	}

	.hk-markalar-a li:nth-child(3n) {
		border-right: var(--kenar-ince) solid var(--cizgi);
	}

	.hk-markalar-a li:nth-child(2n) {
		border-right: 0;
	}

	.hk-markalar-a li:last-child:nth-child(odd) {
		grid-column: 1 / -1;
		border-right: 0;
	}

	.hk-sss__soru {
		grid-template-columns: 32px minmax(0, 1fr) 36px;
		column-gap: var(--bosluk-3);
		padding-block: var(--bosluk-4);
	}

	.hk-sss__soru-metni {
		font-size: 18px;
		line-height: 26px;
	}

	.hk-sss__isaret {
		width: 36px;
		height: 36px;
	}

	.hk-sss__yanit-ic > p {
		padding: 0 48px var(--bosluk-4) 44px;
	}

	.hk-kapanis-a__metin {
		padding-block: var(--bosluk-8);
		justify-items: stretch;
	}

	.hk-kapanis-a__metin .hk-dugme-dizisi {
		display: grid;
	}
}

/* ---------- Ürün grupları vitrini: duyarlı düzen ---------- */
@container (max-width: 1199px) {

	.hk-vitrin-kutu--buyuk .hk-vitrin-kutu__cizim {
		padding: 48px 48px 8px;
	}

	.hk-vitrin-kutu--buyuk .hk-vitrin-kutu__baslik {
		font-size: 36px;
		line-height: 40px;
	}

	.hk-vitrin__ara {
		grid-template-columns: 1fr;
		gap: var(--bosluk-4);
		padding: var(--bosluk-6);
	}
}

@container (max-width: 959px) {

	.hk-vitrin {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: none;
		grid-auto-rows: auto;
		grid-template-areas: "plc plc" "hmi hmi" "srv ser" "gvn rol" "hab pan" "ara ara";
	}

	.hk-vitrin-kutu--buyuk .hk-vitrin-kutu__cizim,
	.hk-vitrin-kutu--tek .hk-vitrin-kutu__cizim {
		flex: none;
		aspect-ratio: 4 / 3;
	}

	.hk-vitrin-kutu--genis {
		min-height: 220px;
	}
}

@container (max-width: 599px) {

	.hk-vitrin {
		gap: var(--bosluk-3);
	}

	.hk-vitrin-kutu--tek .hk-vitrin-kutu__baslik {
		font-size: 15px;
		line-height: 20px;
	}

	.hk-vitrin-kutu--tek .hk-vitrin-kutu__marka {
		font-size: 12px;
		line-height: 16px;
	}

	.hk-vitrin-kutu--tek .hk-ok-dugme {
		display: none;
	}

	.hk-vitrin-kutu--tek .hk-vitrin-kutu__cizim {
		padding: var(--bosluk-3) var(--bosluk-3) 0;
	}

	.hk-vitrin-kutu--tek .hk-vitrin-kutu__alt {
		padding: var(--bosluk-2) var(--bosluk-3) var(--bosluk-3);
	}

	.hk-vitrin-kutu--buyuk .hk-vitrin-kutu__cizim {
		padding: 32px 24px 0;
	}

	.hk-vitrin-kutu--buyuk .hk-vitrin-kutu__alt {
		padding: var(--bosluk-5);
	}

	.hk-vitrin-kutu--buyuk .hk-vitrin-kutu__baslik {
		font-size: 32px;
		line-height: 36px;
	}

	.hk-vitrin-kutu--genis {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		min-height: 0;
	}

	.hk-vitrin-kutu--genis .hk-vitrin-kutu__alt {
		padding: var(--bosluk-5) var(--bosluk-3) var(--bosluk-5) var(--bosluk-5);
		gap: var(--bosluk-4);
	}

	.hk-vitrin-kutu--genis .hk-vitrin-kutu__cizim {
		padding: var(--bosluk-3) var(--bosluk-3) var(--bosluk-3) 0;
	}

	.hk-vitrin-kutu--genis .hk-vitrin-kutu__baslik {
		font-size: 22px;
		line-height: 28px;
	}

	.hk-vitrin__ara {
		padding: var(--bosluk-5);
	}

	.hk-vitrin__ara-baslik {
		font-size: 20px;
		line-height: 28px;
	}

	.hk-vitrin__arama .hk-dugme {
		padding-inline: var(--bosluk-4);
	}
}