/* Harvekon · iç sayfalar: ürün kategorisi, ürün, hizmetler, hizmet ve iletişim
   (tuval taslağı)
   Ana sayfa stillerinden (anasayfa-a.css) sonra yüklenir ve onun dilini
   kullanır: koyu giriş ve çizim,
   logo mavisi şerit, çizim kâğıdı, vitrin kutuları, koyu kartlar, fotoğraflı
   hizmet panelleri.
   Sayfalar onaylanınca bileşenler tasarım sistemine (components/bundle.css)
   taşınır, bu dosya kalkar. */

/* ---------- Sayfa geneli ---------- */
.hk-urun-izgarasi > [hidden],
.hk-galeri__ana > [hidden] {
	display: none !important;
}

.hk-ana-menu__baglanti:is([aria-current="true"], [aria-current="page"]) {
	border-bottom-color: var(--vurgu);
}

.hk-sayfa-k .hk-bolum-basligi__eylemler .hk-dugme {
	white-space: nowrap;
}

/* Harvekon WhatsApp glifi (temadaki whatsapp-glyph-*.svg): dolgulu, eylem
   renginde (koyu zeminde logo mavisi), üst alandaki düğmedeki gibi */
.hk-wa-glif {
	flex: none;
	width: 20px;
	height: 20px;
	color: var(--eylem);
	fill: currentcolor;
	stroke: none;
}

/* Tek başına bağlantılar (oklu bağlantı): dokunma alanı en az 40 px (TS:
   dokunma hedefleri en az 40 px). Görünüş ve düzen
   aynı kalır; alan yazının üstüne ve altına taşar. Sayfada ve menüde aynı boyda
   (16/26; denetim raporundaki düzeltme,
   Beest onayı, 17 Ekim 2026). */
.hk-baglanti--ok {
	position: relative;
}

.hk-baglanti--ok::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 40px;
	transform: translateY(-50%);
}

/* Üst alan: Blog düğmesi (Beest kararı, 17 Ekim 2026). Menü satırından üst
   satıra, WhatsApp ile Teklif iste arasına
   alındı: ikincil düğme, Teklif iste'yle aynı boy. 960 px altında gizli; orada
   mobil menüde (mobil değişmedi). Blog ve
   blog yazısında işaretli: kenarı logo mavisi (menüdeki işaret çizgisinin
   rengi). Sağdaki listede artık Hakkımızda ve
   İletişim var; son bağlantının sağa hizalanması (anasayfa-a.css) İletişim'e
   geçer. */
.hk-ust-alan__blog[aria-current] {
	--hk-dugme-kenar: var(--vurgu);
	box-shadow: inset 0 0 0 var(--kenar-ince) var(--vurgu);
}

@container (max-width: 959px) {

	.hk-ust-alan__eylem .hk-ust-alan__blog {
		display: none;
	}
}

/* ---------- Giriş (koyu): ana sayfadaki .hk-giris--cizim düzeni ---------- */
.hk-giris-k .hk-giris__ic {
	grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
	padding-block: var(--bosluk-6) var(--bosluk-7);
}

.hk-giris-k .hk-giris__metin {
	gap: var(--bosluk-5);
	justify-items: start;
}

.hk-giris-k .hk-sayfa-yolu {
	margin-bottom: var(--bosluk-1);
}

.hk-giris-k__ust {
	display: grid;
	gap: var(--bosluk-3);
	justify-items: start;
}

.hk-giris-k__baslik {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 88px;
	line-height: 88px;
	font-weight: 700;
	letter-spacing: -0.04em;
	color: var(--metin-baslik);
}

.hk-giris-k__baslik .hk-vurgu {
	color: var(--logo-mavisi);
}

.hk-giris-k .hk-giris__ozet {
	max-width: 540px;
}

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

.hk-markalar-k {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bosluk-2);
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hk-markalar-k__etiket {
	margin-right: var(--bosluk-1);
	font-family: var(--font-sans);
	font-size: 13px;
	line-height: 16px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--metin);
}

.hk-markalar-k .hk-rozet {
	min-height: 28px;
	padding-inline: var(--bosluk-3);
	background: rgb(255 255 255 / 0.06);
	border-color: rgb(197 198 198 / 0.35);
	color: var(--beyaz);
}

/* örnek içerik notu (yalnızca tuval taslağında): girişin altında, açık gri */
.hk-ornek-not-k {
	display: flex;
	align-items: flex-start;
	gap: var(--bosluk-2);
	max-width: 560px;
	margin: var(--bosluk-2) 0 0;
	padding-top: var(--bosluk-4);
	border-top: var(--kenar-ince) solid var(--cizgi);
	font-family: var(--font-sans);
	font-size: 13px;
	line-height: 20px;
	color: var(--metin);
}

.hk-ornek-not-k .hk-simge {
	flex: none;
	width: var(--simge-kucuk);
	height: var(--simge-kucuk);
	margin-top: 2px;
	color: var(--logo-mavisi);
}

.hk-ornek-not-k strong {
	font-weight: 600;
	color: var(--metin-baslik);
}

.hk-giris-k .hk-cizim {
	margin-right: -24px;
}

/* Sağdan konumlanan çizim notu (PLC'de 03 Saha; ortak.cizim_notu): yazı sağa
   yaslı, çizgi notun sağında. İki sütunlu
   girişin en dar aralığında (960–1023 px) açıklaması gizlenir, 01 ile
   çakışmaz (denetim raporu; Beest onayı, 17 Ekim 2026). */
.hk-cizim__not--sag {
	justify-items: end;
	text-align: right;
}

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

	.hk-cizim__not--sag small {
		display: none;
	}
}

/* Girişin altındaki logo mavisi şerit: kategori sayfasında hizmet sözleri,
   ürün sayfasında bölüm çapaları */
.hk-deger-k {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.hk-deger-k__oge {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	gap: 2px var(--bosluk-3);
	align-items: start;
	padding: var(--bosluk-5) var(--bosluk-5) var(--bosluk-5) var(--bosluk-5);
	border-left: var(--kenar-ince) solid var(--cizgi);
}

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

@container (width > 959px) {

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

.hk-deger-k__simge {
	grid-row: span 2;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: var(--kose-daire);
	background: var(--grafit);
	color: var(--logo-mavisi);
}

.hk-deger-k__simge .hk-simge {
	width: 22px;
	height: 22px;
}

.hk-deger-k__ad {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 17px;
	line-height: 24px;
	font-weight: 700;
	color: var(--grafit);
}

.hk-deger-k__metin {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 14px;
	line-height: 20px;
	color: var(--grafit);
}

.hk-capalar-k {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--bosluk-2) var(--bosluk-2);
	padding-block: var(--bosluk-4);
}

.hk-capalar-k__etiket {
	margin-right: var(--bosluk-3);
	font-family: var(--font-sans);
	font-size: 13px;
	line-height: 16px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--grafit);
	white-space: nowrap;
}

.hk-capalar-k ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bosluk-2);
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hk-capalar-k a {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 0 var(--bosluk-4);
	border: var(--kenar-ince) solid rgb(35 37 37 / 0.45);
	border-radius: 999px;
	font-family: var(--font-sans);
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
	color: var(--grafit);
	text-decoration: none;
	transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

.hk-capalar-k a:hover {
	background: var(--grafit);
	border-color: var(--grafit);
	color: var(--beyaz);
}

/* ---------- Alt kategoriler: ana sayfadaki vitrin (büyük koyu pafta, geniş
   mavi kutu, küçük kâğıt kutu, kodla arama) ---------- */
.hk-vitrin-k {
	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(2, 268px);
	grid-template-areas: "kom kom mod mod" "kom kom raf ara";
}

.hk-vitrin-k > li {
	display: flex;
	min-width: 0;
}

.hk-vitrin-k__kom {
	grid-area: kom;
}

.hk-vitrin-k__mod {
	grid-area: mod;
}

.hk-vitrin-k__raf {
	grid-area: raf;
}

.hk-vitrin-k__ara {
	grid-area: ara;
}

.hk-vitrin-k .hk-vitrin-kutu__aciklama {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 14px;
	line-height: 20px;
	color: var(--metin);
}

.hk-vitrin-k .hk-vitrin-kutu--buyuk .hk-vitrin-kutu__aciklama {
	font-size: 16px;
	line-height: 24px;
	max-width: 420px;
}

.hk-kod-ara-k {
	display: grid;
	align-content: space-between;
	gap: var(--bosluk-5);
	width: 100%;
	padding: var(--bosluk-5);
	border-radius: var(--kose-orta);
	background: var(--grafit);
	color: var(--metin);
}

.hk-kod-ara-k__baslik {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 20px;
	line-height: 26px;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--metin-baslik);
}

.hk-kod-ara-k .hk-arama__alan {
	min-width: 0;
}

/* ---------- Ürün kartı: çizim kâğıdında renkli çizim, üzerine gelince
   kalkar ---------- */
.hk-urun-k {
	transition: transform 350ms cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 350ms ease, border-color 350ms ease;
}

.hk-urun-k:has(.hk-kart__baglanti:hover) {
	transform: translateY(-4px);
	box-shadow: 0 16px 32px rgb(35 37 37 / 0.14);
}

.hk-urun-k .hk-gorsel-kutusu {
	position: relative;
	display: block;
	background-color: var(--beyaz);
	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-urun-k .hk-gorsel-kutusu > svg {
	position: absolute;
	inset: 6% 4% 2%;
	width: 92%;
	height: 92%;
	transition: transform 800ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.hk-urun-k:has(.hk-kart__baglanti:hover) .hk-gorsel-kutusu > svg {
	transform: scale(1.05);
}

.hk-urun-k:has(.hk-kart__baglanti:hover) .hk-led {
	animation: hk-yanip 1.6s ease-in-out infinite;
}

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

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

.hk-urun-k .hk-kart__govde {
	gap: var(--bosluk-2);
}

.hk-urun-k .hk-urun-karti__kod {
	margin-top: var(--bosluk-1);
	color: var(--koyu-mavi);
}

.hk-urun-k .hk-urun-karti__ozellikler {
	margin-top: var(--bosluk-2);
}

.hk-rozet--video {
	background: color-mix(in srgb, var(--logo-mavisi) 14%, var(--beyaz));
	border-color: color-mix(in srgb, var(--logo-mavisi) 45%, var(--beyaz));
	color: var(--koyu-mavi);
}

.hk-rozet--video .hk-simge {
	fill: currentcolor;
	stroke: none;
}

.hk-bos-durum .hk-dugme {
	justify-self: start;
}

.hk-filtre__ac-sayi {
	font-variant-numeric: tabular-nums;
}

/* ---------- Seçim kriterleri: ana sayfadaki süreç adımları, beş sütun, mavi
   numaralar ---------- */
.hk-adimlar.hk-adimlar--5 {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.hk-adimlar--mavi .hk-adim__no {
	background: var(--logo-mavisi);
	border-color: var(--logo-mavisi);
	color: var(--grafit);
	font-weight: 700;
}

.hk-adimlar--mavi .hk-adim .govde {
	margin: 0;
}

/* ---------- Ürün sayfası: açık ürün başı ----------
   Beest kararı, 17 Ekim 2026: ürün başı açık temada (önce koyuydu) ve bütünüyle
   ilk ekranda: 1440 × 900 ekranda üst
   alan, sayfa yolu, galeri, bilgiler, düğmeler ve "Bu sayfada" şeridi birlikte
   görünür. Ölçüler yalnızca masaüstünde
   (960 px ve üstü) küçülür (aşağıdaki kap sorgusu); tablet ve telefonda galeri
   metnin üstünde, ölçüler önceki gibi.
   Üst alan bu sayfada açık başlar (urun_ana.py, ustTema). Zemin açık gri,
   üstünde çizim kâğıdı ızgarası. */
.hk-urun-giris {
	background: var(--zemin-ikincil);
}

/* Açık zeminde ızgara deseni: koyu bantlardaki desenin (anasayfa-a.css,
   hk-desenli) açık karşılığı, çizim kâğıdının
   renkleriyle (hk-cizim-alani); yerleşimi ve solması aynı. */
.hk-desenli[data-theme="acik"]::before {
	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);
}

.hk-urun-giris .hk-kap > .hk-sayfa-yolu {
	padding-top: var(--bosluk-5);
}

.hk-urun-giris__ic {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--bosluk-7);
	align-items: start;
	padding-block: var(--bosluk-5) var(--bosluk-7);
}

.hk-urun-giris .hk-galeri__ana {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--kose-orta);
	background: var(--yuzey);
	border: var(--kenar-ince) solid var(--cizgi);
}

.hk-galeri__ana > * {
	position: absolute;
	inset: 0;
}

.hk-galeri__ana > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hk-galeri__pafta {
	display: grid;
	place-items: center;
	padding: 8% 10% 12%;
	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-galeri__pafta::before {
	content: "";
	position: absolute;
	inset: 12px;
	border: var(--kenar-ince) solid rgb(197 198 198 / 0.18);
	border-radius: 2px;
	pointer-events: none;
}

.hk-galeri__pafta > svg {
	width: 100%;
	height: auto;
}

.hk-galeri__pafta .hk-led {
	animation: hk-yanip 1.8s ease-in-out infinite;
}

.hk-galeri__pafta .hk-led:nth-of-type(3n) {
	animation-delay: 0.6s;
}

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

.hk-galeri__etiket {
	position: absolute;
	left: var(--bosluk-4);
	bottom: var(--bosluk-4);
	right: auto;
	top: auto;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: var(--bosluk-2);
	padding: 4px var(--bosluk-3);
	border-radius: 999px;
	background: rgb(35 37 37 / 0.82);
	color: var(--beyaz);
	font-family: var(--font-sans);
	font-size: 12px;
	line-height: 16px;
	font-weight: 600;
}

.hk-galeri__etiket b {
	font-family: var(--font-mono);
	font-weight: 400;
	color: var(--logo-mavisi);
}

.hk-urun-giris .hk-galeri__kucukler {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hk-urun-giris .hk-galeri__kucuk {
	position: relative;
	aspect-ratio: 16 / 10;
	border-color: var(--cizgi);
	background: var(--yuzey);
}

.hk-urun-giris .hk-galeri__kucuk > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hk-urun-giris .hk-galeri__kucuk > svg {
	width: 100%;
	height: 100%;
	padding: 8%;
}

.hk-urun-giris .hk-galeri__kucuk:hover {
	border-color: var(--kontrol-kenari);
}

.hk-urun-giris .hk-galeri__kucuk[aria-current="true"] {
	border: var(--kenar-kalin) solid var(--metin-baslik);
}

.hk-urun-giris__bilgi {
	display: grid;
	gap: var(--bosluk-4);
	align-content: start;
	justify-items: stretch;
	min-width: 0;
}

/* rozetler ve kod satırı açık gri zeminden ayrılsın diye beyaz (video
   rozetinin kendi rengi kalır) */
.hk-urun-giris__bilgi > .hk-rozet-dizisi .hk-rozet:not(.hk-rozet--video) {
	background: var(--yuzey);
}

.hk-urun-giris__baslik {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 48px;
	line-height: 52px;
	font-weight: 700;
	letter-spacing: -0.025em;
	color: var(--metin-baslik);
}

.hk-urun-giris .hk-kod-satiri {
	background: var(--yuzey);
	border-color: var(--cizgi);
}

.hk-urun-giris .hk-kod-satiri .hk-dugme {
	background: transparent;
	min-width: 124px;
}

.hk-urun-giris__ozellikler {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
	line-height: 22px;
	font-variant-numeric: tabular-nums;
}

.hk-urun-giris__ozellikler li {
	display: flex;
	justify-content: space-between;
	gap: var(--bosluk-3);
	padding-block: var(--bosluk-2);
	border-bottom: var(--kenar-ince) solid var(--cizgi);
}

.hk-urun-giris__ozellikler li:first-child {
	border-top: var(--kenar-ince) solid var(--cizgi);
}

.hk-urun-giris__ozellikler span:last-child {
	color: var(--metin-baslik);
}

.hk-urun-giris__eylem {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--bosluk-2);
	margin-top: var(--bosluk-2);
}

/* üç düğme aynı boyda: girişteki büyük boy (52 px; denetim raporundaki
   düzeltme, Beest onayı, 17 Ekim 2026) */
.hk-urun-giris__eylem .hk-dugme {
	min-height: 52px;
}

.hk-urun-giris__eylem .hk-dugme--birincil {
	grid-column: 1 / -1;
}

.hk-urun-giris .hk-kapanis__sure {
	margin: 0;
}

.hk-urun-giris .hk-ornek-not-k {
	max-width: none;
}

/* Masaüstü: ürün başı ilk ekrana sığar (1440 × 900'de "Bu sayfada" şeridinin
   alt kenarı ekranın içinde). Galeri ve
   bilgiler iki eşit sütun (önce 7'ye 5); sayfa yolu ve bilgiler arasındaki
   boşluklar, başlık (40/46) ve kısa tanım (18/28)
   küçülür; üç düğme tek satırda (boyları aynı, 52 px; Teklif iste ilk
   sırada). */
@container (min-width: 960px) {

	.hk-urun-giris .hk-kap > .hk-sayfa-yolu {
		padding-top: var(--bosluk-4);
	}

	.hk-urun-giris__ic {
		padding-block: var(--bosluk-4) var(--bosluk-6);
	}

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

	.hk-urun-giris__baslik {
		font-size: 40px;
		line-height: 46px;
	}

	.hk-urun-giris__bilgi > .govde-buyuk {
		font-size: 18px;
		line-height: 28px;
	}

	.hk-urun-giris__eylem {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		margin-top: var(--bosluk-1);
	}

	.hk-urun-giris__eylem .hk-dugme {
		padding-inline: var(--bosluk-3);
	}

	.hk-urun-giris__eylem .hk-dugme--birincil {
		grid-column: auto;
	}
}

/* ---------- Ürün sayfası gövdesi: ana sütun ve koyu, yapışkan talep kutusu
   ---------- */
.hk-urun-s {
	padding-block: var(--bosluk-8) var(--bosluk-9);
}

.hk-sayfa-k .hk-urun-sayfasi__ana {
	grid-template-columns: minmax(0, 1fr);
	gap: var(--bosluk-8);
}

.hk-sayfa-k .hk-urun-sayfasi__yan {
	top: 152px;
}

.hk-talep-kutusu.hk-talep-kutusu--koyu {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	gap: var(--bosluk-3);
	padding: var(--bosluk-6) var(--bosluk-5) var(--bosluk-5);
	border: 0;
	background: var(--grafit);
}

.hk-talep-kutusu--koyu::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);
	background-size: 48px 48px;
	background-position: -1px -1px;
	-webkit-mask-image: radial-gradient(120% 80% at 100% 0%, #000 0%, transparent 70%);
	mask-image: radial-gradient(120% 80% at 100% 0%, #000 0%, transparent 70%);
}

.hk-talep-kutusu--koyu .hk-talep-kutusu__urun code {
	color: var(--logo-mavisi);
}

/* Teklif ve bilgi kartında ikincil düğmelerin (WhatsApp, Ara) simgeleri
   eylem renginde: koyu zeminde logo mavisi */
.hk-talep-kutusu--koyu .hk-dugme--ikincil .hk-simge {
	color: var(--eylem);
}

.hk-yardim-k {
	display: grid;
	gap: var(--bosluk-2);
	margin-top: var(--bosluk-4);
	padding: var(--bosluk-5);
	border-radius: var(--kose-orta);
	background: var(--logo-mavisi);
	color: var(--grafit);
	--metin-baslik: var(--grafit);
	--metin: var(--grafit);
	--baglanti: var(--grafit);
}

.hk-yardim-k .hk-baglanti--ok {
	margin-top: var(--bosluk-1);
}

/* Ana sütundaki bölümler: koyu numara etiketi ve kalın üst çizgi */
.hk-urun-bolumu {
	display: grid;
	gap: var(--bosluk-5);
	align-content: start;
	min-width: 0;
	scroll-margin-top: 168px;
}

.hk-urun-bolumu__ust {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bosluk-3) var(--bosluk-5);
	align-items: flex-end;
	justify-content: space-between;
	padding-top: var(--bosluk-5);
	border-top: var(--kenar-kalin) solid var(--metin-baslik);
}

.hk-urun-bolumu__metin {
	display: grid;
	gap: var(--bosluk-3);
	max-width: var(--icerik-genisligi);
}

.hk-urun-bolumu__baslik {
	display: flex;
	align-items: center;
	gap: var(--bosluk-3);
	margin: 0;
}

.hk-urun-bolumu__no {
	flex: none;
	display: inline-grid;
	place-items: center;
	min-width: 44px;
	height: 30px;
	padding: 0 var(--bosluk-2);
	border-radius: var(--kose-kucuk);
	background: var(--grafit);
	color: var(--logo-mavisi);
	font-family: var(--font-mono);
	font-size: 14px;
	line-height: 1;
	font-weight: 400;
	letter-spacing: 0;
}

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

.hk-alt-baslik-k {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 24px;
	font-weight: 600;
	color: var(--metin-baslik);
}

/* Teknik özellikler: grup satırları koyu */
.hk-sayfa-k .hk-ozellik-tablosu__grup th {
	background: var(--grafit);
	color: var(--beyaz);
	letter-spacing: 0.02em;
}

.hk-sayfa-k .hk-ozellik-tablosu tbody tr:not(.hk-ozellik-tablosu__grup):nth-child(odd) {
	background: color-mix(in srgb, var(--cok-acik-gri) 40%, var(--beyaz));
}

/* Birlikte kullanılan ürünler: küçük kart, ana sayfadaki grup çizimleri */
.hk-izgara-k3 {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--bosluk-4);
}

.hk-urun-k--kucuk .hk-gorsel-kutusu {
	aspect-ratio: 4 / 3;
}

.hk-urun-k--kucuk .hk-kart__govde {
	padding: var(--bosluk-4) var(--bosluk-4) var(--bosluk-3);
}

.hk-urun-k--kucuk .hk-kart__eylemler {
	padding: 0 var(--bosluk-4) var(--bosluk-4);
}

.hk-urun-k--kucuk .baslik-4 {
	font-size: 18px;
	line-height: 26px;
}

.hk-urun-k__video {
	position: relative;
	z-index: 1;
	display: inline-flex;
	gap: var(--bosluk-2);
	align-items: flex-start;
	justify-self: start;
	font-size: 14px;
	line-height: 20px;
	color: var(--baglanti);
	text-decoration: none;
}

.hk-urun-k__video:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.hk-urun-k__video .hk-simge {
	width: 14px;
	height: 14px;
	margin-top: 3px;
	fill: currentcolor;
	stroke: none;
}

/* Belgeler: mavi simge kutusu */
.hk-sayfa-k .hk-belge__simge {
	box-sizing: content-box;
	padding: 10px;
	border-radius: var(--kose-orta);
	background: color-mix(in srgb, var(--logo-mavisi) 12%, var(--beyaz));
	color: var(--koyu-mavi);
}

.hk-sayfa-k .hk-belge__indir {
	color: var(--koyu-mavi);
}

/* Rehber videolar: diğer videoların listesi */
.hk-urun-bolumu .hk-bolumler {
	max-width: none;
}

/* Uygulama örneği: fotoğraflı koyu kart */
.hk-vaka-k {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: grid;
	align-content: end;
	min-height: 380px;
	padding: var(--bosluk-6);
	border-radius: var(--kose-orta);
	background: var(--grafit);
	color: var(--metin);
}

.hk-vaka-k > img {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(0.7) saturate(0.9);
}

.hk-vaka-k::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(90deg, rgb(35 37 37 / 0.95) 0%, rgb(35 37 37 / 0.82) 45%, rgb(35 37 37 / 0.2) 100%);
}

.hk-vaka-k__ic {
	display: grid;
	gap: var(--bosluk-3);
	max-width: 460px;
}

.hk-vaka-k .hk-rozet {
	background: var(--logo-mavisi);
	border-color: var(--logo-mavisi);
	color: var(--grafit);
}

.hk-vaka-k__baslik {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 26px;
	line-height: 32px;
	font-weight: 700;
	color: var(--metin-baslik);
}

.hk-vaka-k .hk-vaka-karti__ayrinti dt {
	color: var(--metin-baslik);
}

.hk-vaka-k__not {
	position: absolute;
	right: var(--bosluk-4);
	top: var(--bosluk-4);
	padding: 4px var(--bosluk-3);
	border-radius: 999px;
	background: rgb(35 37 37 / 0.8);
	color: var(--beyaz);
	font-size: 12px;
	line-height: 16px;
}

/* SSS ana sütunda tek sütun */
.hk-sss-a.hk-sss-a--tek {
	grid-template-columns: minmax(0, 1fr);
}

.hk-sss-a--tek .hk-sss {
	border-top: var(--kenar-ince) solid var(--cizgi);
}

/* Benzer ürünlerin altında paylaş */
.hk-paylas-k {
	padding-top: var(--bosluk-5);
	border-top: var(--kenar-ince) solid var(--cizgi);
}

/* ---------- Hizmetler ve hizmet sayfası ---------- */

/* Giriş: sağda fotoğraf mozaiği (Hizmetler) ya da tek fotoğraf (hizmet) */
.hk-giris-h .hk-giris__ic {
	align-items: center;
}

.hk-mozaik-h {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	grid-template-rows: repeat(2, minmax(0, 1fr));
	gap: var(--bosluk-3);
	height: 540px;
	margin: 0;
}

.hk-mozaik-h__oge {
	position: relative;
	overflow: hidden;
	border-radius: var(--kose-orta);
	background: var(--grafit);
	border: var(--kenar-ince) solid rgb(197 198 198 / 0.22);
}

.hk-mozaik-h__oge--uzun {
	grid-row: span 2;
}

.hk-mozaik-h__oge > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 800ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.hk-mozaik-h__oge::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(to top, rgb(35 37 37 / 0.75) 0%, rgb(35 37 37 / 0) 45%);
}

.hk-mozaik-h__oge:hover > img {
	transform: scale(1.05);
}

.hk-mozaik-h__etiket,
.hk-foto-h__etiket {
	position: absolute;
	left: var(--bosluk-4);
	bottom: var(--bosluk-4);
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: var(--bosluk-2);
	font-family: var(--font-sans);
	font-size: 15px;
	line-height: 20px;
	font-weight: 700;
	color: var(--beyaz);
}

.hk-mozaik-h__etiket::before,
.hk-foto-h__etiket::before {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--logo-mavisi);
	box-shadow: 0 0 0 4px rgb(0 158 227 / 0.25);
}

/* Örnek görsel etiketi bütün örnek fotoğraflarda (Beest, 17 Ekim 2026:
   "Rapordakileri şablonlara göre düzelt"):
   girişlerin mozaik ve fotoğrafları, koyu uygulama kartları, kategorideki
   hizmet panelleri (yalnızca açık panelde; dar
   panele sığmaz), Uygulamalar gezgininin büyük fotoğrafı. Fotoğrafın
   Harvekon'a ait olmadığını gösterir. */
.hk-mozaik-h__not,
.hk-foto-h__not,
.hk-grup-h__not,
.hk-proje-b__not,
.hk-hp__not {
	position: absolute;
	right: var(--bosluk-4);
	top: var(--bosluk-4);
	z-index: 1;
	padding: 4px var(--bosluk-3);
	border-radius: 999px;
	background: rgb(35 37 37 / 0.8);
	color: var(--beyaz);
	font-family: var(--font-sans);
	font-size: 12px;
	line-height: 16px;
}

.hk-hp__not {
	opacity: 0;
	transition: opacity 250ms ease;
}

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

@container (max-width: 959px) {

	.hk-hp__not {
		opacity: 1;
	}
}

.hk-foto-h {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	margin: 0;
	border-radius: var(--kose-orta);
	border: var(--kenar-ince) solid rgb(197 198 198 / 0.22);
	background: var(--grafit);
}

.hk-foto-h > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hk-foto-h::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(to top, rgb(35 37 37 / 0.7) 0%, rgb(35 37 37 / 0) 40%);
}

.hk-giris-h__baslik {
	font-size: 72px;
	line-height: 76px;
}

.hk-giris-h .hk-dugme-dizisi {
	flex-wrap: wrap;
}

.hk-giris-h .hk-kapanis__sure {
	margin: 0;
}

/* Şeritteki çipler: grup sayıları, açık olan hizmet */
.hk-capalar-k__sayi {
	margin-left: var(--bosluk-2);
	font-family: var(--font-mono);
	font-size: 12px;
	line-height: 1;
	font-weight: 400;
	opacity: 0.75;
}

.hk-capalar-k a[aria-current="page"] {
	background: var(--grafit);
	border-color: var(--grafit);
	color: var(--beyaz);
}

.hk-capalar-k a .hk-simge {
	width: 16px;
	height: 16px;
	margin-left: var(--bosluk-1);
}

/* Hizmet grupları: fotoğraflı koyu kartlar; hizmetler satır satır, sağda
   yuvarlak ok */
.hk-gruplar-h {
	display: grid;
	gap: var(--bosluk-5);
}

.hk-grup-h {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	overflow: hidden;
	scroll-margin-top: 152px;
	border-radius: var(--kose-orta);
	background: var(--grafit);
	color: var(--metin);
}

.hk-grup-h--ters {
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}

.hk-grup-h--ters .hk-grup-h__gorsel {
	order: 2;
}

.hk-grup-h__gorsel {
	position: relative;
	min-height: 300px;
	overflow: hidden;
}

.hk-grup-h__gorsel > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 900ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.hk-grup-h:hover .hk-grup-h__gorsel > img {
	transform: scale(1.04);
}

.hk-grup-h__icerik {
	position: relative;
	isolation: isolate;
	display: grid;
	gap: var(--bosluk-5);
	align-content: start;
	padding: var(--bosluk-7) var(--bosluk-7) var(--bosluk-6);
}

.hk-grup-h__icerik::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);
	background-size: 48px 48px;
	background-position: -1px -1px;
	-webkit-mask-image: radial-gradient(90% 70% at 100% 0%, #000 0%, transparent 70%);
	mask-image: radial-gradient(90% 70% at 100% 0%, #000 0%, transparent 70%);
}

.hk-grup-h__ust {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: var(--bosluk-4);
	align-items: center;
}

.hk-grup-h__no {
	display: inline-grid;
	place-items: center;
	min-width: 52px;
	height: 36px;
	padding: 0 var(--bosluk-2);
	border-radius: var(--kose-kucuk);
	background: var(--logo-mavisi);
	color: var(--grafit);
	font-family: var(--font-mono);
	font-size: 16px;
	line-height: 1;
}

.hk-grup-h__baslik {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 36px;
	line-height: 42px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--metin-baslik);
}

.hk-grup-h__sayi {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 13px;
	line-height: 16px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--logo-mavisi);
	white-space: nowrap;
}

.hk-hizmetler-h {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: var(--kenar-ince) solid rgb(197 198 198 / 0.22);
}

.hk-hizmet-h {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 2px var(--bosluk-5);
	align-items: center;
	padding: var(--bosluk-4) var(--bosluk-3) var(--bosluk-4) 0;
	border-bottom: var(--kenar-ince) solid rgb(197 198 198 / 0.22);
	transition: padding-left 300ms cubic-bezier(0.2, 0.7, 0.2, 1), background-color 300ms ease;
}

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

.hk-hizmet-h__ad .hk-kart__baglanti {
	color: inherit;
}

.hk-hizmet-h__metin {
	grid-column: 1;
	margin: 0;
	max-width: 620px;
	font-family: var(--font-sans);
	font-size: 15px;
	line-height: 24px;
	color: var(--metin);
}

.hk-hizmet-h .hk-ok-dugme {
	grid-column: 2;
	grid-row: 1 / span 2;
	width: var(--kontrol-yuksekligi-kucuk);
	height: var(--kontrol-yuksekligi-kucuk);
}

.hk-hizmet-h .hk-ok-dugme .hk-simge {
	width: 24px;
	height: 24px;
}

.hk-hizmet-h:is(:hover, :focus-within) {
	padding-left: var(--bosluk-3);
	background: rgb(0 158 227 / 0.08);
}

.hk-hizmet-h:is(:hover, :focus-within) .hk-hizmet-h__ad {
	color: var(--logo-mavisi);
}

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

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

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

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

/* Hizmet sayfası: kapsam (beyaz kart) ve teslim edilenler (logo mavisi kart) */
.hk-kapsam-h {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--bosluk-5);
}

.hk-kapsam-h__kart {
	display: grid;
	gap: var(--bosluk-4);
	align-content: start;
	padding: var(--bosluk-6);
	border: var(--kenar-ince) solid var(--cizgi);
	border-radius: var(--kose-orta);
	background: var(--beyaz);
}

.hk-kapsam-h__kart--mavi {
	border-color: var(--logo-mavisi);
	background: var(--logo-mavisi);
	color: var(--grafit);
	--metin-baslik: var(--grafit);
	--metin: var(--grafit);
	--cizgi: rgb(35 37 37 / 0.22);
}

.hk-kapsam-h__baslik {
	display: flex;
	align-items: center;
	gap: var(--bosluk-3);
	margin: 0;
	font-family: var(--font-sans);
	font-size: 24px;
	line-height: 30px;
	font-weight: 700;
	color: var(--metin-baslik);
}

.hk-kapsam-h__simge {
	flex: none;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: var(--kose-daire);
	background: var(--grafit);
	color: var(--logo-mavisi);
}

.hk-kapsam-h__simge .hk-simge {
	width: 22px;
	height: 22px;
}

.hk-liste-h {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: hk-liste;
}

.hk-liste-h li {
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr);
	gap: var(--bosluk-3);
	align-items: start;
	padding: var(--bosluk-3) 0;
	border-top: var(--kenar-ince) solid var(--cizgi);
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 24px;
	color: var(--metin-baslik);
}

.hk-liste-h li > .hk-simge {
	width: 20px;
	height: 20px;
	margin-top: 2px;
	color: var(--koyu-mavi);
}

.hk-liste-h--no li::before {
	counter-increment: hk-liste;
	content: counter(hk-liste, decimal-leading-zero);
	font-family: var(--font-mono);
	font-size: 14px;
	line-height: 24px;
	color: var(--grafit);
}

.hk-markalar-h {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bosluk-2);
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hk-markalar-h__etiket {
	margin-right: var(--bosluk-1);
	font-family: var(--font-sans);
	font-size: 13px;
	line-height: 16px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--metin);
}

.hk-markalar-h .hk-rozet {
	min-height: 30px;
	padding-inline: var(--bosluk-3);
	background: var(--beyaz);
}

/* ---------- İletişim ve teklif ---------- */

/* Giriş: solda sayfa yolu (üstte), başlık ve yanıt süresi sözü (kanallar
   sütununa göre dikeyde ortada; Beest kararı,
   12 Ekim 2026); sağda iletişim kanalları. Alttaki boş satır sayfa yolunun
   karşılığı, başlık ortada kalsın diye (örnek
   içerik notu 13 Ekim 2026'da kaldırıldı). Mobilde sırayla: sayfa yolu,
   başlık, kanallar. */
.hk-giris-i .hk-giris__ic {
	grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
	grid-template-areas: "yol kanallar" "metin kanallar" ". kanallar";
	grid-template-rows: auto 1fr auto;
	column-gap: var(--bosluk-8);
	row-gap: var(--bosluk-5);
	align-items: start;
	padding-block: var(--bosluk-6) var(--bosluk-7);
}

.hk-giris-i .hk-giris-i__yol {
	grid-area: yol;
	margin: 0;
}

.hk-giris-i .hk-giris__metin {
	grid-area: metin;
	align-self: center;
}

.hk-giris-i .hk-kanallar-i {
	grid-area: kanallar;
	align-self: center;
}

/* Kanallar: kartın tamamı bağlantı; telefon logo mavisi, WhatsApp ve e-posta
   koyu yüzey; sağda yuvarlak ok */
.hk-kanallar-i {
	display: grid;
	gap: var(--bosluk-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hk-kanal-i {
	position: relative;
	display: grid;
	grid-template-columns: 52px minmax(0, 1fr) auto;
	gap: var(--bosluk-4);
	align-items: center;
	padding: var(--bosluk-5);
	border: var(--kenar-ince) solid var(--beyaz);
	border-radius: var(--kose-orta);

	/* beyaz, tam opak kart; koyu girişin içinde açık zemin renkleriyle (Beest
   kararı, 12 Ekim 2026) */
	background: var(--beyaz);
	--metin-baslik: var(--grafit);
	--metin: var(--koyu-gri);
	--baglanti: var(--koyu-mavi);
	transition: border-color 250ms ease, background-color 250ms ease, transform 350ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.hk-kanal-i__simge {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: var(--kose-daire);
	background: color-mix(in srgb, var(--logo-mavisi) 14%, var(--beyaz));
	color: var(--koyu-mavi);
}

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

.hk-kanal-i__metin {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.hk-kanal-i__ad {
	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(--metin);
}

.hk-kanal-i__deger {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 24px;
	line-height: 32px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--metin-baslik);
	overflow-wrap: anywhere;
}

.hk-kanal-i__deger .hk-kart__baglanti {
	color: inherit;
}

.hk-kanal-i__not {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 14px;
	line-height: 22px;
	color: var(--metin);
}

.hk-kanal-i .hk-ok-dugme .hk-simge {
	width: 28px;
	height: 28px;
}

.hk-kanal-i:is(:hover, :focus-within) {
	border-color: var(--logo-mavisi);
	background: color-mix(in srgb, var(--logo-mavisi) 8%, var(--beyaz));
	transform: translateY(-2px);
}

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

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

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

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

.hk-kanal-i--mavi {
	border-color: var(--logo-mavisi);
	background: var(--logo-mavisi);
	--metin-baslik: var(--grafit);
	--metin: var(--grafit);
}

.hk-kanal-i--mavi .hk-kanal-i__simge {
	background: var(--grafit);
	color: var(--logo-mavisi);
}

.hk-kanal-i--mavi .hk-ok-dugme {
	background: var(--beyaz);
}

.hk-kanal-i--mavi:is(:hover, :focus-within) {
	border-color: var(--beyaz);
	background: var(--logo-mavisi);
}

.hk-kanal-i--mavi:is(:hover, :focus-within) .hk-ok-dugme {
	background: var(--grafit);
	color: var(--beyaz);
}

.hk-kanal-i--mavi:has(.hk-kart__baglanti:focus-visible) {
	outline-color: var(--beyaz);
}

/* Şeritteki sayfa içi çapalar: simge solda */
.hk-capalar-i a .hk-simge {
	width: 16px;
	height: 16px;
	margin: 0 var(--bosluk-2) 0 0;
}

/* Konum: solda adres (beyaz) ve çalışma saatleri (logo mavisi) kartları,
   sağda statik harita yer tutucusu */
.hk-konum-i .hk-konum {
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: var(--bosluk-5);
	align-items: stretch;
}

.hk-konum-i__bilgi {
	display: grid;
	gap: var(--bosluk-5);
	align-content: start;
	justify-items: stretch;
}

.hk-konum-i__kart {
	display: grid;
	gap: var(--bosluk-4);
	justify-items: start;
	align-content: start;
	padding: var(--bosluk-6);
	border: var(--kenar-ince) solid var(--cizgi);
	border-radius: var(--kose-orta);
	background: var(--beyaz);
	scroll-margin-top: 168px;
}

.hk-konum-i__kart--mavi {
	border-color: var(--logo-mavisi);
	background: var(--logo-mavisi);
	color: var(--grafit);
	--metin-baslik: var(--grafit);
	--metin: var(--grafit);
}

.hk-konum-i .hk-konum__adres {
	margin: 0;
	font-style: normal;
	color: var(--metin-baslik);
}

.hk-konum-i .hk-konum__not {
	margin: 0;
	color: var(--metin);
}

.hk-konum-i__kart .hk-dugme {
	margin-top: var(--bosluk-2);
}

.hk-harita-i {
	position: relative;
	overflow: hidden;
	min-height: 360px;
	margin: 0;
	border: var(--kenar-ince) solid var(--cizgi);
	border-radius: var(--kose-orta);
	background-color: var(--beyaz);
	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-harita-i__cizim {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}

.hk-harita-i__not {
	position: absolute;
	right: var(--bosluk-4);
	top: var(--bosluk-4);
	padding: 4px var(--bosluk-3);
	border-radius: 999px;
	background: rgb(35 37 37 / 0.8);
	color: var(--beyaz);
	font-family: var(--font-sans);
	font-size: 12px;
	line-height: 16px;
}

/* haritanın kaynağına göre atıf görselin üstünde, köşede kalır
   (OpenStreetMap ya da Google yönergeleri) */
.hk-harita-i__atif {
	position: absolute;
	right: 0;
	bottom: 0;
	padding: 2px var(--bosluk-2);
	border-top-left-radius: var(--kose-kucuk);
	background: rgb(255 255 255 / 0.9);
	color: var(--koyu-gri);
	font-family: var(--font-sans);
	font-size: 11px;
	line-height: 16px;
}

.hk-sayfa-i #konum {
	scroll-margin-top: 152px;
}

/* ---------- Teklif modalı ----------
   Teklif iste düğmeleri sayfanın bağlamındaki teklif formunu iletişim kutusunda
   açar (<dialog>, showModal: arka plan
   etkisiz, Esc kapatır, odak içeri geçer; kapanınca odak düğmeye döner).
   Tuvalde kutu açık çizilir: arkada sayfa,
   üstünde örtü. Solda koyu bağlam (ürün, hizmet ya da genel) ve
   telefon/WhatsApp; sağda beyaz form.
   800px'ten dar sayfada (Motion'daki gibi) tam ekran: bağlam özeti, form,
   kanallar.
   Üst satır (Teklif formu · Teklif isteyin) yok; kapat düğmesi kutunun sağ üst
   köşesinde (masaüstünde formun, mobilde koyu
   bağlamın sağ üstü), kutu kayarken yapışık kalır. Motion ana sayfadaki modalla
   aynı düzen (Beest isteği, 16 Ekim 2026:
   "Diğer modallardaki formları da bu düzene getir"). Form alanlarının düzeni de
   aynı: Ad Soyad | Firma ve E-posta | Telefon
   yan yana (Telefon'un yardım metni kutunun altında), İhtiyacınız ve Ürün grubu
   tam genişlik; kutu 1040px, form 32px iç
   boşluklu; tam ekran düzende alanlar alt alta. 600–799px arasında iki sütunlu
   kutunun form sütunu Turnstile kutusuna
   (300px) yetmiyordu; tam ekrana geçiş Motion'daki gibi 800px'e alındı. */
.hk-teklif-kap {
	container-type: inline-size;
}

.hk-teklif-sahne {
	position: relative;
	height: 100vh;
	min-height: 640px;
	overflow: hidden;
}

.hk-teklif-sahne__sayfa {
	position: absolute;
	inset: 0;
	z-index: 0;
	isolation: isolate;
	overflow: hidden;
	pointer-events: none;
}

.hk-teklif-sahne__ortu {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: grid;
	place-items: center;
	padding: var(--bosluk-6);
	background: rgb(35 37 37 / 0.72);
}

.hk-teklif-m {
	position: relative;
	inset: auto;
	display: grid;
	grid-template-columns: 340px minmax(0, 1fr);
	grid-template-rows: 1fr auto;
	grid-template-areas: "baglam form" "kanal form";
	width: min(1040px, 100%);
	max-height: 100%;
	margin: 0;
	padding: 0;
	overflow: auto;
	border: 0;
	border-radius: var(--kose-orta);
	background: var(--beyaz);
	color: var(--metin);
	box-shadow: 0 24px 64px rgb(0 0 0 / 0.45);
	font-family: var(--font-sans);
}

.hk-teklif-m::backdrop {
	background: rgb(35 37 37 / 0.72);
}

/* kapat: kutunun sağ üst köşesi; bütün satırları kaplayan sütunda yapışık (kutu
   kayarken görünür kalır); beyaz yuvarlak,
   koyu bağlamın üstünde de seçilir (Motion'daki gibi) */
.hk-teklif-m__kapat {
	grid-column: -2;
	grid-row: 1 / -1;
	align-self: start;
	justify-self: end;
	position: sticky;
	top: var(--bosluk-4);
	z-index: 2;
	display: grid;
	place-items: center;
	width: var(--kontrol-yuksekligi);
	height: var(--kontrol-yuksekligi);
	margin: var(--bosluk-4) var(--bosluk-4) 0 0;
	border: var(--kenar-ince) solid var(--acik-gri);
	border-radius: var(--kose-daire);
	background: var(--beyaz);
	color: var(--grafit);
	transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.hk-teklif-m__kapat:hover {
	transform: rotate(90deg);
	background: var(--cok-acik-gri);
}

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

.hk-teklif-m__form {
	grid-area: form;
	display: grid;
	gap: var(--bosluk-4);
	align-content: start;
	padding: var(--bosluk-6);
}

/* sonuç mesajı kapat düğmesinin altına girmesin */
.hk-teklif-m__sonuc {
	margin-right: calc(var(--kontrol-yuksekligi) + var(--bosluk-4) + var(--bosluk-2) - var(--bosluk-6));
}

.hk-teklif-m .hk-form {
	gap: var(--bosluk-4);
	max-width: none;
}

/* iki alan yan yana (Ad Soyad | Firma, E-posta | Telefon) */
.hk-teklif-m .hk-alan-cifti {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--bosluk-4);
	align-items: start;
}

.hk-teklif-m textarea.hk-alan__girdi {
	min-height: 112px;
}

.hk-teklif-m .hk-form__gonder .hk-dugme {
	min-height: 52px;
	padding-inline: var(--bosluk-7);
}

.hk-teklif-m__sonuc:empty {
	display: none;
}

.hk-teklif-m .hk-form-mesaji {
	border-color: var(--logo-mavisi);
	background: color-mix(in srgb, var(--logo-mavisi) 10%, var(--beyaz));
}

.hk-teklif-m .hk-form-mesaji .hk-simge {
	color: var(--koyu-mavi);
}

/* bağlam: koyu, sağ üstten silinen ızgara (ürün sayfasındaki talep kutusu
   gibi) */
.hk-teklif-m__baglam,
.hk-teklif-m__kanal {
	background: var(--grafit);
	color: var(--metin);
}

.hk-teklif-m__baglam {
	grid-area: baglam;
	position: relative;
	isolation: isolate;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--bosluk-4);
	align-content: start;
	min-width: 0;
	padding: var(--bosluk-6);
}

.hk-teklif-m__baglam::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);
	background-size: 48px 48px;
	background-position: -1px -1px;
	-webkit-mask-image: radial-gradient(120% 80% at 100% 0%, #000 0%, transparent 70%);
	mask-image: radial-gradient(120% 80% at 100% 0%, #000 0%, transparent 70%);
}

.hk-teklif-m__pafta {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 3;
	padding: 8% 10%;
	border: var(--kenar-ince) solid rgb(197 198 198 / 0.22);
	border-radius: var(--kose-orta);
	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: 48px 48px, 48px 48px, 12px 12px, 12px 12px;
	background-position: -1px -1px;
}

.hk-teklif-m__pafta > svg {
	width: 100%;
	height: auto;
}

.hk-teklif-m__pafta .hk-led {
	animation: hk-yanip 1.8s ease-in-out infinite;
}

.hk-teklif-m__foto {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	margin: 0;
	border: var(--kenar-ince) solid rgb(197 198 198 / 0.22);
	border-radius: var(--kose-orta);
	background: var(--grafit);
}

.hk-teklif-m__foto > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hk-teklif-m__foto-not {
	position: absolute;
	right: var(--bosluk-2);
	top: var(--bosluk-2);
	padding: 2px var(--bosluk-2);
	border-radius: 999px;
	background: rgb(35 37 37 / 0.8);
	color: var(--beyaz);
	font-size: 11px;
	line-height: 16px;
}

.hk-teklif-m__ad {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 22px;
	line-height: 28px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--metin-baslik);
}

.hk-teklif-m__cizim {
	justify-self: center;
	width: 220px;
	margin-top: var(--bosluk-6);
}

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

.hk-teklif-m__metin {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 15px;
	line-height: 24px;
	color: var(--metin);
}

.hk-teklif-m__bilgi {
	display: grid;
	margin: 0;
	font-family: var(--font-sans);
	font-size: 14px;
	line-height: 22px;
}

.hk-teklif-m__bilgi > div {
	display: flex;
	justify-content: space-between;
	gap: var(--bosluk-3);
	padding-block: var(--bosluk-2);
	border-top: var(--kenar-ince) solid var(--cizgi);
}

.hk-teklif-m__bilgi dt {
	color: var(--metin);
}

.hk-teklif-m__bilgi dd {
	margin: 0;
	text-align: right;
	color: var(--metin-baslik);
}

.hk-teklif-m__bilgi code {
	font-family: var(--font-mono);
	color: var(--logo-mavisi);
}

/* telefon ve WhatsApp formun yanında (Rehber 7.2) */
.hk-teklif-m__kanal {
	grid-area: kanal;
	display: grid;
	gap: var(--bosluk-3);
	align-content: end;
	padding: var(--bosluk-5) var(--bosluk-6) var(--bosluk-6);
	border-top: var(--kenar-ince) solid rgb(197 198 198 / 0.18);
}

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

.hk-teklif-m__tel {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 24px;
	line-height: 32px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.hk-teklif-m__tel a {
	color: var(--metin-baslik);
	text-decoration: none;
}

.hk-teklif-m__tel a:hover {
	color: var(--logo-mavisi);
}

.hk-teklif-m__kanal .hk-dugme-dizisi {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--bosluk-2);
}

.hk-teklif-m__kanal .hk-dugme {
	min-height: 44px;
	padding-inline: var(--bosluk-3);
}

.hk-teklif-m__kanal .hk-dugme--ikincil .hk-simge {
	color: var(--eylem);
}

.hk-teklif-m__kanal .hk-kapanis__sure {
	margin: 0;
}

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

	.hk-giris-k__baslik {
		font-size: 72px;
		line-height: 72px;
	}

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

	.hk-adimlar--5 .hk-adim:nth-child(3)::after {
		display: none;
	}

	.hk-mozaik-h {
		height: 480px;
	}

	.hk-giris-h__baslik {
		font-size: 60px;
		line-height: 64px;
	}

	.hk-grup-h__icerik {
		padding: var(--bosluk-6);
	}
}

@container (max-width: 959px) {

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

	/* Tek sütunda sıra: sayfa yolu, görsel, başlık ve metin (Beest kararı, 13 Ekim
   2026). Metin sütununun kutusu
     kalkar, öğeleri girişin ızgarasına geçer; aralıklar metin sütunundakiyle
     aynı, görselin altında biraz fazla. */
	.hk-giris-k .hk-giris__ic > .hk-giris__metin {
		display: contents;
	}

	.hk-giris-k .hk-giris__ic {
		row-gap: var(--bosluk-5);
	}

	.hk-giris-k .hk-giris__ic > .hk-giris__metin > .hk-sayfa-yolu {
		order: -2;
		margin-bottom: 0;
	}

	.hk-giris-k .hk-giris__ic > figure {
		margin-bottom: var(--bosluk-2);
	}

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

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

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

	.hk-vitrin-k {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: none;
		grid-auto-rows: auto;
		grid-template-areas: "kom kom" "mod mod" "raf ara";
	}

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

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

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

	.hk-adimlar--5 .hk-adim:nth-child(3)::after {
		display: block;
	}

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

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

	.hk-mozaik-h {
		height: 420px;
	}

	.hk-grup-h,
	.hk-grup-h--ters {
		grid-template-columns: 1fr;
	}

	.hk-grup-h--ters .hk-grup-h__gorsel {
		order: 0;
	}

	.hk-grup-h__gorsel {
		min-height: 0;
		aspect-ratio: 16 / 9;
	}

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

@container (max-width: 719px) {

	.hk-izgara-k3 {
		grid-template-columns: 1fr;
		gap: var(--bosluk-3);
	}

	.hk-vaka-k {
		min-height: 0;
		padding: var(--bosluk-5);
		padding-top: 180px;
	}

	.hk-vaka-k::after {
		background: linear-gradient(0deg, rgb(35 37 37 / 0.97) 0%, rgb(35 37 37 / 0.88) 55%, rgb(35 37 37 / 0.25) 100%);
	}
}

@container (max-width: 599px) {

	.hk-giris-k__baslik {
		font-size: 56px;
		line-height: 56px;
	}

	.hk-giris-k .hk-giris__metin {
		gap: var(--bosluk-4);
	}

	.hk-giris-k .hk-giris__ic {
		row-gap: var(--bosluk-4);
	}

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

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

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

	.hk-deger-k__oge,
	.hk-deger-k__oge:nth-child(3) {
		border-left: 0;
		padding: var(--bosluk-4) 0;
	}

	.hk-deger-k__oge + .hk-deger-k__oge {
		border-top: var(--kenar-ince) solid var(--cizgi);
	}

	.hk-capalar-k {
		flex-wrap: nowrap;
	}

	.hk-capalar-k ul {
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-bottom: 2px;
		scrollbar-width: none;
	}

	.hk-capalar-k li {
		flex: none;
	}

	.hk-vitrin-k {
		grid-template-columns: 1fr;
		grid-template-areas: "kom" "mod" "raf" "ara";
		gap: var(--bosluk-3);
	}

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

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

	/* ürün kartı mobilde yatay: küçük çizim solda, bilgiler sağda, düğmeler
   altta */
	.hk-urun-k {
		display: grid;
		grid-template-columns: 112px minmax(0, 1fr);
		grid-template-rows: auto 1fr auto;
	}

	.hk-urun-k > .hk-gorsel-kutusu {
		grid-column: 1;
		grid-row: 1;
		align-self: start;
		aspect-ratio: 1 / 1;
		margin: var(--bosluk-4) 0 0 var(--bosluk-4);
		border: var(--kenar-ince) solid var(--cizgi);
		border-radius: var(--kose-kucuk);
	}

	.hk-urun-k .hk-kart__govde {
		grid-column: 2;
		grid-row: 1 / 3;
		padding: var(--bosluk-4);
	}

	.hk-urun-k .hk-kart__eylemler {
		grid-column: 1 / -1;
		grid-row: 3;
	}

	.hk-urun-k .baslik-4 {
		font-size: 17px;
		line-height: 24px;
	}

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

	.hk-adimlar--5 .hk-adim:nth-child(n)::after {
		display: block;
	}

	.hk-adimlar--5 .hk-adim:last-child::after {
		display: none;
	}

	.hk-urun-giris__baslik {
		font-size: 34px;
		line-height: 40px;
	}

	.hk-urun-giris__ic {
		padding-block: var(--bosluk-4) var(--bosluk-6);
	}

	.hk-mozaik-h {
		height: 320px;
		gap: var(--bosluk-2);
	}

	.hk-mozaik-h__etiket {
		left: var(--bosluk-3);
		bottom: var(--bosluk-3);
		font-size: 13px;
	}

	.hk-mozaik-h__not,
	.hk-foto-h__not,
	.hk-grup-h__not,
	.hk-proje-b__not,
	.hk-hp__not {
		right: var(--bosluk-3);
		top: var(--bosluk-3);
	}

	.hk-giris-h__baslik {
		font-size: 44px;
		line-height: 48px;
	}

	.hk-giris-h .hk-dugme-dizisi .hk-dugme--birincil {
		grid-column: 1 / -1;
	}

	.hk-giris-h .hk-dugme-dizisi:not(:has(> :nth-child(3))) .hk-dugme {
		grid-column: 1 / -1;
	}

	.hk-grup-h__icerik {
		gap: var(--bosluk-4);
		padding: var(--bosluk-5) var(--bosluk-4) var(--bosluk-4);
	}

	.hk-grup-h__ust {
		grid-template-columns: auto minmax(0, 1fr);
		row-gap: var(--bosluk-2);
	}

	.hk-grup-h__sayi {
		grid-column: 2;
	}

	.hk-grup-h__baslik {
		font-size: 28px;
		line-height: 34px;
	}

	.hk-grup-h__no {
		min-width: 44px;
		height: 32px;
		font-size: 14px;
	}

	.hk-hizmet-h {
		gap: 2px var(--bosluk-3);
		padding-right: 0;
	}

	.hk-hizmet-h__ad {
		font-size: 18px;
		line-height: 26px;
	}

	.hk-hizmet-h__metin {
		font-size: 14px;
		line-height: 22px;
	}

	.hk-hizmet-h:is(:hover, :focus-within) {
		padding-left: 0;
		background: transparent;
	}

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

	.hk-kapsam-h__baslik {
		font-size: 20px;
		line-height: 26px;
	}

	.hk-liste-h li {
		font-size: 15px;
		line-height: 22px;
	}
}

/* İletişim ve teklif: duyarlı düzen */
@container (max-width: 1199px) {

	.hk-giris-i .hk-giris__ic {
		grid-template-columns: minmax(0, 1fr) minmax(0, 500px);
		column-gap: var(--bosluk-7);
	}
}

@container (max-width: 959px) {

	.hk-giris-i .hk-giris__ic {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "yol" "metin" "kanallar";
		grid-template-rows: none;
	}

	.hk-giris-i .hk-giris__metin {
		align-self: start;
	}

	.hk-giris-i .hk-kanallar-i {
		align-self: start;
	}

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

	.hk-harita-i {
		min-height: 0;
		aspect-ratio: 16 / 10;
	}
}

@container (max-width: 599px) {

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

	.hk-kanal-i {
		grid-template-columns: 44px minmax(0, 1fr) auto;
		gap: var(--bosluk-3);
		padding: var(--bosluk-4);
	}

	.hk-kanal-i__simge {
		width: 44px;
		height: 44px;
	}

	.hk-kanal-i__simge .hk-simge {
		width: 22px;
		height: 22px;
	}

	.hk-kanal-i__deger {
		font-size: 20px;
		line-height: 28px;
	}

	.hk-kanal-i__not {
		font-size: 13px;
		line-height: 20px;
	}

	.hk-kanal-i .hk-ok-dugme {
		width: 40px;
		height: 40px;
	}

	.hk-kanal-i .hk-ok-dugme .hk-simge {
		width: 24px;
		height: 24px;
	}

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

	.hk-harita-i {
		aspect-ratio: 4 / 3;
	}
}

/* Teklif modalı: 800px'ten dar sayfada tam ekran (Motion'daki gibi) */
@container (max-width: 799px) {

	.hk-teklif-sahne {
		height: auto;
		min-height: 0;
		overflow: visible;
	}

	.hk-teklif-sahne__sayfa {
		display: none;
	}

	.hk-teklif-sahne__ortu {
		position: static;
		display: block;
		padding: 0;
		background: none;
	}

	.hk-teklif-m {
		width: 100%;
		min-height: 812px;
		max-height: none;
		overflow: visible;
		border-radius: 0;
		box-shadow: none;
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto;
		grid-template-areas: "baglam" "form" "kanal";
		align-content: start;
	}

	.hk-teklif-m__sonuc {
		margin-right: 0;
	}

	.hk-teklif-m .hk-alan-cifti {
		grid-template-columns: minmax(0, 1fr);
	}

	.hk-teklif-m__baglam {
		grid-template-columns: 104px minmax(0, 1fr);
		column-gap: var(--bosluk-4);
		row-gap: var(--bosluk-1);
		align-items: center;
		padding: var(--bosluk-4);
	}

	.hk-teklif-m__baglam > .hk-ust-etiket,
	.hk-teklif-m__ad {
		grid-column: 2;
	}

	/* etiket ve başlık sağ üstteki kapat düğmesinin altına girmesin */
	.hk-teklif-m__baglam > .hk-ust-etiket,
	.hk-teklif-m__ad {
		padding-right: calc(var(--kontrol-yuksekligi) + var(--bosluk-4) + var(--bosluk-2) - var(--bosluk-4));
	}

	.hk-teklif-m__pafta,
	.hk-teklif-m__foto {
		grid-column: 1;
		grid-row: 1 / span 2;
		padding: 6%;
	}

	.hk-teklif-m__foto {
		padding: 0;
		aspect-ratio: 4 / 3;
	}

	.hk-teklif-m__foto-not {
		display: none;
	}

	.hk-teklif-m__ad {
		font-size: 18px;
		line-height: 24px;
	}

	.hk-teklif-m__bilgi {
		grid-column: 1 / -1;
		margin-top: var(--bosluk-2);
	}

	.hk-teklif-m--genel .hk-teklif-m__baglam {
		grid-template-columns: minmax(0, 1fr);
	}

	.hk-teklif-m__cizim {
		display: none;
	}

	.hk-teklif-m--genel .hk-teklif-m__baglam > * {
		grid-column: 1;
	}

	.hk-teklif-m__form {
		padding: var(--bosluk-4) var(--bosluk-4) var(--bosluk-6);
	}

	.hk-teklif-m .hk-form__gonder .hk-dugme {
		width: 100%;
	}

	.hk-teklif-m__kanal {
		padding: var(--bosluk-5) var(--bosluk-4) var(--bosluk-7);
	}
}

/* ---------- Ürünler: ürün grubu kartı; altta markalar ve yuvarlak ok
   düğmesi (proje kartlarındaki gibi) ---------- */
.hk-kategori-karti .hk-kart__eylemler {
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--bosluk-3);
}

.hk-kategori-karti .hk-kategori-karti__markalar {
	margin: 0;
}

.hk-kategori-karti .hk-ok-dugme {
	width: var(--kontrol-yuksekligi-kucuk);
	height: var(--kontrol-yuksekligi-kucuk);
}

.hk-kategori-karti .hk-ok-dugme .hk-simge {
	width: 22px;
	height: 22px;
}

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

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

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

/* ---------- Ürünler: markaya göre ürünler; ortalı kart, üstte marka logosu
   ---------- */
.hk-marka-k .hk-kart__govde {
	justify-items: center;
	text-align: center;
	gap: var(--bosluk-2);
	padding: var(--bosluk-6) var(--bosluk-5);
}

.hk-marka-k__logo {
	display: grid;
	place-items: center;
	width: 100%;
	height: 48px;
	margin-bottom: var(--bosluk-2);
}

.hk-marka-k__logo img {
	display: block;
	width: auto;
	height: auto;
	max-width: 72%;
	max-height: 28px;
}

.hk-marka-k__yer {
	display: grid;
	place-items: center;
	height: 36px;
	padding: 0 var(--bosluk-3);
	border: var(--kenar-ince) dashed var(--kontrol-kenari);
	border-radius: var(--kose-kucuk);
	font-size: 12px;
	line-height: 16px;
	color: var(--metin);
}

.hk-marka-k .hk-urun-sayi {
	margin: 0;
	font-size: 14px;
	line-height: 20px;
	color: var(--metin);
	font-variant-numeric: tabular-nums;
}

.hk-marka-tumu {
	display: flex;
	justify-content: center;
}

.hk-marka-k-izgara {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--bosluk-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hk-marka-k-izgara > .hk-marka-k {
	flex: 0 1 calc((100% - 3 * var(--bosluk-5)) / 4);
}

@container (max-width: 959px) {

	.hk-marka-k-izgara > .hk-marka-k {
		flex-basis: calc((100% - 2 * var(--bosluk-5)) / 3);
	}
}

@container (max-width: 599px) {

	.hk-marka-k-izgara {
		gap: var(--bosluk-3);
	}

	.hk-marka-k-izgara > .hk-marka-k {
		flex-basis: calc((100% - var(--bosluk-3)) / 2);
	}

	.hk-marka-k .hk-kart__govde {
		padding: var(--bosluk-5) var(--bosluk-3);
	}
}

/* ---------- Ürün başı: yaşam döngüsü (katalogdaki Siemens ürün verisi; 12
   Ekim 2026) ---------- */
.hk-yasam-k {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--bosluk-2);
	margin: 0;
	font-size: 14px;
	line-height: 20px;
	color: var(--metin);
}

.hk-yasam-k strong {
	font-weight: 600;
	color: var(--metin-baslik);
}

.hk-yasam-k__nokta {
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--logo-mavisi);
}

/* uyarılı ürün: üretimden kalkan, iptal edilen ya da son destek yılındaki
   üründe uyarı ve ardıl ürün bağlantısı */

/* yaşam döngüsü uyarısı (ürün başında; 17 Ekim 2026'dan beri açık zeminde:
   beyaz kutu, solda koyu kenar) */
.hk-uyari-k {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	gap: var(--bosluk-1) var(--bosluk-3);
	padding: var(--bosluk-4);
	border: var(--kenar-ince) solid var(--cizgi);
	border-left: var(--kenar-kalin) solid var(--metin-baslik);
	background: var(--yuzey);
}

.hk-uyari-k > .hk-simge {
	grid-row: 1 / span 2;
	width: 22px;
	height: 22px;
	color: var(--metin-baslik);
}

.hk-uyari-k__baslik {
	margin: 0;
	font-size: 16px;
	line-height: 22px;
	font-weight: 600;
	color: var(--metin-baslik);
}

.hk-uyari-k__metin {
	margin: 0;
	font-size: 14px;
	line-height: 22px;
	color: var(--metin);
}

.hk-uyari-k__metin a {
	color: var(--metin-baslik);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.hk-uyari-k__metin a:hover {
	color: var(--baglanti);
}

/* Kategori · ürün listesi (Beest kararı, 12 Ekim 2026): beyaz zemin, üstte
   giriş bölümündeki çizgili desenin açık zemin
   hâli; solda arama ve filtre sütunu (arama kutusu ile filtre kutusu bitişik),
   sağda ürünler. Mobilde tek sütun:
   arama, ona bitişik "Filtrele" çubuğu ve açılan filtre paneli. */
.hk-liste-k {
	position: relative;
	isolation: isolate;
	background: var(--beyaz);
}

.hk-liste-k::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: min(100%, 960px);
	z-index: -1;
	pointer-events: none;
	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: 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%);
}

.hk-liste-k__duzen {
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr);
	gap: var(--bosluk-7) var(--bosluk-6);
	align-items: start;
}

/* yapışkan sütun ekrandan uzunsa kendi içinde kayar; iç boşluk odak
   çizgisinin kesilmemesi için (negatif dış boşlukla dengelenir) */
.hk-liste-k__yan {
	position: sticky;
	top: 144px;
	display: grid;
	align-content: start;
	max-height: calc(100vh - 168px);
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	margin: -4px;
	padding: 4px;
}

.hk-liste-k__yan .hk-arama__alan {
	height: var(--kontrol-yuksekligi);
	border-radius: var(--kose-orta) 0 0 0;
	font-size: 15px;
}

.hk-liste-k__yan .hk-arama__satir .hk-dugme {
	border-radius: 0 var(--kose-orta) 0 0;
	padding-inline: var(--bosluk-4);
}

.hk-liste-k__yan .hk-filtre {
	gap: 0;
}

.hk-liste-k__yan .hk-filtre__panel {
	display: grid;
	gap: var(--bosluk-5);
	padding: var(--bosluk-5);
	border: var(--kenar-ince) solid var(--kontrol-kenari);
	border-top: 0;
	border-radius: 0 0 var(--kose-orta) var(--kose-orta);
	background: var(--beyaz);
}

.hk-liste-k__yan .hk-filtre__grup + .hk-filtre__grup {
	padding-top: var(--bosluk-5);
	border-top: var(--kenar-ince) solid var(--cizgi);
}

/* legend kayan öğe olunca fieldset kenarına oturmaz: grup ayracı çizgisi
   başlığın üstünde temiz kalır */
.hk-liste-k__yan .hk-filtre__grup legend {
	float: left;
	width: 100%;
	margin: 0 0 var(--bosluk-1);
	padding: 0;
	font-size: 13px;
	line-height: 16px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.hk-secenekler-k {
	display: grid;
	gap: var(--bosluk-1);
}

.hk-secenek-k {
	display: grid;
	grid-template-columns: 18px minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--bosluk-3);
	min-height: 36px;
	cursor: pointer;
	font-size: 15px;
	line-height: 22px;
	font-weight: 500;
	color: var(--metin-baslik);
}

.hk-secenek-k input {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--eylem);
	cursor: pointer;
}

.hk-secenek-k:hover .hk-secenek-k__ad {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.hk-secenek-k:has(input:checked) .hk-secenek-k__ad {
	font-weight: 700;
}

.hk-secenek-k__sayi {
	font-size: 13px;
	line-height: 18px;
	font-weight: 400;
	color: var(--metin);
	font-variant-numeric: tabular-nums;
}

.hk-liste-k__sonuclar {
	display: grid;
	gap: var(--bosluk-5);
	min-width: 0;
}

.hk-liste-k__ozet {
	min-height: var(--kontrol-yuksekligi);
}

.hk-liste-k__izgara {
	--hk-sutun: 3;
}

@container (max-width: 1199px) {

	.hk-liste-k__izgara {
		--hk-sutun: 2;
	}
}

@container (max-width: 959px) {

	.hk-liste-k__duzen {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--bosluk-5);
	}

	.hk-liste-k__yan {
		position: static;
		max-height: none;
		overflow: visible;
	}

	.hk-liste-k__yan .hk-filtre__panel {
		grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
		gap: var(--bosluk-5) var(--bosluk-6);
	}

	.hk-liste-k__yan .hk-filtre__grup + .hk-filtre__grup {
		padding-top: 0;
		border-top: 0;
	}

	.hk-liste-k__yan .hk-secenekler-k {
		grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
		column-gap: var(--bosluk-5);
	}

	.hk-liste-k__yan .hk-secenekler-k--iki {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	}

	.hk-liste-k__ozet {
		min-height: 0;
	}
}

@container (max-width: 599px) {

	.hk-liste-k__izgara {
		--hk-sutun: 1;
	}

	.hk-liste-k__yan .hk-filtre__ac {
		width: 100%;
		justify-content: flex-start;
		min-height: var(--kontrol-yuksekligi);
		border-color: var(--kontrol-kenari);
		border-top: 0;
		border-radius: 0 0 var(--kose-orta) var(--kose-orta);
	}

	.hk-liste-k__yan .hk-filtre__ac[aria-expanded="true"] {
		border-radius: 0;
	}

	.hk-liste-k__yan .hk-filtre__panel {
		grid-template-columns: minmax(0, 1fr);
		padding: var(--bosluk-4);
	}

	.hk-liste-k__yan .hk-filtre__panel[hidden] {
		display: none;
	}

	.hk-liste-k__yan .hk-filtre__grup + .hk-filtre__grup {
		padding-top: var(--bosluk-4);
		border-top: var(--kenar-ince) solid var(--cizgi);
	}

	.hk-liste-k__yan .hk-secenekler-k {
		grid-template-columns: minmax(0, 1fr);
	}

	.hk-liste-k__yan .hk-secenekler-k--iki {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--bosluk-4);
	}
}

/* ---------- Projeler ve sektör kararı (Beest, 13 Ekim 2026) ---------- */

/* Hizmetler › sektör kartları: sektör sayfası yok; proje adları proje
   sayfasına gider */
.hk-sektor-a__uygulamalar li:has(> a) {
	padding: 0;
}

.hk-sektor-a__uygulamalar a {
	display: block;
	padding: 3px var(--bosluk-2);
	color: inherit;
	text-decoration: none;
}

.hk-sektor-a__uygulamalar a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

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

/* Projeler: girişteki kanıt şeridinde üç rakam; proje kartları liste olarak
   (kart Hizmetler'deki Örnek projeler kartı) */
.hk-kanit--uc {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hk-proje-listesi {
	margin: 0;
	padding: 0;
	list-style: none;
}

.hk-proje-listesi > li {
	display: flex;
}

@container (max-width: 959px) {

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

	.hk-kanit--uc .hk-kanit__oge:nth-child(3) {
		border-left: var(--kenar-ince) solid var(--cizgi);
		padding-left: var(--bosluk-5);
	}

	.hk-kanit--uc .hk-kanit__oge:nth-child(n+3) {
		border-top: 0;
	}
}

@container (max-width: 599px) {

	.hk-kanit--uc .hk-kanit__oge {
		padding-inline: var(--bosluk-3);
	}

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

	.hk-kanit--uc .hk-kanit__oge:nth-child(3) {
		padding-left: var(--bosluk-3);
	}

	.hk-proje-listesi .hk-proje-b {
		aspect-ratio: 4 / 3;
	}
}

/* ---------- Proje sayfası (Beest, 13 Ekim 2026) ---------- */

/* Şeritteki sektörler: sayfası olmayan etiketler, bağlantı çiplerinden
   ayrışsın diye çerçevesiz ve düz */
.hk-capalar-k__cip {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 0 var(--bosluk-4);
	border-radius: 999px;
	background: rgb(255 255 255 / 0.28);
	font-family: var(--font-sans);
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
	color: var(--grafit);
	white-space: nowrap;
}

/* Mavi kartta dolum yapılan ürünler */
.hk-urunler-p {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bosluk-2);
	margin: 0;
	padding: var(--bosluk-4) 0 0;
	border-top: var(--kenar-ince) solid var(--cizgi);
	list-style: none;
}

.hk-urunler-p li {
	padding: 6px var(--bosluk-3);
	border: var(--kenar-ince) solid rgb(35 37 37 / 0.28);
	border-radius: var(--kose-kucuk);
	background: rgb(255 255 255 / 0.22);
	font-family: var(--font-sans);
	font-size: 15px;
	line-height: 22px;
	font-weight: 600;
	color: var(--grafit);
}

/* Künye: özellik tablosu ve fotoğraf yerleri */

/* masaüstünde fotoğraf yerleri tablonun boyunu tutar; dar ekranda tablonun
   altında iki yan yana 3:2 */
.hk-kunye-p {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: var(--bosluk-6);
	align-items: stretch;
}

.hk-kunye-p .hk-ozellik-tablosu {
	background: var(--beyaz);
}

.hk-kunye-p__fotolar {
	display: grid;
	grid-template-rows: repeat(2, minmax(0, 1fr));
	gap: var(--bosluk-4);
}

.hk-kunye-p__fotolar .hk-gorsel-yeri {
	aspect-ratio: auto;
	height: 100%;
	min-height: 160px;
	background: var(--beyaz);
}

@container (max-width: 959px) {

	.hk-kunye-p {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--bosluk-5);
	}

	.hk-kunye-p__fotolar {
		grid-template-rows: none;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hk-kunye-p__fotolar .hk-gorsel-yeri {
		aspect-ratio: 3 / 2;
		height: auto;
		min-height: 0;
	}
}

@container (max-width: 599px) {

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

	.hk-urunler-p li {
		font-size: 14px;
		line-height: 20px;
	}
}

/* ---------- Uygulamalar ve referans projeler (Beest, 13 Ekim 2026)
   ---------- */

/* Uygulamalar: grup kartlarındaki satırlar bağlantı değil (ayrı uygulama
   sayfası yok); her satır çapa (/uygulamalar/#…) */
.hk-uygulama-u {
	grid-template-columns: minmax(0, 1fr);
	padding-right: 0;
	scroll-margin-top: 152px;
}

.hk-uygulama-u:is(:hover, :focus-within) {
	padding-left: 0;
	background: transparent;
}

.hk-uygulama-u:is(:hover, :focus-within) .hk-hizmet-h__ad {
	color: var(--metin-baslik);
}

.hk-uygulama-u:target .hk-hizmet-h__ad {
	color: var(--logo-mavisi);
}

.hk-uygulama-u__etiketler {
	grid-column: 1;
	margin: var(--bosluk-2) 0 0;
}

/* Projeler › Referanslar: ana sayfadaki marka ızgarası, dört sütun; yayın
   izni gelene kadar yer tutucu */
.hk-referanslar-p {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.hk-referanslar-p li {
	min-height: 112px;
	text-align: center;
	background: var(--beyaz);
	font-size: 14px;
	line-height: 20px;
	font-weight: 400;
	letter-spacing: 0;
	color: var(--metin);
}

.hk-referanslar-p li:nth-child(4n) {
	border-right: 0;
}

@container (600px <= width <= 959px) {

	.hk-referanslar-p li:nth-child(3n):not(:nth-child(4n), :last-child) {
		border-right: var(--kenar-ince) solid var(--cizgi);
	}
}

@container (max-width: 599px) {

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

	.hk-referanslar-p li {
		min-height: 88px;
		font-size: 13px;
		line-height: 18px;
	}

	/* çizimli yer tutucu kartlar kare: çizim etiketlerin üstünde kalır
   (fotoğraflı kartlar 4:3) */
	.hk-proje-listesi .hk-proje-b:has(.hk-proje-b__gorsel--cizim) {
		aspect-ratio: 1 / 1;
	}
}

/* ========== Uygulamalar denemeleri (Beest, 13 Ekim 2026): A galeri, B
   vitrin, C gezgin, D hat ========== */

/* Çizimli görseller: ana sayfadaki proje kartlarının mavi kareli zemini */
.hk-vitrin-u__gorsel--cizim,
.hk-vitrin-u__karo-gorsel--cizim,
.hk-gezgin-u__kucuk--cizim,
.hk-gezgin-u__gorsel--cizim,
.hk-hat-u__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;
}

/* A · şeritteki grup çipleri düğme (süzgeç): bağlantı çipleriyle aynı,
   seçili olan koyu */
.hk-capalar-k button {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 0 var(--bosluk-4);
	cursor: pointer;
	border: var(--kenar-ince) solid rgb(35 37 37 / 0.45);
	border-radius: 999px;
	background: transparent;
	font-family: var(--font-sans);
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
	color: var(--grafit);
	white-space: nowrap;
	transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

.hk-capalar-k button:hover,
.hk-capalar-k button[aria-pressed="true"] {
	background: var(--grafit);
	border-color: var(--grafit);
	color: var(--beyaz);
}

.hk-capalar-k button:focus-visible {
	outline: var(--odak-kalinligi) solid var(--grafit);
	outline-offset: 2px;
}

/* A · galeri: dört sütun; açık kartın satırının altında tam genişlik ayrıntı
   bandı (sıra betikte hesaplanır) */
.hk-galeri-u {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--bosluk-5);
}

.hk-galeri-u__oge {
	display: flex;
	min-width: 0;
	scroll-margin-top: 152px;
}

.hk-galeri-u__oge[hidden],
.hk-galeri-u__ayrinti[hidden],
.hk-galeri-u__govde[hidden] {
	display: none;
}

.hk-galeri-u__ac {
	display: block;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	text-align: left;
	cursor: pointer;
}

.hk-galeri-u__oge[data-acik="true"] .hk-galeri-u__kart {
	box-shadow: 0 0 0 3px var(--zemin), 0 0 0 6px var(--logo-mavisi);
}

.hk-galeri-u__oge[data-acik="true"] .hk-ok-dugme {
	background: var(--logo-mavisi);
}

.hk-galeri-u__ayrinti {
	order: var(--sira-d, 999);
	grid-column: 1 / -1;
	position: relative;
	padding: var(--bosluk-6) var(--bosluk-7);
	border-top: 4px solid var(--logo-mavisi);
	border-radius: var(--kose-orta);
	background: var(--grafit);
	color: var(--metin);
}

.hk-galeri-u__govde {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr);
	gap: var(--bosluk-6);
	align-items: start;
}

.hk-galeri-u__bas {
	display: grid;
	gap: var(--bosluk-3);
}

.hk-galeri-u__ad {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 28px;
	line-height: 34px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--metin-baslik);
}

.hk-galeri-u__orta {
	display: grid;
	gap: var(--bosluk-4);
}

.hk-galeri-u__metin {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 26px;
	color: var(--metin);
}

.hk-galeri-u__govde .hk-dugme-dizisi {
	display: grid;
	gap: var(--bosluk-2);
	padding-right: var(--bosluk-7);
}

.hk-galeri-u__kapat {
	position: absolute;
	top: var(--bosluk-4);
	right: var(--bosluk-4);
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	cursor: pointer;
	border: var(--kenar-ince) solid rgb(197 198 198 / 0.35);
	border-radius: var(--kose-daire);
	background: transparent;
	color: var(--metin-baslik);
}

.hk-galeri-u__kapat:hover {
	border-color: var(--logo-mavisi);
	background: var(--logo-mavisi);
	color: var(--grafit);
}

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

/* B · grup vitrinleri: seçili uygulama büyük kartta, diğerleri görselli
   karolar; ikinci ve dördüncü grup koyu zeminde */
.hk-vitrin-u {
	scroll-margin-top: 120px;
}

.hk-vitrin-u.hk-bolum--koyu {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.hk-vitrin-u.hk-bolum--koyu::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image: linear-gradient(rgb(0 158 227 / 0.08) 1px, transparent 1px), linear-gradient(90deg, rgb(0 158 227 / 0.08) 1px, transparent 1px);
	background-size: 120px 120px;
	background-position: -1px -1px;
}

.hk-vitrin-u__ust {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: var(--bosluk-4);
	align-items: center;
	padding-bottom: var(--bosluk-5);
	border-bottom: var(--kenar-kalin) solid var(--metin-baslik);
}

.hk-vitrin-u__baslik {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 36px;
	line-height: 42px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--metin-baslik);
}

.hk-vitrin-u .hk-grup-h__sayi {
	color: var(--vurgu);
}

.hk-vitrin-u__govde {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: var(--bosluk-5);
	align-items: start;
}

.hk-vitrin-u__kart {
	display: grid;
	overflow: hidden;
	border-radius: var(--kose-orta);
	background: var(--grafit);
	color: var(--metin);
}

.hk-bolum--koyu .hk-vitrin-u__kart {
	border: var(--kenar-ince) solid rgb(197 198 198 / 0.22);
}

.hk-vitrin-u__kart[hidden] {
	display: none;
}

.hk-vitrin-u__gorsel {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.hk-vitrin-u__gorsel > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hk-vitrin-u__gorsel--cizim {
	display: grid;
	place-items: center;
}

.hk-vitrin-u__gorsel--cizim > svg {
	width: 64%;
	height: auto;
}

.hk-vitrin-u__icerik {
	display: grid;
	gap: var(--bosluk-4);
	align-content: start;
	padding: var(--bosluk-6);
}

.hk-vitrin-u__ad {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 28px;
	line-height: 34px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--metin-baslik);
}

.hk-vitrin-u__metin {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 26px;
	color: var(--metin);
}

.hk-vitrin-u__karolar {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--bosluk-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hk-vitrin-u__karo {
	position: relative;
	isolation: isolate;
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	padding: 0;
	cursor: pointer;
	border: 0;
	border-radius: var(--kose-orta);
	background: var(--grafit);
	text-align: left;
	font-family: var(--font-sans);
	transition: transform 300ms cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 300ms ease;
}

.hk-vitrin-u__karo-gorsel {
	position: absolute;
	inset: 0;
	z-index: -2;
}

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

.hk-vitrin-u__karo-gorsel--cizim > svg {
	position: absolute;
	left: 8%;
	top: 4%;
	width: 84%;
	height: auto;
}

.hk-vitrin-u__karo::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(to top, rgb(35 37 37 / 0.96) 0%, rgb(35 37 37 / 0.7) 34%, rgb(35 37 37 / 0) 66%);
}

.hk-vitrin-u__karo-ad {
	position: absolute;
	left: var(--bosluk-4);
	right: var(--bosluk-4);
	bottom: var(--bosluk-3);
	font-size: 15px;
	line-height: 20px;
	font-weight: 600;
	color: var(--beyaz);
	text-wrap: balance;
}

.hk-vitrin-u__karo-isaret {
	position: absolute;
	top: var(--bosluk-3);
	right: var(--bosluk-3);
	display: none;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: var(--kose-daire);
	background: var(--logo-mavisi);
	color: var(--grafit);
}

.hk-vitrin-u__karo-isaret .hk-simge {
	width: 16px;
	height: 16px;
	stroke-width: 3;
}

.hk-bolum--koyu .hk-vitrin-u__karo {
	outline: var(--kenar-ince) solid rgb(197 198 198 / 0.22);
	outline-offset: -1px;
}

.hk-vitrin-u__karo:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 24px rgb(35 37 37 / 0.25);
}

.hk-vitrin-u__karo:hover .hk-vitrin-u__karo-gorsel > img {
	transform: scale(1.05);
}

.hk-vitrin-u__karo[aria-pressed="true"] {
	outline: 3px solid var(--logo-mavisi);
	outline-offset: -3px;
}

.hk-vitrin-u__karo[aria-pressed="true"] .hk-vitrin-u__karo-isaret {
	display: grid;
}

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

/* C · sekmeli gezgin: beş alan sekmede; solda uygulamalar, sağda seçilenin
   ayrıntısı (sabit yükseklik) */
.hk-gezgin-u {
	display: grid;
	gap: var(--bosluk-6);
}

.hk-gezgin-u__sekmeler {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: var(--bosluk-4);
	border-top: var(--kenar-kalin) solid var(--cizgi);
}

.hk-gezgin-u__sekmeler:has(> :nth-child(7)) {
	grid-auto-flow: row;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.hk-gezgin-u__sekme {
	display: grid;
	gap: 2px;
	justify-items: start;
	align-content: start;
	margin-top: -2px;
	padding: var(--bosluk-4) 0 0;
	cursor: pointer;
	border: 0;
	border-top: 4px solid transparent;
	background: none;
	text-align: left;
	font-family: var(--font-sans);
	color: var(--metin);
	transition: border-color 200ms ease;
}

.hk-gezgin-u__sekme:hover {
	border-top-color: var(--acik-gri);
}

.hk-gezgin-u__sekme[aria-selected="true"] {
	border-top-color: var(--logo-mavisi);
}

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

.hk-gezgin-u__no {
	font-family: var(--font-mono);
	font-size: 13px;
	line-height: 18px;
	color: var(--metin);
}

.hk-gezgin-u__sekme[aria-selected="true"] .hk-gezgin-u__no {
	color: var(--koyu-mavi);
}

.hk-gezgin-u__sekme-ad {
	font-size: 19px;
	line-height: 26px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--metin);
	text-wrap: balance;
}

.hk-gezgin-u__sekme:hover .hk-gezgin-u__sekme-ad,
.hk-gezgin-u__sekme[aria-selected="true"] .hk-gezgin-u__sekme-ad {
	color: var(--metin-baslik);
}

.hk-gezgin-u__sayi {
	font-size: 13px;
	line-height: 18px;
	color: var(--metin);
}

.hk-gezgin-u__panel {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	gap: var(--bosluk-5);
	align-items: start;
}

.hk-gezgin-u__panel[hidden],
.hk-gezgin-u__kart[hidden] {
	display: none;
}

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

.hk-gezgin-u__oge {
	display: grid;
	grid-template-columns: 80px minmax(0, 1fr) auto;
	gap: var(--bosluk-4);
	align-items: center;
	width: 100%;
	padding: var(--bosluk-2);
	cursor: pointer;
	border: var(--kenar-ince) solid var(--cizgi);
	border-radius: var(--kose-orta);
	background: var(--beyaz);
	text-align: left;
	font-family: var(--font-sans);
	color: var(--metin-baslik);
	transition: border-color 150ms ease, background-color 150ms ease;
}

.hk-gezgin-u__oge > .hk-simge {
	width: 20px;
	height: 20px;
	margin-right: var(--bosluk-2);
	color: var(--metin);
}

.hk-gezgin-u__oge:hover {
	border-color: var(--metin-baslik);
}

.hk-gezgin-u__oge[aria-pressed="true"] {
	border-color: var(--grafit);
	background: var(--grafit);
	color: var(--beyaz);
}

.hk-gezgin-u__oge[aria-pressed="true"] > .hk-simge {
	color: var(--logo-mavisi);
}

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

.hk-gezgin-u__kucuk {
	position: relative;
	display: block;
	width: 80px;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--kose-kucuk);
	background: var(--grafit);
}

.hk-gezgin-u__kucuk > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hk-gezgin-u__kucuk--cizim > svg {
	position: absolute;
	left: 4%;
	top: 6%;
	width: 92%;
	height: auto;
}

.hk-gezgin-u__oge-ad {
	font-size: 15px;
	line-height: 20px;
	font-weight: 600;
}

.hk-gezgin-u__kart {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	min-height: 480px;
	overflow: hidden;
	border-radius: var(--kose-orta);
	background: var(--grafit);
	color: var(--metin);
}

.hk-gezgin-u__gorsel {
	position: relative;
	overflow: hidden;
	min-height: 240px;
}

.hk-gezgin-u__gorsel > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hk-gezgin-u__gorsel--cizim {
	display: grid;
	place-items: center;
}

.hk-gezgin-u__gorsel--cizim > svg {
	width: 90%;
	height: auto;
}

.hk-gezgin-u__icerik {
	display: grid;
	gap: var(--bosluk-4);
	align-content: start;
	padding: var(--bosluk-6);
}

.hk-gezgin-u__ad {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 28px;
	line-height: 34px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--metin-baslik);
}

.hk-gezgin-u__metin {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 26px;
	color: var(--metin);
}

/* D · girişte hat çizimi: solda metin, sağda seçili istasyonun bilgisi,
   altta altı istasyonlu hat */
.hk-hat-u {
	display: grid;
	grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
	grid-template-areas: "metin bilgi" "hat hat";
	gap: var(--bosluk-7) var(--bosluk-8);
	align-items: center;
	padding-block: var(--bosluk-6) var(--bosluk-7);
}

.hk-hat-u__metin {
	grid-area: metin;
}

.hk-hat-u__bilgi {
	grid-area: bilgi;
}

.hk-hat-u__bilgi-govde {
	display: grid;
	gap: var(--bosluk-4);
	padding: var(--bosluk-6);
	border: var(--kenar-ince) solid rgb(0 158 227 / 0.55);
	border-radius: var(--kose-orta);
	background: rgb(35 37 37 / 0.88);
	box-shadow: 0 0 0 6px rgb(0 158 227 / 0.08);
}

.hk-hat-u__bilgi-govde[hidden] {
	display: none;
}

.hk-hat-u__bilgi-ust {
	display: flex;
	align-items: center;
	gap: var(--bosluk-3);
	margin: 0;
	font-family: var(--font-sans);
	font-size: 13px;
	line-height: 16px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--logo-mavisi);
}

.hk-hat-u__bilgi-no {
	display: inline-grid;
	place-items: center;
	min-width: 36px;
	height: 24px;
	padding: 0 6px;
	border-radius: var(--kose-kucuk);
	background: var(--logo-mavisi);
	color: var(--grafit);
	font-family: var(--font-mono);
	font-size: 13px;
	letter-spacing: 0;
}

.hk-hat-u__bilgi-ad {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 32px;
	line-height: 38px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--metin-baslik);
}

.hk-hat-u__bilgi-metin {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 26px;
	color: var(--metin);
}

.hk-hat-u__bilgi-eylem {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--bosluk-3) var(--bosluk-6);
}

.hk-hat-u__hat {
	grid-area: hat;
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--bosluk-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hk-hat-u__istasyon {
	position: relative;
	display: flex;
}

/* istasyonlar arasında akış: kesikli logo mavisi çizgi ve ok */
.hk-hat-u__istasyon + .hk-hat-u__istasyon::before {
	content: "";
	position: absolute;
	top: 60px;
	right: calc(100% + 6px);
	width: calc(var(--bosluk-5) - 12px);
	border-top: var(--kenar-kalin) dashed var(--logo-mavisi);
}

.hk-hat-u__istasyon + .hk-hat-u__istasyon::after {
	content: "";
	position: absolute;
	top: 56px;
	right: calc(100% + 1px);
	border: 5px solid transparent;
	border-left-color: var(--logo-mavisi);
	border-right-width: 0;
}

.hk-hat-u__dugme {
	position: relative;
	display: grid;
	gap: var(--bosluk-2);
	align-content: start;
	width: 100%;
	padding: var(--bosluk-3);
	cursor: pointer;
	border: var(--kenar-ince) solid rgb(197 198 198 / 0.22);
	border-radius: var(--kose-orta);
	background: rgb(35 37 37 / 0.7);
	text-align: left;
	font-family: var(--font-sans);
	color: var(--metin);
	transition: border-color 200ms ease, background-color 200ms ease, transform 200ms ease;
}

.hk-hat-u__dugme:hover {
	border-color: var(--logo-mavisi);
	transform: translateY(-2px);
}

.hk-hat-u__dugme[aria-pressed="true"] {
	border-color: var(--logo-mavisi);
	background: rgb(0 158 227 / 0.12);
	box-shadow: 0 0 0 1px var(--logo-mavisi);
}

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

.hk-hat-u__no {
	position: absolute;
	top: var(--bosluk-4);
	left: var(--bosluk-4);
	z-index: 1;
	display: inline-grid;
	place-items: center;
	min-width: 30px;
	height: 22px;
	padding: 0 5px;
	border-radius: var(--kose-kucuk);
	background: rgb(35 37 37 / 0.9);
	color: var(--metin-baslik);
	font-family: var(--font-mono);
	font-size: 12px;
}

.hk-hat-u__dugme[aria-pressed="true"] .hk-hat-u__no {
	background: var(--logo-mavisi);
	color: var(--grafit);
}

.hk-hat-u__cizim {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: var(--kose-kucuk);
}

.hk-hat-u__cizim > svg {
	display: block;
	width: 100%;
	height: 100%;
}

.hk-hat-u__ad {
	font-size: 15px;
	line-height: 20px;
	font-weight: 700;
	color: var(--metin-baslik);
}

.hk-hat-u__grup {
	font-size: 12px;
	line-height: 16px;
	color: var(--metin);
}

@container (max-width: 1199px) {

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

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

	.hk-hat-u__istasyon:nth-child(3n + 1)::before,
	.hk-hat-u__istasyon:nth-child(3n + 1)::after {
		display: none;
	}
}

@container (max-width: 959px) {

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

	.hk-galeri-u__govde {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--bosluk-4);
	}

	.hk-galeri-u__govde .hk-dugme-dizisi {
		display: flex;
		padding-right: 0;
	}

	.hk-galeri-u__bas {
		padding-right: var(--bosluk-7);
	}

	.hk-vitrin-u__govde,
	.hk-gezgin-u__panel {
		grid-template-columns: minmax(0, 1fr);
	}

	/* tek sütunda sıra: sayfa yolu, hat çizimi, seçilen istasyonun bilgisi, sonra
   başlık ve metin (Beest kararı,
     13 Ekim 2026); metin sütununun kutusu kalkar, başlık ve sonrası
     adlandırılmış alanların altına dizilir */
	.hk-hat-u {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "yol" "hat" "bilgi";
		row-gap: var(--bosluk-5);
	}

	.hk-hat-u > .hk-hat-u__metin {
		display: contents;
	}

	.hk-hat-u > .hk-hat-u__metin > .hk-sayfa-yolu {
		grid-area: yol;
		margin-bottom: 0;
	}

	.hk-hat-u__hat,
	.hk-hat-u__bilgi {
		margin-bottom: var(--bosluk-2);
	}
}

@container (max-width: 719px) {

	.hk-gezgin-u__kart {
		grid-template-columns: minmax(0, 1fr);
		min-height: 0;
	}

	.hk-gezgin-u__gorsel {
		aspect-ratio: 16 / 10;
		min-height: 0;
	}
}

@container (max-width: 599px) {

	/* A: mobilde yatay kompakt kart (solda görsel), ayrıntı bandı kartın hemen
   altında */
	.hk-galeri-u {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--bosluk-3);
	}

	.hk-galeri-u .hk-proje-b {
		aspect-ratio: auto;
		flex-direction: row;
		align-items: stretch;
		min-height: 104px;
	}

	.hk-galeri-u .hk-proje-b::after {
		display: none;
	}

	.hk-galeri-u .hk-proje-b__gorsel {
		position: relative;
		inset: auto;
		z-index: 0;
		flex: none;
		width: 112px;
		overflow: hidden;
	}

	.hk-galeri-u .hk-proje-b__gorsel > img {
		position: absolute;
		inset: 0;
	}

	.hk-galeri-u .hk-proje-b__gorsel--cizim > svg {
		left: 2%;
		top: 50%;
		width: 96%;
		transform: translateY(-50%);
	}

	.hk-galeri-u .hk-proje-b__icerik {
		flex: 1;
		align-content: center;
		gap: var(--bosluk-1);
		padding: var(--bosluk-3) var(--bosluk-3) var(--bosluk-3) var(--bosluk-4);
	}

	.hk-galeri-u .hk-proje-b__etiketler {
		margin: 0;
	}

	.hk-galeri-u .hk-proje-b__etiketler li {
		font-size: 11px;
		line-height: 16px;
	}

	.hk-galeri-u .hk-proje-b__alt {
		align-items: center;
		gap: var(--bosluk-3);
	}

	.hk-galeri-u .hk-proje-b__baslik {
		padding-bottom: 0;
		font-size: 16px;
		line-height: 22px;
	}

	.hk-galeri-u .hk-ok-dugme {
		width: 36px;
		height: 36px;
	}

	.hk-galeri-u .hk-ok-dugme .hk-simge {
		width: 20px;
		height: 20px;
	}

	.hk-galeri-u .hk-proje-b:hover,
	.hk-galeri-u .hk-proje-b:focus-within {
		transform: none;
		box-shadow: none;
	}

	.hk-galeri-u__oge[data-acik="true"] .hk-galeri-u__kart {
		box-shadow: 0 0 0 3px var(--logo-mavisi);
	}

	.hk-galeri-u__ayrinti {
		order: var(--sira-m, 999);
		margin-top: calc(-1 * var(--bosluk-2));
		padding: var(--bosluk-5);
		border-radius: 0 0 var(--kose-orta) var(--kose-orta);
	}

	.hk-galeri-u__ad {
		font-size: 22px;
		line-height: 28px;
	}

	.hk-galeri-u__govde .hk-dugme-dizisi {
		display: grid;
		grid-template-columns: 1fr 1fr;
		width: 100%;
	}

	/* B */
	.hk-vitrin-u__ust {
		grid-template-columns: auto minmax(0, 1fr);
		row-gap: var(--bosluk-2);
	}

	.hk-vitrin-u__ust .hk-grup-h__sayi {
		grid-column: 2;
	}

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

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

	.hk-vitrin-u__ad {
		font-size: 22px;
		line-height: 28px;
	}

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

	.hk-vitrin-u__karo-ad {
		left: var(--bosluk-3);
		right: var(--bosluk-3);
		bottom: var(--bosluk-2);
		font-size: 13px;
		line-height: 17px;
	}

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

	/* C */
	.hk-gezgin-u__sekmeler {
		display: flex;
		gap: var(--bosluk-4);
		overflow-x: auto;
		scrollbar-width: none;
	}

	.hk-gezgin-u__sekme {
		flex: none;
		width: 148px;
	}

	.hk-gezgin-u__sekme-ad {
		font-size: 16px;
		line-height: 22px;
	}

	.hk-gezgin-u__oge {
		grid-template-columns: 64px minmax(0, 1fr) auto;
	}

	.hk-gezgin-u__kucuk {
		width: 64px;
	}

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

	.hk-gezgin-u__ad {
		font-size: 22px;
		line-height: 28px;
	}

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

	/* D: hat dikey; istasyonlar arasında dikey akış çizgisi */
	.hk-hat-u {
		padding-block: var(--bosluk-4) var(--bosluk-6);
		row-gap: var(--bosluk-4);
	}

	.hk-hat-u__hat,
	.hk-hat-u__bilgi {
		margin-bottom: var(--bosluk-4);
	}

	.hk-hat-u__bilgi-govde {
		padding: var(--bosluk-5);
	}

	.hk-hat-u__bilgi-ad {
		font-size: 24px;
		line-height: 30px;
	}

	.hk-hat-u__hat {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--bosluk-4);
	}

	.hk-hat-u__dugme {
		grid-template-columns: 120px minmax(0, 1fr);
		grid-template-rows: auto auto;
		column-gap: var(--bosluk-4);
		row-gap: 2px;
		align-items: center;
	}

	.hk-hat-u__cizim {
		grid-row: 1 / span 2;
	}

	.hk-hat-u__ad {
		align-self: end;
	}

	.hk-hat-u__grup {
		align-self: start;
	}

	.hk-hat-u__no {
		top: var(--bosluk-2);
		left: var(--bosluk-2);
	}

	.hk-hat-u__istasyon:nth-child(n)::before {
		display: block;
		top: auto;
		bottom: 100%;
		right: auto;
		left: 72px;
		width: 0;
		height: var(--bosluk-4);
		border-top: 0;
		border-left: var(--kenar-kalin) dashed var(--logo-mavisi);
	}

	.hk-hat-u__istasyon:nth-child(n)::after {
		display: none;
	}

	.hk-hat-u__istasyon:first-child::before {
		display: none;
	}
}

/* B: iki uygulamalı grupta karolar tek sütun, geniş (büyük kartla boy
   dengelensin) */
.hk-vitrin-u__govde--2 .hk-vitrin-u__karolar {
	grid-template-columns: minmax(0, 1fr);
}

.hk-vitrin-u__govde--2 .hk-vitrin-u__karo {
	aspect-ratio: 16 / 9;
}

@container (max-width: 599px) {

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

	.hk-vitrin-u__govde--2 .hk-vitrin-u__karo {
		aspect-ratio: 4 / 3;
	}
}

/* ---------- Rehber videolar (14 Ekim 2026) ---------- */

/* Giriş: öne çıkan üç video mozaikte; kutunun tamamı video sayfasına bağlantı,
   süre sağ üstte, konu ve başlık altta;
   "Öne çıkan videolar" etiketi mozaiğin sol üstünde */
.hk-mozaik-v__oge {
	display: block;
	color: var(--beyaz);
	text-decoration: none;
}

.hk-mozaik-v__oge::after {
	background: linear-gradient(to top, rgb(35 37 37 / 0.95) 0%, rgb(35 37 37 / 0.72) 34%, rgb(35 37 37 / 0) 68%);
}

.hk-mozaik-v .hk-mozaik-h__not {
	left: var(--bosluk-4);
	right: auto;
}

.hk-mozaik-v__oge .hk-oynat-v {
	top: 44%;
	width: 48px;
	height: 48px;
}

.hk-mozaik-v__oge:hover .hk-oynat-v,
.hk-mozaik-v__oge:focus-visible .hk-oynat-v {
	background: var(--beyaz);
	color: var(--koyu-mavi);
}

.hk-mozaik-v__oge .hk-video-a__sure {
	z-index: 1;
	right: var(--bosluk-3);
	top: var(--bosluk-3);
	left: auto;
	bottom: auto;
}

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

.hk-mozaik-v__metin {
	position: absolute;
	left: var(--bosluk-4);
	right: var(--bosluk-4);
	bottom: var(--bosluk-4);
	z-index: 1;
	display: grid;
	gap: 2px;
}

.hk-mozaik-v__konu {
	font-family: var(--font-sans);
	font-size: 12px;
	line-height: 16px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--logo-mavisi);
}

.hk-mozaik-v__ad {
	font-family: var(--font-sans);
	font-size: 17px;
	line-height: 22px;
	font-weight: 700;
	color: var(--beyaz);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* uzun karoda (ilk öne çıkan video) kare biraz daha büyük */
.hk-mozaik-h__oge--uzun .hk-oynat-v {
	width: 56px;
	height: 56px;
}

.hk-mozaik-h__oge--uzun .hk-oynat-v .hk-simge {
	width: 22px;
	height: 22px;
	margin-left: 3px;
}

/* Videolar (Beest önerisi, 14 Ekim 2026): konular alt alta sıralanmaz. Kategori
   ve Tüm ürünler sayfalarındaki düzen
   (hk-liste-k: çizgili açık zemin, solda yapışkan sütun, sağda üç sütunlu
   kartlar): solda konu sekmeleri (sayılarıyla) ve
   marka onay kutuları, sağda seçili konunun paneli. Mobilde sekmeler yana
   kayan bir sıra. */
.hk-rehber-v__kutu {
	display: grid;
	gap: var(--bosluk-5);
	padding: var(--bosluk-5);
	border: var(--kenar-ince) solid var(--kontrol-kenari);
	border-radius: var(--kose-orta);
	background: var(--beyaz);
}

.hk-rehber-v__grup {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.hk-rehber-v__grup + .hk-rehber-v__grup {
	padding-top: var(--bosluk-5);
	border-top: var(--kenar-ince) solid var(--cizgi);
}

/* legend kayan öğe: fieldset kenarına oturmaz, iki grubun başlığı aynı
   görünür */
.hk-rehber-v__etiket {
	float: left;
	width: 100%;
	margin: 0 0 var(--bosluk-2);
	padding: 0;
	font-family: var(--font-sans);
	font-size: 13px;
	line-height: 16px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--metin-baslik);
}

.hk-rehber-v__grup .hk-secenekler-k {
	clear: both;
}

.hk-konular-v {
	clear: both;
	display: grid;
	gap: 2px;
	margin-inline: calc(-1 * var(--bosluk-3));
}

.hk-konular-v__sekme {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--bosluk-3);
	min-height: 44px;
	padding: var(--bosluk-2) var(--bosluk-3) var(--bosluk-2) 9px;
	border: 0;
	border-left: 3px solid transparent;
	border-radius: 0 var(--kose-kucuk) var(--kose-kucuk) 0;
	background: transparent;
	color: var(--metin-baslik);
	text-align: left;
	cursor: pointer;
	font-family: var(--font-sans);
	font-size: 15px;
	line-height: 22px;
	font-weight: 500;
	transition: background-color 120ms ease, border-color 120ms ease;
}

.hk-konular-v__sekme:hover {
	background: var(--cok-acik-gri);
}

.hk-konular-v__sekme[aria-selected="true"] {
	border-left-color: var(--logo-mavisi);
	background: color-mix(in srgb, var(--logo-mavisi) 10%, var(--beyaz));
	font-weight: 700;
}

.hk-konular-v__sekme:focus-visible {
	outline: var(--odak-kalinligi) solid var(--odak);
	outline-offset: -3px;
}

.hk-konular-v__sayi {
	font-family: var(--font-mono);
	font-size: 13px;
	line-height: 18px;
	font-weight: 400;
	color: var(--metin);
	font-variant-numeric: tabular-nums;
}

.hk-konular-v__sekme[aria-selected="true"] .hk-konular-v__sayi {
	color: var(--koyu-mavi);
	font-weight: 600;
}

/* seçili markada videosu olmayan konu soluk (seçilebilir; panelde boş sonuç
   görünür) */
.hk-konular-v__sekme[data-sayi="0"]:not([aria-selected="true"]) .hk-konular-v__ad {
	opacity: 0.55;
}

.hk-rehber-v__paneller,
.hk-rehber-v__panel {
	display: grid;
	gap: var(--bosluk-5);
	min-width: 0;
}

.hk-rehber-v__panel .hk-bolum-basligi {
	align-items: flex-end;
}

/* Konu panelindeki video kartları: kart bütün şablonlarda ortak, biçimi
   anasayfa-a.css'te (hk-video-v, hk-oynat-v) */
.hk-rehber-v__panel[hidden],
.hk-bos-v[hidden] {
	display: none;
}

.hk-videolar-v {
	margin: 0;
	padding: 0;
	list-style: none;
}

.hk-videolar-v > li {
	display: flex;
	min-width: 0;
}

.hk-videolar-v > li[hidden] {
	display: none;
}

.hk-videolar-v > li > .hk-video-v {
	flex: 1;
	min-width: 0;
}

.hk-bos-v {
	display: grid;
	justify-items: start;
	gap: var(--bosluk-3);
	padding: var(--bosluk-6);
	border: var(--kenar-ince) dashed var(--acik-gri);
	border-radius: var(--kose-orta);
	background: var(--beyaz);
}

.hk-bos-v .baslik-4,
.hk-bos-v .govde {
	margin: 0;
}

/* Kanal bandı: açık mavi kart; solda çağrı, sağda kanaldan dört kapak (süs) */
.hk-kanal-v__kart {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
	gap: var(--bosluk-8);
	align-items: center;
	padding: var(--bosluk-7);
	border: var(--kenar-ince) solid color-mix(in srgb, var(--logo-mavisi) 30%, var(--beyaz));
	border-radius: var(--kose-orta);
	background: color-mix(in srgb, var(--logo-mavisi) 7%, var(--beyaz));
}

.hk-kanal-v__metin {
	display: grid;
	gap: var(--bosluk-4);
	justify-items: start;
}

.hk-kanal-v__metin .baslik-1,
.hk-kanal-v__metin .govde-buyuk {
	margin: 0;
}

.hk-kanal-v__kapaklar {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--bosluk-3);
}

.hk-kanal-v__kapak {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--kose-kucuk);
	background: var(--grafit);
}

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

.hk-kanal-v__kapak .hk-oynat-v {
	width: 32px;
	height: 32px;
	box-shadow: 0 4px 10px rgb(0 110 158 / 0.3);
}

.hk-kanal-v__kapak .hk-oynat-v .hk-simge {
	width: 14px;
	height: 14px;
	margin-left: 1px;
}

@container (max-width: 959px) {

	/* sol sütun üste gelir: konu sekmeleri yana kayan sıra, marka kutuları yan
   yana */
	.hk-rehber-v__kutu {
		gap: var(--bosluk-4);
		padding: 0;
		border: 0;
		background: transparent;
	}

	.hk-rehber-v__grup + .hk-rehber-v__grup {
		padding-top: 0;
		border-top: 0;
	}

	.hk-konular-v {
		display: flex;
		gap: var(--bosluk-2);
		margin-inline: calc(-1 * var(--sayfa-kenari));
		padding: 2px var(--sayfa-kenari) 4px;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.hk-konular-v::-webkit-scrollbar {
		display: none;
	}

	.hk-konular-v__sekme {
		flex: none;
		gap: var(--bosluk-2);
		min-height: 40px;
		padding: 6px var(--bosluk-3);
		border: var(--kenar-ince) solid var(--acik-gri);
		border-radius: var(--kose-kucuk);
		background: var(--beyaz);
		font-size: 14px;
	}

	.hk-konular-v__sekme[aria-selected="true"] {
		border-color: var(--grafit);
		background: var(--grafit);
		color: var(--beyaz);
	}

	.hk-konular-v__sekme[aria-selected="true"] .hk-konular-v__sayi {
		color: var(--acik-gri);
	}

	.hk-rehber-v__grup .hk-secenekler-k {
		display: flex;
		flex-wrap: wrap;
		column-gap: var(--bosluk-5);
	}

	.hk-rehber-v__grup .hk-secenek-k {
		grid-template-columns: 18px auto auto;
		gap: var(--bosluk-2);
	}

	.hk-kanal-v__kart {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--bosluk-6);
		padding: var(--bosluk-6);
	}
}

@container (max-width: 599px) {

	.hk-mozaik-v__oge .hk-oynat-v,
	.hk-mozaik-h__oge--uzun .hk-oynat-v {
		width: 36px;
		height: 36px;
	}

	.hk-mozaik-v__oge .hk-oynat-v .hk-simge,
	.hk-mozaik-h__oge--uzun .hk-oynat-v .hk-simge {
		width: 15px;
		height: 15px;
		margin-left: 2px;
	}

	/* konu sekmeleri: telefonda sayfa kenarı 16px; sıra kenardan kenara kayar */
	.hk-konular-v {
		margin-inline: calc(-1 * var(--sayfa-kenari-mobil));
		padding-inline: var(--sayfa-kenari-mobil);
	}

	.hk-mozaik-v__oge .hk-video-a__sure {
		right: var(--bosluk-2);
		top: var(--bosluk-2);
		font-size: 11px;
		line-height: 16px;
		padding: 1px 6px;
	}

	.hk-mozaik-v .hk-mozaik-h__not {
		display: none;
	}  /* dar mozaikte süreyle çakışır; üç video zaten öne çıkan olarak okunur */
	.hk-mozaik-v__metin {
		left: var(--bosluk-3);
		right: var(--bosluk-3);
		bottom: var(--bosluk-3);
	}

	.hk-mozaik-v__konu {
		font-size: 10px;
		line-height: 14px;
	}

	.hk-mozaik-v__ad {
		font-size: 13px;
		line-height: 17px;
	}

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

	.hk-kanal-v__metin .hk-dugme-dizisi {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		width: 100%;
	}
}

/* ---------- Hakkımızda (14 Ekim 2026) ---------- */

/* Bilgilerin hepsi eski siteden (Beest kararı, 14 Ekim 2026). Giriş: solda
   Hikayemiz, sağda misyondaki yedi sektörün
   çizimi: ortada PLC (danışmanlık ve otomasyon), elips üzerinde sektörler,
   aralarında akan kesikli bağlar. Sektör adları
   HTML metni; yerleri satır içi yüzde. Mobilde aynı düzen küçülür (görsel
   metnin üstünde). */
.hk-giris-hm .hk-giris__ic {
	grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
	column-gap: var(--bosluk-8);
}

.hk-sektorler-hm {
	position: relative;
	height: 540px;
	margin: 0;
}

.hk-sektorler-hm__baslik {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: var(--bosluk-2);
	padding: 4px var(--bosluk-3);
	border: var(--kenar-ince) solid rgb(197 198 198 / 0.22);
	border-radius: 999px;
	background: rgb(35 37 37 / 0.85);
	font-family: var(--font-sans);
	font-size: 12px;
	line-height: 16px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--metin);
}

.hk-sektorler-hm__baslik::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--logo-mavisi);
	box-shadow: 0 0 0 3px rgb(0 158 227 / 0.25);
}

.hk-sektorler-hm__baglar {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.hk-sektorler-hm__baglar line {
	stroke: var(--logo-mavisi);
	stroke-opacity: 0.6;
	stroke-width: 1.5;
	stroke-dasharray: 4 8;
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
	animation: hk-akis-hm 1.4s linear infinite;
}

@keyframes hk-akis-hm {

	to {
		stroke-dashoffset: -24;
	}
}

.hk-sektorler-hm__merkez {
	position: absolute;
	z-index: 1;
	display: grid;
	justify-items: center;
	gap: var(--bosluk-2);
	width: 184px;
	transform: translate(-50%, -50%);
	padding: var(--bosluk-3) var(--bosluk-4) var(--bosluk-3);
	border: var(--kenar-ince) solid rgb(197 198 198 / 0.35);
	border-radius: var(--kose-orta);
	background: var(--grafit);
	box-shadow: 0 0 0 10px rgb(35 37 37 / 0.75);
}

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

.hk-sektorler-hm__merkez > span {
	font-family: var(--font-sans);
	font-size: 12px;
	line-height: 16px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--logo-mavisi);
	text-align: center;
}

.hk-sektorler-hm .hk-led {
	animation: hk-yanip 1.8s ease-in-out infinite;
}

.hk-sektorler-hm .hk-led:nth-of-type(3n) {
	animation-delay: 0.6s;
}

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

.hk-sektorler-hm__liste {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.hk-sektor-hm {
	position: absolute;
	display: grid;
	justify-items: center;
	gap: var(--bosluk-2);
	width: 150px;
	transform: translate(-50%, -26px);
	text-align: center;
}

.hk-sektor-hm__simge {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border: var(--kenar-ince) solid rgb(197 198 198 / 0.4);
	border-radius: var(--kose-daire);
	background: var(--grafit);
	color: var(--logo-mavisi);
	box-shadow: 0 0 0 6px rgb(35 37 37 / 0.8);
}

.hk-sektor-hm__simge .hk-simge {
	width: 24px;
	height: 24px;
	stroke-width: 1.75;
}

.hk-sektor-hm__ad {
	font-family: var(--font-sans);
	font-size: 14px;
	line-height: 18px;
	font-weight: 600;
	color: var(--metin-baslik);
}

/* Misyon ve vizyon: eski sitedeki iki metin; beyaz ve logo mavisi kart,
   numara rozetli */
.hk-mv-hm {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--bosluk-5);
}

.hk-mv-hm__kart {
	display: grid;
	align-content: start;
	justify-items: start;
	gap: var(--bosluk-4);
	padding: var(--bosluk-7);
	border: var(--kenar-ince) solid var(--cizgi);
	border-radius: var(--kose-orta);
	background: var(--beyaz);
}

.hk-mv-hm__kart--mavi {
	border-color: var(--logo-mavisi);
	background: var(--logo-mavisi);
	--metin-baslik: var(--grafit);
	--metin: var(--grafit);
}

.hk-mv-hm__no {
	display: inline-grid;
	place-items: center;
	min-width: 52px;
	height: 36px;
	padding: 0 var(--bosluk-2);
	border-radius: var(--kose-kucuk);
	background: var(--logo-mavisi);
	color: var(--grafit);
	font-family: var(--font-mono);
	font-size: 16px;
	line-height: 1;
}

.hk-mv-hm__kart--mavi .hk-mv-hm__no {
	background: var(--grafit);
	color: var(--logo-mavisi);
}

.hk-mv-hm__baslik {
	font-family: var(--font-sans);
	font-size: 36px;
	line-height: 42px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--metin-baslik);
}

.hk-mv-hm__metin {
	max-width: 560px;
	font-family: var(--font-sans);
	font-size: 22px;
	line-height: 34px;
	font-weight: 500;
	color: var(--metin-baslik);
}

/* Konum: adres kartı haritanın boyunca; Yol tarifi kartın altında (çalışma
   saatleri ve ulaşım notu eski sitede yok) */
.hk-konum-hm .hk-konum-i__bilgi {
	grid-template-rows: minmax(0, 1fr);
	align-content: stretch;
}

.hk-konum-hm .hk-konum-i__kart {
	grid-template-rows: auto auto minmax(0, 1fr);
}

.hk-konum-hm .hk-konum-i__kart .hk-dugme {
	align-self: end;
}

.hk-sayfa-hm #konum {
	scroll-margin-top: 152px;
}

@container (max-width: 1199px) {

	.hk-giris-hm .hk-giris__ic {
		grid-template-columns: minmax(0, 1fr) minmax(0, 500px);
		column-gap: var(--bosluk-7);
	}

	.hk-mv-hm__kart {
		padding: var(--bosluk-6);
	}

	.hk-mv-hm__metin {
		font-size: 20px;
		line-height: 32px;
	}
}

@container (max-width: 959px) {

	.hk-giris-hm .hk-giris__ic {
		grid-template-columns: minmax(0, 1fr);
	}

	.hk-sektorler-hm {
		height: 500px;
	}

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

	.hk-konum-hm .hk-konum-i__kart {
		grid-template-rows: none;
	}
}

@container (max-width: 599px) {

	.hk-sektorler-hm {
		height: 390px;
	}

	.hk-sektorler-hm__baslik {
		font-size: 11px;
		padding: 3px var(--bosluk-2);
	}

	.hk-sektorler-hm__merkez {
		width: 122px;
		gap: 4px;
		padding: var(--bosluk-2);
		box-shadow: 0 0 0 6px rgb(35 37 37 / 0.75);
	}

	.hk-sektorler-hm__merkez > span {
		font-size: 10px;
		line-height: 13px;
		letter-spacing: 0.04em;
	}

	.hk-sektor-hm {
		width: 96px;
		gap: 4px;
		transform: translate(-50%, -20px);
	}

	.hk-sektor-hm__simge {
		width: 40px;
		height: 40px;
		box-shadow: 0 0 0 4px rgb(35 37 37 / 0.8);
	}

	.hk-sektor-hm__simge .hk-simge {
		width: 20px;
		height: 20px;
	}

	.hk-sektor-hm__ad {
		font-size: 12px;
		line-height: 15px;
	}

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

	.hk-mv-hm__kart {
		gap: var(--bosluk-3);
		padding: var(--bosluk-5) var(--bosluk-4);
	}

	.hk-mv-hm__no {
		min-width: 44px;
		height: 32px;
		font-size: 14px;
	}

	.hk-mv-hm__baslik {
		font-size: 28px;
		line-height: 34px;
	}

	.hk-mv-hm__metin {
		font-size: 18px;
		line-height: 28px;
	}
}

/* ---------- Site içi arama (14 Ekim 2026) ---------- */

/* Başlık alanı (koyu, kısa): sayfa yolu, H1 "Arama: [terim]" (terim logo
   mavisi), terimle dolu büyük arama kutusu; logo
   mavisi şeritte sonuç özeti ve türlere çapa çipleri. Görsel yok: sonuçlar
   ilk ekranda başlasın. */
.hk-giris-ar__ic {
	display: grid;
	gap: var(--bosluk-4);
	justify-items: start;
	padding-block: var(--bosluk-6) var(--bosluk-7);
}

.hk-giris-ar .hk-sayfa-yolu {
	margin-bottom: var(--bosluk-1);
}

.hk-giris-ar__baslik {
	margin: 0;
	max-width: 100%;
	font-family: var(--font-sans);
	font-size: 64px;
	line-height: 68px;
	font-weight: 700;
	letter-spacing: -0.03em;
	color: var(--metin-baslik);
	overflow-wrap: anywhere;
}

.hk-giris-ar__terim {
	white-space: normal;
}

.hk-giris-ar__form {
	width: min(760px, 100%);
	margin-top: var(--bosluk-2);
}

.hk-capalar-ar__ozet {
	margin: 0;
	text-transform: none;
	letter-spacing: 0;
	font-size: 16px;
	line-height: 24px;
	font-weight: 700;
}

/* Sonuçlar: solda türlere göre gruplar (ürünler önce), sağda yapışkan "Ürün
   kodunu gönderin" kartı */
.hk-sonuclar-ar__duzen {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: var(--bosluk-8);
	align-items: start;
}

.hk-sonuclar-ar__ana {
	display: grid;
	gap: var(--bosluk-8);
	min-width: 0;
}

.hk-sonuc-grubu {
	display: grid;
	gap: var(--bosluk-5);
	min-width: 0;
	scroll-margin-top: 168px;
}

.hk-sonuc-grubu__ust {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bosluk-3) var(--bosluk-5);
	flex-wrap: wrap;
}

.hk-sonuc-grubu__baslik {
	display: flex;
	align-items: center;
	gap: var(--bosluk-3);
	font-family: var(--font-sans);
	font-size: 32px;
	line-height: 40px;
	font-weight: 700;
	letter-spacing: -0.015em;
	color: var(--metin-baslik);
}

.hk-sonuc-grubu__sayi {
	display: inline-grid;
	place-items: center;
	min-width: 40px;
	height: 28px;
	padding: 0 var(--bosluk-2);
	border-radius: var(--kose-kucuk);
	background: var(--logo-mavisi);
	color: var(--grafit);
	font-family: var(--font-mono);
	font-size: 14px;
	line-height: 1;
	font-weight: 400;
	letter-spacing: 0;
}

.hk-sonuc-grubu__devam {
	justify-self: start;
}

.hk-sonuclar-ar__liste {
	max-width: none;
	border-top: var(--kenar-ince) solid var(--cizgi);
}

/* Sonuç satırı: görsel, kod ve marka, ad (bağlantı satırı kaplar), kısa
   tanım, seri; sağda Teklif iste */
.hk-sonuc-ar {
	grid-template-columns: 88px minmax(0, 1fr) auto;
	gap: var(--bosluk-5);
	align-items: center;
	padding: var(--bosluk-4) var(--bosluk-3) var(--bosluk-4) 0;
	transition: background-color 150ms ease, padding-left 250ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.hk-sonuc-ar:has(.hk-kart__baglanti:hover) {
	padding-left: var(--bosluk-3);
	background: rgb(0 158 227 / 0.06);
}

.hk-sonuc-ar:has(.hk-kart__baglanti:hover) .hk-sonuc-ar__ad .hk-kart__baglanti {
	text-decoration: underline;
	text-underline-offset: 3px;
}

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

.hk-sonuc-ar__gorsel {
	position: relative;
	display: grid;
	place-items: center;
	width: 88px;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border: var(--kenar-ince) solid var(--cizgi);
	border-radius: var(--kose-kucuk);
	background: var(--beyaz);
	color: var(--metin);
}

.hk-sonuc-ar__gorsel > img {
	position: absolute;
	inset: 8%;
	width: 84%;
	height: 84%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.hk-sonuc-ar__metin {
	display: grid;
	gap: 4px;
	min-width: 0;
}

.hk-sonuc-ar__ad {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 18px;
	line-height: 26px;
	font-weight: 600;
	color: var(--metin-baslik);
}

.hk-sonuc-ar__kisa {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: var(--metin);
}

.hk-sonuc-ar__seri,
.hk-sonuc-ar__sayi {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 13px;
	line-height: 20px;
	color: var(--metin);
}

.hk-sonuc-ar mark,
.hk-sonuc-grubu__videolar mark {
	background: none;
	color: var(--metin-baslik);
	font-weight: 700;
}

.hk-sonuc-ar__eylem {
	position: relative;
	z-index: 1;
}

.hk-sonuc-ar__eylem .hk-dugme {
	white-space: nowrap;
}

.hk-sonuc-ar__eylem--ok .hk-ok-dugme {
	width: var(--kontrol-yuksekligi-kucuk);
	height: var(--kontrol-yuksekligi-kucuk);
}

.hk-sonuc-ar--kategori:has(.hk-kart__baglanti:hover) .hk-ok-dugme {
	background: var(--logo-mavisi);
}

/* Yan kart: koyu, yapışkan; sitede Ürün kodunu gönderin genel teklif
   modalını terim yazılı açar */
.hk-yardim-ar {
	position: sticky;
	top: 168px;
	display: grid;
	gap: var(--bosluk-4);
	justify-items: start;
	padding: var(--bosluk-6);
	border-radius: var(--kose-orta);
	background: var(--grafit);
	color: var(--metin);
	overflow: hidden;
	isolation: isolate;
}

.hk-yardim-ar::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);
	background-size: 40px 40px;
	background-position: -1px -1px;
	-webkit-mask-image: radial-gradient(90% 70% at 100% 0%, #000 0%, transparent 70%);
	mask-image: radial-gradient(90% 70% at 100% 0%, #000 0%, transparent 70%);
}

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

.hk-yardim-ar .hk-dugme-dizisi {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	width: 100%;
}

.hk-yardim-ar .hk-dugme-dizisi .hk-dugme--birincil {
	grid-column: 1 / -1;
}

.hk-yardim-ar .hk-kapanis__sure {
	margin: 0;
}

/* Sonuç yok: solda açıklama ve talep yolları, sağda forma taşınacak kod;
   altında ürün grupları */
.hk-bos-ar {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 380px;
	gap: var(--bosluk-7);
	align-items: center;
	padding: var(--bosluk-7);
	border: var(--kenar-ince) solid var(--cizgi);
	border-radius: var(--kose-orta);
	background: var(--beyaz);
}

.hk-bos-ar__metin {
	display: grid;
	gap: var(--bosluk-4);
	justify-items: start;
	min-width: 0;
}

.hk-bos-ar__baslik {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 36px;
	line-height: 44px;
	font-weight: 700;
	letter-spacing: -0.015em;
	color: var(--metin-baslik);
	overflow-wrap: anywhere;
}

.hk-bos-ar__metin .govde-buyuk {
	max-width: 620px;
}

.hk-bos-ar__metin .hk-kapanis__sure {
	margin: 0;
}

.hk-bos-ar__kod {
	display: grid;
	gap: var(--bosluk-2);
	padding: var(--bosluk-6);
	border: var(--kenar-kalin) dashed var(--logo-mavisi);
	border-radius: var(--kose-orta);
	background: color-mix(in srgb, var(--logo-mavisi) 6%, var(--beyaz));
}

.hk-bos-ar__kod-etiket {
	display: inline-flex;
	align-items: center;
	gap: var(--bosluk-2);
	font-family: var(--font-sans);
	font-size: 12px;
	line-height: 16px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--koyu-mavi);
}

.hk-bos-ar__kod-etiket .hk-simge {
	width: 16px;
	height: 16px;
}

.hk-bos-ar__kod-deger {
	font-family: var(--font-mono);
	font-size: 26px;
	line-height: 34px;
	color: var(--metin-baslik);
	overflow-wrap: anywhere;
}

.hk-bos-ar__kod-not {
	font-family: var(--font-sans);
	font-size: 14px;
	line-height: 22px;
	color: var(--metin);
}

.hk-gruplar-ar {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--bosluk-3);
}

.hk-grup-ar {
	position: relative;
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr) auto;
	gap: var(--bosluk-3);
	align-items: center;
	padding: var(--bosluk-3);
	border: var(--kenar-ince) solid var(--cizgi);
	border-radius: var(--kose-orta);
	background: var(--beyaz);
	transition: border-color 150ms ease, transform 250ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.hk-grup-ar__gorsel {
	position: relative;
	width: 64px;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: var(--kose-kucuk);
	background: var(--cok-acik-gri);
}

.hk-grup-ar__gorsel > img {
	position: absolute;
	inset: 8%;
	width: 84%;
	height: 84%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.hk-grup-ar__ad {
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 22px;
	font-weight: 600;
}

.hk-grup-ar__ok {
	color: var(--koyu-mavi);
}

.hk-grup-ar__ok .hk-simge {
	transition: transform 150ms ease;
}

.hk-grup-ar:has(.hk-kart__baglanti:hover) {
	border-color: var(--metin-baslik);
	transform: translateY(-2px);
}

.hk-grup-ar:has(.hk-kart__baglanti:hover) .hk-grup-ar__ok .hk-simge {
	transform: translateX(3px);
}

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

@container (max-width: 1199px) {

	.hk-sonuclar-ar__duzen {
		grid-template-columns: minmax(0, 1fr) 280px;
		gap: var(--bosluk-7);
	}

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

	.hk-bos-ar {
		grid-template-columns: minmax(0, 1fr) 320px;
	}
}

@container (max-width: 959px) {

	.hk-giris-ar__baslik {
		font-size: 48px;
		line-height: 54px;
	}

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

	.hk-yardim-ar {
		position: static;
	}

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

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

@container (max-width: 599px) {

	.hk-giris-ar__ic {
		gap: var(--bosluk-3);
		padding-block: var(--bosluk-4) var(--bosluk-6);
	}

	.hk-giris-ar__baslik {
		font-size: 34px;
		line-height: 40px;
		letter-spacing: -0.02em;
	}

	.hk-giris-ar__terim {
		display: block;
	}

	/* özet kendi satırında, çipler altında kenardan kenara kayar */
	.hk-capalar-ar {
		flex-wrap: wrap;
		row-gap: var(--bosluk-2);
	}

	.hk-capalar-ar__ozet {
		flex-basis: 100%;
		font-size: 14px;
		line-height: 20px;
	}

	.hk-capalar-ar ul {
		width: calc(100% + 2 * var(--sayfa-kenari-mobil));
		margin-inline: calc(-1 * var(--sayfa-kenari-mobil));
		padding-inline: var(--sayfa-kenari-mobil);
	}

	.hk-sonuclar-ar__ana {
		gap: var(--bosluk-7);
	}

	.hk-sonuc-grubu {
		gap: var(--bosluk-4);
	}

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

	.hk-sonuc-ar {
		grid-template-columns: 64px minmax(0, 1fr);
		gap: var(--bosluk-2) var(--bosluk-3);
		align-items: start;
		padding-right: 0;
	}

	.hk-sonuc-ar:has(.hk-kart__baglanti:hover) {
		padding-left: 0;
		background: transparent;
	}

	.hk-sonuc-ar__gorsel {
		width: 64px;
	}

	.hk-sonuc-ar__ad {
		font-size: 16px;
		line-height: 22px;
	}

	.hk-sonuc-ar__eylem {
		grid-column: 2;
	}

	.hk-sonuc-ar__eylem--ok {
		display: none;
	}

	.hk-sonuc-grubu__devam {
		justify-self: stretch;
		justify-content: center;
	}

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

	.hk-yardim-ar__baslik {
		font-size: 22px;
		line-height: 28px;
	}

	.hk-bos-ar {
		gap: var(--bosluk-5);
		padding: var(--bosluk-5) var(--bosluk-4);
	}

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

	.hk-bos-ar__metin .hk-dugme-dizisi {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		width: 100%;
	}

	.hk-bos-ar__metin .hk-dugme-dizisi .hk-dugme--birincil {
		grid-column: 1 / -1;
	}

	.hk-bos-ar__kod {
		padding: var(--bosluk-4);
	}

	.hk-bos-ar__kod-deger {
		font-size: 20px;
		line-height: 28px;
	}

	.hk-gruplar-ar {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--bosluk-2);
	}

	.hk-grup-ar {
		grid-template-columns: 52px minmax(0, 1fr) auto;
	}

	.hk-grup-ar__gorsel {
		width: 52px;
	}
}

/* ---------- 404 sayfası (bulunamadı): koyu giriş ve kopuk bağlantı çizimi,
   ürün grupları, sayfalar, kırık bağlantıyı
   bildirin (Akışlar 8.4; 14 Ekim 2026). Sayfa yolu yok; ürün grupları
   Ürünler sayfasındaki kategori kartları. ---------- */
.hk-giris-bl .hk-giris__ic {
	align-items: center;
}

.hk-giris-bl__form {
	width: 100%;
}

.hk-giris-bl__ana .hk-simge {
	width: 20px;
	height: 20px;
}

.hk-giris-bl__ana:hover .hk-simge {
	transform: none;
}

.hk-cizim-bl .uyari {
	animation: hk-uyari-bl 2.6s ease-in-out infinite;
}

.hk-cizim-bl .kivilcim {
	stroke: var(--logo-mavisi);
	stroke-width: 2;
	stroke-linecap: round;
	animation: hk-yanip 1.1s ease-in-out infinite;
}

@keyframes hk-uyari-bl {

	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0.55;
	}
}

/* Sayfalar: üç bağlantı kartı (kartın tamamı bağlantı); altında kesik
   çizgili "Kırık bağlantıyı bildirin" kutusu */
.hk-sayfalar-bl {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--bosluk-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hk-sayfa-karti-bl {
	position: relative;
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr) auto;
	column-gap: var(--bosluk-4);
	row-gap: var(--bosluk-1);
	align-items: center;
	padding: var(--bosluk-5);
	border: var(--kenar-ince) solid var(--cizgi);
	border-radius: var(--kose-orta);
	background: var(--beyaz);
	transition: border-color 150ms ease, transform 250ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.hk-sayfa-karti-bl__simge {
	grid-row: 1 / span 2;
	align-self: start;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: var(--kose-daire);
	background: var(--grafit);
	color: var(--logo-mavisi);
}

.hk-sayfa-karti-bl__simge .hk-simge {
	width: 22px;
	height: 22px;
}

.hk-sayfa-karti-bl__ad {
	grid-column: 2;
	margin: 0;
	font-family: var(--font-sans);
	font-size: 20px;
	line-height: 28px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.hk-sayfa-karti-bl .govde {
	grid-column: 2;
	margin: 0;
}

.hk-sayfa-karti-bl__ok {
	grid-column: 3;
	grid-row: 1 / span 2;
	color: var(--koyu-mavi);
}

.hk-sayfa-karti-bl__ok .hk-simge {
	transition: transform 150ms ease;
}

.hk-sayfa-karti-bl:has(.hk-kart__baglanti:hover) {
	border-color: var(--metin-baslik);
	transform: translateY(-2px);
}

.hk-sayfa-karti-bl:has(.hk-kart__baglanti:hover) .hk-sayfa-karti-bl__ok .hk-simge {
	transform: translateX(3px);
}

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

.hk-bildir-bl {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr) auto auto;
	gap: var(--bosluk-5);
	align-items: center;
	padding: var(--bosluk-5) var(--bosluk-6);
	border: var(--kenar-kalin) dashed var(--logo-mavisi);
	border-radius: var(--kose-orta);
	background: color-mix(in srgb, var(--logo-mavisi) 6%, var(--beyaz));
}

.hk-bildir-bl__simge {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: var(--kose-daire);
	background: var(--beyaz);
	color: var(--koyu-mavi);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--logo-mavisi) 45%, transparent);
}

.hk-bildir-bl__simge .hk-simge {
	width: 22px;
	height: 22px;
}

.hk-bildir-bl__metin {
	display: grid;
	gap: var(--bosluk-1);
	min-width: 0;
}

.hk-bildir-bl__baslik {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 20px;
	line-height: 28px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--metin-baslik);
}

.hk-bildir-bl__metin .govde {
	margin: 0;
	max-width: 520px;
}

.hk-bildir-bl__konu {
	display: grid;
	gap: 2px;
	margin: 0;
	padding: var(--bosluk-2) var(--bosluk-3);
	border-radius: var(--kose-kucuk);
	background: var(--beyaz);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--logo-mavisi) 35%, transparent);
}

.hk-bildir-bl__konu-etiket {
	font-family: var(--font-sans);
	font-size: 12px;
	line-height: 16px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--koyu-mavi);
}

.hk-bildir-bl__konu-deger {
	font-family: var(--font-mono);
	font-size: 14px;
	line-height: 20px;
	color: var(--metin-baslik);
	white-space: nowrap;
}

.hk-bildir-bl .hk-dugme {
	white-space: nowrap;
}

@container (max-width: 1199px) {

	.hk-bildir-bl {
		grid-template-columns: 48px minmax(0, 1fr) auto;
		row-gap: var(--bosluk-4);
	}

	.hk-bildir-bl__simge {
		grid-row: 1 / span 2;
		align-self: start;
	}

	.hk-bildir-bl__konu {
		grid-column: 2;
		grid-row: 2;
		justify-self: start;
	}

	.hk-bildir-bl .hk-dugme {
		grid-column: 3;
		grid-row: 1 / span 2;
	}
}

@container (max-width: 959px) {

	.hk-sayfalar-bl {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--bosluk-3);
	}
}

@container (max-width: 599px) {

	.hk-sayfa-karti-bl {
		grid-template-columns: 44px minmax(0, 1fr) auto;
		column-gap: var(--bosluk-3);
		padding: var(--bosluk-4);
	}

	.hk-sayfa-karti-bl__simge {
		width: 44px;
		height: 44px;
	}

	.hk-sayfa-karti-bl__ad {
		font-size: 18px;
		line-height: 26px;
	}

	.hk-bildir-bl {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--bosluk-4);
		padding: var(--bosluk-5) var(--bosluk-4);
	}

	.hk-bildir-bl__simge,
	.hk-bildir-bl__konu,
	.hk-bildir-bl .hk-dugme {
		grid-column: auto;
		grid-row: auto;
	}

	.hk-bildir-bl__simge {
		width: 44px;
		height: 44px;
	}

	.hk-bildir-bl__konu {
		justify-self: stretch;
	}

	.hk-bildir-bl__konu-deger {
		white-space: normal;
		overflow-wrap: anywhere;
	}

	.hk-bildir-bl .hk-dugme {
		justify-self: stretch;
		justify-content: center;
	}
}

/* ---------- Yasal sayfalar (KVKK aydınlatma metni, çerez politikası): kısa
   koyu başlık alanı (sayfa yolu, H1, son
   güncelleme), solda yapışkan içindekiler, okunur genişlikte metin; çerez
   tablosu ve "Çerez tercihleri"; en sonda başvuru
   ve iletişim kartı. Kapanış bandı yok (Akışlar 8.5; 14 Ekim 2026). Metinler
   hukuk danışmanından (A10). ---------- */
.hk-giris-ys__ic {
	display: grid;
	gap: var(--bosluk-3);
	justify-items: start;
	padding-block: var(--bosluk-6) var(--bosluk-7);
}

.hk-giris-ys .hk-sayfa-yolu {
	margin-bottom: var(--bosluk-2);
}

.hk-giris-ys__baslik {
	margin: 0;
	max-width: 100%;
	font-family: var(--font-sans);
	font-size: 64px;
	line-height: 68px;
	font-weight: 700;
	letter-spacing: -0.03em;
	color: var(--metin-baslik);
	overflow-wrap: anywhere;
}

.hk-giris-ys__tarih {
	display: inline-flex;
	align-items: center;
	gap: var(--bosluk-2);
	margin: 0;
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 24px;
	color: var(--metin);
}

.hk-giris-ys__tarih .hk-simge {
	width: 18px;
	height: 18px;
	color: var(--logo-mavisi);
}

.hk-yasal-ys__duzen {
	display: grid;
	grid-template-columns: 300px minmax(0, var(--icerik-genisligi));
	column-gap: var(--bosluk-9);
	align-items: start;
}

.hk-icindekiler-ys {
	position: sticky;
	top: 168px;
	max-width: none;
	padding: var(--bosluk-5);
	background: var(--zemin-ikincil);
	border-color: transparent;
}

.hk-icindekiler-ys .hk-icindekiler__baslik {
	font-size: 13px;
	line-height: 16px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--metin-baslik);
}

.hk-icindekiler-ys .hk-icindekiler__liste {
	gap: var(--bosluk-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hk-icindekiler-ys .hk-icindekiler__liste li {
	font-size: 15px;
	line-height: 22px;
}

.hk-icindekiler-ys .hk-icindekiler__liste li::before {
	color: var(--koyu-mavi);
	font-weight: 600;
}

.hk-icerik-ys h2,
.hk-icerik-ys h3 {
	scroll-margin-top: 168px;
}

.hk-icerik-ys > h2:first-child {
	margin-top: 0;
}

.hk-tablo-ys {
	border: var(--kenar-ince) solid var(--cizgi);
	border-radius: var(--kose-orta);
}

.hk-tablo-ys table {
	min-width: 640px;
	font-size: 15px;
	line-height: 22px;
}

.hk-tablo-ys caption {
	padding: var(--bosluk-3);
	text-align: left;
	font-weight: 600;
	color: var(--metin-baslik);
	border-bottom: var(--kenar-ince) solid var(--cizgi);
}

.hk-tablo-ys tbody tr:last-child td {
	border-bottom: 0;
}

.hk-tercih-kap-ys {
	position: relative;
}

.hk-tercih-ys {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--bosluk-4) var(--bosluk-5);
	align-items: center;
	padding: var(--bosluk-5);
	border-radius: var(--kose-orta);
	background: var(--grafit);
	color: var(--beyaz);
}

.hk-icerik .hk-tercih-ys p {
	margin: 0;
	font-size: 17px;
	line-height: 26px;
	color: var(--beyaz);
}

.hk-tercih-ys .hk-dugme {
	white-space: nowrap;
}

/* tuvalde bant düğmenin altında, içeriğin üstünde açılır; sitede sayfanın
   altında sabit (sayfa kaymaz) */
.hk-icerik .hk-cerez-ys {
	position: absolute;
	top: calc(100% + var(--bosluk-3));
	bottom: auto;
	left: 0;
	right: 0;
	z-index: 5;
	margin: 0;
	border: var(--kenar-ince) solid var(--cizgi);
	border-radius: var(--kose-orta);
	box-shadow: var(--golge-yuzen);
}

.hk-cerez-ys .hk-cerez__ic {
	grid-template-columns: 1fr;
	padding: var(--bosluk-5);
}

.hk-cerez-ys .hk-cerez__panel .baslik-4 {
	margin: 0;
}

.hk-basvuru-ys {
	display: grid;
	gap: var(--bosluk-3);
	margin-top: var(--bosluk-8);
	padding: var(--bosluk-6);
	border-radius: var(--kose-orta);
	background: var(--zemin-ikincil);
}

.hk-icerik .hk-basvuru-ys > * {
	margin: 0;
}

.hk-icerik .hk-basvuru-ys h2 {
	font-size: 26px;
	line-height: 34px;
}

.hk-icerik .hk-basvuru-ys__liste {
	display: grid;
	gap: var(--bosluk-2);
	margin-top: var(--bosluk-2);
	padding: 0;
	list-style: none;
}

.hk-icerik .hk-basvuru-ys__liste li {
	display: flex;
	align-items: flex-start;
	gap: var(--bosluk-3);
	margin: 0;
	color: var(--metin-baslik);
}

.hk-basvuru-ys__liste .hk-simge {
	flex: none;
	width: 20px;
	height: 20px;
	margin-top: 3px;
	color: var(--koyu-mavi);
}

@container (max-width: 1199px) {

	.hk-yasal-ys__duzen {
		grid-template-columns: 260px minmax(0, 1fr);
		column-gap: var(--bosluk-7);
	}
}

@container (max-width: 959px) {

	.hk-yasal-ys__duzen {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--bosluk-7);
	}

	.hk-icindekiler-ys {
		position: static;
		max-width: var(--icerik-genisligi);
	}

	.hk-giris-ys__baslik {
		font-size: 48px;
		line-height: 54px;
	}
}

@container (max-width: 599px) {

	.hk-giris-ys__ic {
		padding-block: var(--bosluk-4) var(--bosluk-6);
	}

	.hk-giris-ys__baslik {
		font-size: 34px;
		line-height: 40px;
		letter-spacing: -0.02em;
	}

	.hk-yasal-ys__duzen {
		row-gap: var(--bosluk-6);
	}

	.hk-icindekiler-ys {
		padding: var(--bosluk-4);
	}

	.hk-tercih-ys {
		grid-template-columns: minmax(0, 1fr);
		padding: var(--bosluk-5) var(--bosluk-4);
	}

	.hk-tercih-ys .hk-dugme {
		justify-self: stretch;
		justify-content: center;
	}

	.hk-cerez-ys .hk-cerez__ic {
		padding: var(--bosluk-4);
	}

	.hk-basvuru-ys {
		margin-top: var(--bosluk-7);
		padding: var(--bosluk-5) var(--bosluk-4);
	}
}

/* ---------- Blog ve blog yazısı (Akışlar 7.3, 7.4; 14 Ekim 2026). Kısa koyu
   başlık alanı, içindekiler ve metin düzeni yasal
   sayfalarla ortak (hk-giris-ys, hk-yasal-ys__duzen, hk-icindekiler-ys,
   hk-icerik-ys). Yazı görselleri tuvaldeki çizimler. ---------- */
.hk-giris-bg__ozet {
	margin: 0;
	max-width: 720px;
	color: var(--metin);
}

.hk-yazi-bilgi-bg {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bosluk-2) var(--bosluk-5);
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--font-sans);
	font-size: 15px;
	line-height: 22px;
	color: var(--metin);
}

.hk-yazi-bilgi-bg li {
	display: inline-flex;
	align-items: center;
	gap: var(--bosluk-2);
}

.hk-yazi-bilgi-bg .hk-simge {
	width: 18px;
	height: 18px;
	color: var(--logo-mavisi);
}

.hk-yazi-bilgi-bg strong {
	font-weight: 600;
	color: var(--metin-baslik);
}

/* öne çıkan yazı: solda koyu çizim, sağda metin; kartın tamamı yazıya gider */
.hk-one-cikan-bg {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	overflow: hidden;
	border: var(--kenar-ince) solid var(--cizgi);
	border-radius: var(--kose-orta);
	background: var(--beyaz);
	transition: border-color 150ms ease;
}

.hk-one-cikan-bg__cizim {
	display: grid;
	place-items: center;
	min-height: 360px;
	padding: var(--bosluk-6);
	background-color: var(--grafit);
	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: 80px 80px, 80px 80px, 16px 16px, 16px 16px;
	background-position: -1px -1px;
}

.hk-one-cikan-bg__cizim > svg {
	display: block;
	width: 100%;
	max-width: 560px;
	height: auto;
}

.hk-one-cikan-bg__metin {
	display: grid;
	align-content: center;
	justify-items: start;
	gap: var(--bosluk-4);
	padding: var(--bosluk-7);
}

.hk-one-cikan-bg__metin .hk-ust-etiket {
	margin: 0;
}

.hk-one-cikan-bg__metin .govde-buyuk {
	margin: 0;
}

.hk-one-cikan-bg__baslik {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 40px;
	line-height: 48px;
	font-weight: 700;
	letter-spacing: -0.015em;
}

.hk-one-cikan-bg__baslik .hk-kart__baglanti {
	color: var(--metin-baslik);
	text-decoration: none;
}

.hk-one-cikan-bg__ok .hk-simge {
	transition: transform 150ms ease;
}

.hk-one-cikan-bg:has(.hk-kart__baglanti:hover) {
	border-color: var(--metin-baslik);
}

.hk-one-cikan-bg:has(.hk-kart__baglanti:hover) .hk-one-cikan-bg__ok .hk-simge {
	transform: translateX(3px);
}

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

/* yazı kartı: çizim 16:9, altta yuvarlak ok düğmesi */
.hk-yazi-karti-bg {
	position: relative;
}

.hk-yazi-karti-bg > .hk-cizim-alani {
	aspect-ratio: 16 / 9;
	border-bottom: var(--kenar-ince) solid var(--cizgi);
}

.hk-yazi-karti-bg .hk-kart__govde {
	gap: var(--bosluk-2);
}

.hk-yazi-karti-bg .hk-kart__govde .baslik-4,
.hk-yazi-karti-bg .hk-kart__govde p {
	margin: 0;
}

.hk-yazi-karti-bg__eylem {
	justify-content: flex-end;
}

.hk-yazi-karti__bilgi .hk-rozet {
	min-height: 24px;
}

.hk-sayfalama-bg {
	justify-self: center;
}

.hk-konular-bg {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--bosluk-3);
	padding-top: var(--bosluk-6);
	border-top: var(--kenar-ince) solid var(--cizgi);
}

.hk-konular-bg__baslik {
	margin: 0 var(--bosluk-2) 0 0;
	font-family: var(--font-sans);
	font-size: 13px;
	line-height: 16px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--metin-baslik);
}

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

/* yazı gövdesi: üç çizimli şekil */
.hk-icerik .hk-sekil-bg {
	display: grid;
	gap: var(--bosluk-3);
	margin-inline: 0;
}

.hk-sekil-bg__izgara {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--bosluk-3);
}

.hk-icerik .hk-sekil-bg__oge {
	display: grid;
	gap: var(--bosluk-2);
	margin: 0;
}

.hk-sekil-bg__oge .hk-cizim-alani {
	aspect-ratio: 4 / 3;
	border: var(--kenar-ince) solid var(--cizgi);
	border-radius: var(--kose-kucuk);
}

.hk-icerik .hk-sekil-bg__ad {
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
	color: var(--metin-baslik);
	text-align: center;
}

.hk-icerik .hk-kisa-yanit {
	margin-bottom: var(--bosluk-2);
	padding-left: var(--bosluk-5);
	border-left: var(--kenar-kalin) solid var(--logo-mavisi);
}

.hk-tablo-bg table {
	min-width: 0;
}

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

.hk-yazar-bg .hk-yazar {
	max-width: none;
}

.hk-yazar-bg .hk-yazar p {
	margin: 0;
}

.hk-yazar-bg .hk-gorsel-yeri {
	min-width: 0;
	padding: var(--bosluk-1);
	overflow: hidden;
	font-size: 12px;
	line-height: 16px;
	text-align: center;
}

@container (max-width: 1199px) {

	.hk-one-cikan-bg {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.hk-one-cikan-bg__metin {
		padding: var(--bosluk-6);
	}

	.hk-one-cikan-bg__baslik {
		font-size: 32px;
		line-height: 40px;
	}
}

@container (max-width: 959px) {

	.hk-one-cikan-bg {
		grid-template-columns: minmax(0, 1fr);
	}

	.hk-one-cikan-bg__cizim {
		min-height: 0;
		aspect-ratio: 16 / 9;
	}

	.hk-yazar-bg .hk-yasal-ys__duzen > div[aria-hidden] {
		display: none;
	}
}

@container (max-width: 599px) {

	.hk-one-cikan-bg__cizim {
		padding: var(--bosluk-4);
	}

	.hk-one-cikan-bg__metin {
		gap: var(--bosluk-3);
		padding: var(--bosluk-5) var(--bosluk-4);
	}

	.hk-one-cikan-bg__baslik {
		font-size: 26px;
		line-height: 32px;
	}

	.hk-sekil-bg__izgara {
		gap: var(--bosluk-2);
	}

	.hk-icerik .hk-kisa-yanit {
		padding-left: var(--bosluk-4);
	}

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

/* === MENÜ DENEMELERİ başı === */

/* =============================================================================
   Menü denemeleri (14 Ekim 2026): Ürünler ve Hizmetler açılır menü yönleri A,
   B, C ve mobil menüler.
   Paneller üst alanın içinde, menü satırının hemen altında (W3C APG disclosure
   navigation: düğmede aria-expanded ve
   aria-controls; role="menu" yok). Panolar 1440×900 ekran (sahne) ve 375
   genişlikte mobil.
   ========================================================================== */
.hk-menu-sahne {
	position: relative;
	overflow: hidden;
}

.hk-menu-sahne > main {
	position: relative;
}

.hk-menu-ortu {
	position: absolute;
	inset: 0;
	z-index: 5;
	background: rgb(17 18 18 / 0.62);
	cursor: pointer;
}

.hk-menu-ortu[hidden],
.hk-panel-ma[hidden],
.hk-panel-mb[hidden],
.hk-panel-mc[hidden],
.hk-onizleme-mc[hidden],
.hk-mobil-m[hidden],
.hk-mobil-m__alt[hidden],
.hk-katman-mc[hidden] {
	display: none;
}

.hk-menu-etiket {
	margin: 0;
	color: var(--metin);
	font-family: var(--font-sans);
	font-size: 13px;
	line-height: 16px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.hk-menu-no {
	display: inline-grid;
	place-items: center;
	flex: none;
	min-width: 28px;
	height: 20px;
	padding: 0 4px;
	margin-right: var(--bosluk-2);
	border-radius: var(--kose-kucuk);
	background: var(--logo-mavisi);
	color: var(--grafit);
	font-family: var(--font-mono);
	font-size: 12px;
	line-height: 1;
	font-weight: 400;
}

.hk-panel-ma,
.hk-panel-mb,
.hk-panel-mc {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: var(--katman-menu);
	text-align: left;
}

.hk-panel-ma ul,
.hk-panel-mb ul,
.hk-panel-mc ul,
.hk-mobil-m ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* menüdeki tek başına bağlantılar sayfadakilerle aynı boyda (16/26; 17 Ekim
   2026'ya kadar 15/22) */

/* ---------- A · açık liste paneli: üst alan açık temaya geçer, panel üst
   alanla tek yüzey ---------- */
.hk-panel-ma {
	background: var(--yuzey);
	color: var(--metin);
	box-shadow: 0 28px 48px rgb(17 18 18 / 0.22);
}

.hk-panel-ma__ic {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 280px;
	gap: var(--bosluk-7);
	padding-block: var(--bosluk-6) var(--bosluk-6);
}

.hk-panel-ma__ic--tek {
	grid-template-columns: minmax(0, 1fr);
}

.hk-panel-ma__ust {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bosluk-4);
	margin-bottom: var(--bosluk-4);
}

.hk-gruplar-ma {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--bosluk-3);
}

.hk-grup-ma {
	display: flex;
	flex-direction: column;
	gap: var(--bosluk-3);
	height: 100%;
	box-sizing: border-box;
	padding: var(--bosluk-3) var(--bosluk-4) var(--bosluk-4);
	border: var(--kenar-ince) solid var(--cizgi);
	border-radius: var(--kose-orta);
	color: var(--metin-baslik);
	text-decoration: none;
	transition: border-color 120ms ease, box-shadow 120ms ease;
}

.hk-grup-ma__cizim {
	display: block;
	height: 92px;
}

.hk-grup-ma__cizim svg,
.hk-mgrup-ma__cizim svg {
	display: block;
	width: 100%;
	height: 100%;
}

.hk-grup-ma__ad {
	font-size: 16px;
	line-height: 22px;
	font-weight: 600;
}

.hk-grup-ma:hover {
	border-color: var(--vurgu);
	box-shadow: 0 8px 20px rgb(35 37 37 / 0.08);
}

.hk-grup-ma:hover .hk-grup-ma__ad {
	color: var(--baglanti);
}

.hk-grup-ma[aria-current] {
	border-color: var(--vurgu);
	box-shadow: inset 0 -3px 0 var(--vurgu);
}

.hk-grup-ma[aria-current] .hk-grup-ma__ad {
	color: var(--baglanti);
}

.hk-panel-ma__yan {
	display: flex;
	flex-direction: column;
	gap: var(--bosluk-4);
	padding-left: var(--bosluk-6);
	border-left: var(--kenar-ince) solid var(--cizgi);
}

.hk-marka-ma {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bosluk-3);
	min-height: 40px;
	border-bottom: var(--kenar-ince) solid var(--cizgi);
	color: var(--metin-baslik);
	text-decoration: none;
	font-size: 14px;
	line-height: 20px;
}

.hk-markalar-ma > li:first-child .hk-marka-ma {
	border-top: var(--kenar-ince) solid var(--cizgi);
}

.hk-marka-ma__sayi,
.hk-marka-mb__sayi {
	font-family: var(--font-mono);
	font-size: 12px;
	line-height: 16px;
	color: var(--metin);
}

.hk-marka-ma__ad {
	font-weight: 600;
}

.hk-marka-ma:hover .hk-marka-ma__ad {
	color: var(--baglanti);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.hk-panel-ma__alt {
	background: var(--cok-acik-gri);
}

.hk-panel-ma__alt-ic {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bosluk-5);
	padding-block: var(--bosluk-3);
}

.hk-panel-ma__cagri,
.hk-kart-mb__cagri {
	margin: 0;
	font-size: 15px;
	line-height: 22px;
	color: var(--metin);
}

.hk-panel-ma__cagri strong,
.hk-kart-mb__cagri strong,
.hk-cagri-mb strong,
.hk-panel-mc__cagri strong {
	color: var(--metin-baslik);
}

.hk-panel-ma__eylem,
.hk-kart-mb__eylem,
.hk-panel-mc__eylem {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bosluk-2);
}

/* A · Hizmetler: grup sütunları; sütun sayısı grup sayısı kadar, yedi ve
   üstünde dörtlü ızgara (Beest kararı, 16 Ekim 2026: gruplar yönetim
   panelinden eklenip çıkarılır) */
.hk-hgruplar-ma {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: var(--bosluk-6);
}

.hk-hgruplar-ma:has(> :nth-child(7)) {
	grid-auto-flow: row;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.hk-hgrup-ma__baslik {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding-bottom: var(--bosluk-2);
	border-bottom: var(--kenar-kalin) solid var(--metin-baslik);
	color: var(--metin-baslik);
	text-decoration: none;
	font-size: 16px;
	line-height: 22px;
	font-weight: 700;
}

.hk-hgrup-ma__baslik:hover {
	color: var(--baglanti);
}

.hk-hgrup-ma__liste > li {
	border-bottom: var(--kenar-ince) solid var(--cizgi);
}

.hk-hizmet-ma {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding-block: var(--bosluk-2);
	color: var(--metin-baslik);
	text-decoration: none;
	font-size: 15px;
	line-height: 22px;
}

.hk-hizmet-ma:hover {
	color: var(--baglanti);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.hk-hizmet-ma[aria-current] {
	padding-left: var(--bosluk-3);
	box-shadow: inset 3px 0 0 var(--vurgu);
	color: var(--baglanti);
	font-weight: 600;
}

/* ---------- B · görselli yüzen kart: üst alan koyu kalır, kart menünün
   altında ---------- */
.hk-panel-mb {
	padding-top: var(--bosluk-3);
}

.hk-kart-mb {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 280px;
	gap: var(--bosluk-6);
	padding: var(--bosluk-5);
	border-radius: var(--kose-orta);
	background: var(--yuzey);
	color: var(--metin);
	box-shadow: 0 28px 64px rgb(0 0 0 / 0.5);
}

.hk-kart-mb--hizmet {
	grid-template-columns: minmax(0, 1fr);
}

.hk-kart-mb__ust {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bosluk-4);
	margin-bottom: var(--bosluk-4);
}

.hk-karolar-mb {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--bosluk-5) var(--bosluk-4);
}

.hk-karo-mb {
	display: grid;
	align-content: start;
	gap: var(--bosluk-2);
	color: var(--metin-baslik);
	text-decoration: none;
}

.hk-karo-mb__gorsel {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--kose-orta);
	background: var(--cok-acik-gri);
	box-shadow: inset 0 0 0 1px transparent;
	transition: box-shadow 120ms ease;
}

.hk-karo-mb__gorsel img,
.hk-onizleme-mc__gorsel img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 10% 12%;
	box-sizing: border-box;
	object-fit: contain;
	mix-blend-mode: multiply;
	transition: transform 200ms ease;
}

.hk-karo-mb__ad {
	font-size: 15px;
	line-height: 21px;
	font-weight: 600;
}

.hk-karo-mb:hover .hk-karo-mb__gorsel {
	box-shadow: inset 0 0 0 2px var(--vurgu);
}

.hk-karo-mb:hover .hk-karo-mb__gorsel img {
	transform: scale(1.04);
}

.hk-karo-mb:hover .hk-karo-mb__ad {
	color: var(--baglanti);
}

.hk-karo-mb[aria-current] .hk-karo-mb__gorsel {
	box-shadow: inset 0 0 0 2px var(--vurgu);
}

.hk-karo-mb[aria-current] .hk-karo-mb__ad {
	color: var(--baglanti);
}

.hk-kart-mb__yan {
	display: flex;
	flex-direction: column;
	gap: var(--bosluk-3);
	padding-left: var(--bosluk-5);
	border-left: var(--kenar-ince) solid var(--cizgi);
}

.hk-marka-mb {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bosluk-3);
	min-height: 38px;
	border-bottom: var(--kenar-ince) solid var(--cizgi);
	color: var(--metin);
	text-decoration: none;
}

.hk-markalar-mb > li:first-child .hk-marka-mb {
	border-top: var(--kenar-ince) solid var(--cizgi);
}

.hk-marka-mb__logo {
	display: flex;
	align-items: center;
	height: 24px;
	max-width: 128px;
	overflow: hidden;
}

.hk-marka-mb:hover .hk-marka-mb__sayi {
	color: var(--baglanti);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.hk-cagri-mb {
	display: grid;
	gap: var(--bosluk-3);
	margin-top: auto;
	padding: var(--bosluk-4);
	border-radius: var(--kose-orta);
	background: var(--cok-acik-gri);
}

.hk-cagri-mb p {
	margin: 0;
	font-size: 14px;
	line-height: 21px;
	color: var(--metin);
}

/* B · Hizmetler: grup fotoğraflı kartlar (fotoğraflar Hizmetler sayfasındaki
   örnekler) */
.hk-hgruplar-mb {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--bosluk-5);
}

.hk-hgrup-mb__baslik {
	display: grid;
	gap: var(--bosluk-3);
	color: var(--metin-baslik);
	text-decoration: none;
}

.hk-hgrup-mb__gorsel,
.hk-mhgrup-mb__gorsel {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--kose-orta);
	background: var(--grafit);
}

.hk-hgrup-mb__gorsel {
	aspect-ratio: 3 / 2;
}

.hk-hgrup-mb__gorsel img,
.hk-mhgrup-mb__gorsel img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 200ms ease;
}

.hk-hgrup-mb__baslik:hover img {
	transform: scale(1.04);
}

.hk-hgrup-mb__baslik:hover .hk-hgrup-mb__ad {
	color: var(--baglanti);
}

.hk-hgrup-mb__ad {
	display: flex;
	align-items: center;
	font-size: 16px;
	line-height: 22px;
	font-weight: 700;
}

.hk-hgrup-mb__liste {
	display: grid;
	margin-top: var(--bosluk-2);
}

.hk-hizmet-mb {
	display: block;
	padding-block: 7px;
	color: var(--metin);
	text-decoration: none;
	font-size: 14px;
	line-height: 20px;
}

.hk-hizmet-mb:hover {
	color: var(--baglanti);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.hk-hizmet-mb[aria-current] {
	padding-left: var(--bosluk-2);
	box-shadow: inset 3px 0 0 var(--vurgu);
	color: var(--baglanti);
	font-weight: 600;
}

.hk-kart-mb__alt {
	display: flex;
	align-items: center;
	gap: var(--bosluk-5);
	margin-top: var(--bosluk-5);
	padding-top: var(--bosluk-4);
	border-top: var(--kenar-ince) solid var(--cizgi);
}

.hk-kart-mb__cagri {
	flex: 1;
}

.hk-kart-mb__not,
.hk-mobil-m__not {
	margin: 0;
	color: var(--metin);
	font-size: 12px;
	line-height: 16px;
}

/* ---------- C · koyu iki bölmeli gezgin: solda gruplar, sağda üzerine
   gelinen grup ---------- */
.hk-panel-mc {
	background: var(--grafit);
	color: var(--metin);
	border-block: var(--kenar-ince) solid var(--cizgi);
	box-shadow: 0 28px 48px rgb(0 0 0 / 0.5);
}

.hk-panel-mc__ic {
	display: grid;
	grid-template-columns: 336px minmax(0, 1fr);
	min-height: 456px;
}

.hk-panel-mc__sol {
	display: flex;
	flex-direction: column;
	gap: var(--bosluk-3);
	padding: var(--bosluk-5) var(--bosluk-5) var(--bosluk-5) 0;
	border-right: var(--kenar-ince) solid var(--cizgi);
}

.hk-satirlar-mc {
	display: grid;
	gap: 2px;
}

.hk-satir-mc {
	position: relative;
	display: grid;
	grid-template-columns: 30px minmax(0, 1fr) auto auto;
	align-items: center;
	gap: var(--bosluk-2);
	width: 100%;
	box-sizing: border-box;
	min-height: 44px;
	padding: 0 var(--bosluk-3);
	border: 0;
	border-radius: var(--kose-kucuk);
	background: none;
	color: var(--metin-baslik);
	text-align: left;
	text-decoration: none;
	font-family: var(--font-sans);
	font-size: 15px;
	line-height: 20px;
	font-weight: 600;
	cursor: pointer;
}

.hk-satir-mc__no,
.hk-satir-mc__sayi {
	font-family: var(--font-mono);
	font-size: 12px;
	line-height: 16px;
	font-weight: 400;
	color: var(--metin);
}

.hk-satir-mc > .hk-simge {
	width: 16px;
	height: 16px;
	color: var(--metin);
}

.hk-satir-mc:hover {
	background: rgb(255 255 255 / 0.06);
}

/* bulunulan grup (sayfanın kendisi ya da alt sayfası): numara ve ad mavi */
.hk-satir-mc[aria-current] .hk-satir-mc__no,
.hk-satir-mc[aria-current] .hk-satir-mc__ad {
	color: var(--vurgu);
}

.hk-satirlar-mc[data-secili="1"] > li:nth-child(1) > .hk-satir-mc,
.hk-satirlar-mc[data-secili="2"] > li:nth-child(2) > .hk-satir-mc,
.hk-satirlar-mc[data-secili="3"] > li:nth-child(3) > .hk-satir-mc,
.hk-satirlar-mc[data-secili="4"] > li:nth-child(4) > .hk-satir-mc,
.hk-satirlar-mc[data-secili="5"] > li:nth-child(5) > .hk-satir-mc,
.hk-satirlar-mc[data-secili="6"] > li:nth-child(6) > .hk-satir-mc,
.hk-satirlar-mc[data-secili="7"] > li:nth-child(7) > .hk-satir-mc,
.hk-satirlar-mc[data-secili="8"] > li:nth-child(8) > .hk-satir-mc {
	background: rgb(255 255 255 / 0.09);
	box-shadow: inset 3px 0 0 var(--vurgu);
}

.hk-satirlar-mc[data-secili="1"] > li:nth-child(1) > .hk-satir-mc > .hk-simge,
.hk-satirlar-mc[data-secili="2"] > li:nth-child(2) > .hk-satir-mc > .hk-simge,
.hk-satirlar-mc[data-secili="3"] > li:nth-child(3) > .hk-satir-mc > .hk-simge,
.hk-satirlar-mc[data-secili="4"] > li:nth-child(4) > .hk-satir-mc > .hk-simge,
.hk-satirlar-mc[data-secili="5"] > li:nth-child(5) > .hk-satir-mc > .hk-simge,
.hk-satirlar-mc[data-secili="6"] > li:nth-child(6) > .hk-satir-mc > .hk-simge,
.hk-satirlar-mc[data-secili="7"] > li:nth-child(7) > .hk-satir-mc > .hk-simge,
.hk-satirlar-mc[data-secili="8"] > li:nth-child(8) > .hk-satir-mc > .hk-simge {
	color: var(--vurgu);
}

.hk-panel-mc__tumu {
	display: grid;
	justify-items: start;
	gap: var(--bosluk-2);
	padding: var(--bosluk-3) var(--bosluk-3) 0;
	border-top: var(--kenar-ince) solid var(--cizgi);
}

.hk-panel-mc__cagri {
	display: grid;
	gap: var(--bosluk-3);
	margin-top: auto;
	padding: var(--bosluk-4);
	border: var(--kenar-ince) solid var(--cizgi);
	border-radius: var(--kose-orta);
}

.hk-panel-mc__cagri p {
	margin: 0;
	font-size: 14px;
	line-height: 21px;
}

.hk-panel-mc__sag {
	padding: var(--bosluk-5) 0 var(--bosluk-5) var(--bosluk-7);
}

.hk-onizleme-mc {
	display: grid;
	grid-template-columns: 320px minmax(0, 1fr);
	gap: var(--bosluk-6);
	align-items: start;
}

.hk-onizleme-mc__gorsel {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--kose-orta);
	background: var(--cok-acik-gri);
}

.hk-onizleme-mc__metin {
	display: grid;
	gap: var(--bosluk-3);
	align-content: start;
}

.hk-onizleme-mc__ad {
	display: flex;
	align-items: center;
	margin: 0;
	color: var(--metin-baslik);
	font-size: 28px;
	line-height: 36px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.hk-onizleme-mc__ozet,
.hk-onizleme-mc__bos,
.hk-onizleme-mc__markalar {
	margin: 0;
	font-size: 15px;
	line-height: 24px;
	color: var(--metin);
}

.hk-onizleme-mc__ozet {
	margin-bottom: var(--bosluk-2);
	font-size: 16px;
	line-height: 26px;
}

.hk-onizleme-mc__markalar span {
	margin-right: var(--bosluk-2);
	color: var(--metin-baslik);
	font-weight: 600;
}

.hk-seriler-mc {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bosluk-2);
}

.hk-seri-mc {
	display: inline-flex;
	align-items: center;
	gap: var(--bosluk-2);
	min-height: 36px;
	padding: 0 var(--bosluk-3);
	border: var(--kenar-ince) solid var(--cizgi);
	border-radius: var(--kose-kucuk);
	color: var(--metin-baslik);
	text-decoration: none;
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
}

.hk-seri-mc__sayi {
	font-family: var(--font-mono);
	font-size: 12px;
	line-height: 16px;
	font-weight: 400;
	color: var(--metin);
}

.hk-seri-mc:hover {
	border-color: var(--vurgu);
}

.hk-onizleme-mc__eylem {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bosluk-2);
	margin-top: var(--bosluk-3);
}

.hk-onizleme-mc--hizmet {
	display: block;
}

.hk-onizleme-mc__ust {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bosluk-4);
	margin-bottom: var(--bosluk-5);
}

.hk-onizleme-mc__ust .hk-onizleme-mc__ad {
	font-size: 24px;
	line-height: 32px;
}

.hk-hizmetler-mc {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--bosluk-3);
}

.hk-hizmet-mc {
	position: relative;
	display: grid;
	align-content: start;
	gap: var(--bosluk-1);
	height: 100%;
	box-sizing: border-box;
	padding: var(--bosluk-4) 48px var(--bosluk-4) var(--bosluk-4);
	border: var(--kenar-ince) solid var(--cizgi);
	border-radius: var(--kose-orta);
	color: var(--metin);
	text-decoration: none;
	transition: border-color 120ms ease, background-color 120ms ease;
}

.hk-hizmet-mc__ad {
	color: var(--metin-baslik);
	font-size: 16px;
	line-height: 22px;
	font-weight: 600;
}

.hk-hizmet-mc__metin {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 14px;
	line-height: 21px;
}

.hk-hizmet-mc > .hk-simge {
	position: absolute;
	right: var(--bosluk-4);
	top: var(--bosluk-4);
	color: var(--vurgu);
}

.hk-hizmet-mc:hover {
	border-color: var(--vurgu);
	background: rgb(255 255 255 / 0.04);
}

.hk-hizmet-mc[aria-current] {
	border-color: var(--vurgu);
	box-shadow: inset 3px 0 0 var(--vurgu);
}

/* ---------- Mobil menüler (375): Menü düğmesi menüyü açar; A ve B akordeon,
   C katman katman ---------- */
.hk-menu-sahne--mobil {
	display: flex;
	flex-direction: column;
}

.hk-menu-sahne--mobil > main {
	flex: none;
}

.hk-menu-sahne--mobil[data-mobil-acik="true"] > main {
	display: none;
}

.hk-ust-alan__menu-dugmesi .hk-menu-simge-kapat,
.hk-ust-alan__menu-dugmesi[aria-expanded="true"] .hk-menu-simge-ac {
	display: none;
}

.hk-ust-alan__menu-dugmesi[aria-expanded="true"] .hk-menu-simge-kapat {
	display: block;
}

.hk-mobil-m {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	background: var(--yuzey);
	color: var(--metin);
}

.hk-mobil-m__liste > li {
	border-bottom: var(--kenar-ince) solid var(--cizgi);
}

.hk-mobil-satir-m {
	position: relative;
	display: flex;
	width: 100%;
	box-sizing: border-box;
	align-items: center;
	justify-content: space-between;
	gap: var(--bosluk-3);
	min-height: 56px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--metin-baslik);
	text-align: left;
	text-decoration: none;
	font-family: var(--font-sans);
	font-size: 17px;
	line-height: 24px;
	font-weight: 600;
	cursor: pointer;
}

.hk-mobil-satir-m > .hk-simge {
	flex: none;
	width: 20px;
	height: 20px;
	transition: transform 120ms ease;
}

.hk-mobil-satir-m[aria-expanded="true"] > .hk-simge {
	transform: rotate(180deg);
}

.hk-mobil-satir-m[aria-current]::before {
	content: "";
	position: absolute;
	left: -16px;
	top: 14px;
	bottom: 14px;
	width: 3px;
	background: var(--vurgu);
}

.hk-mobil-m__alt {
	display: grid;
	justify-items: start;
	gap: var(--bosluk-4);
	padding: 0 0 var(--bosluk-5);
}

.hk-mobil-m__alt > * {
	justify-self: stretch;
}

.hk-mobil-m__alt > .hk-baglanti--ok,
.hk-mobil-m__alt > .hk-mobil-m__not {
	justify-self: start;
}

.hk-mobil-iletisim-m {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--bosluk-2);
	padding: var(--bosluk-5) 0 var(--bosluk-6);
}

.hk-mobil-iletisim-m .hk-dugme {
	min-height: var(--kontrol-yuksekligi);
}

.hk-mobil-iletisim-m__posta {
	grid-column: 1 / -1;
	justify-self: center;
	display: inline-flex;
	align-items: center;
	gap: var(--bosluk-2);
	margin-top: var(--bosluk-2);
	font-size: 15px;
}

/* A · mobil: çizimli liste */
.hk-mgruplar-ma > li + li {
	border-top: var(--kenar-ince) solid var(--cizgi);
}

.hk-mgrup-ma {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr);
	align-items: center;
	gap: var(--bosluk-3);
	min-height: 60px;
	color: var(--metin-baslik);
	text-decoration: none;
	font-size: 15px;
	line-height: 21px;
	font-weight: 600;
}

.hk-mgrup-ma__cizim {
	height: 48px;
}

.hk-mgrup-ma[aria-current] {
	color: var(--baglanti);
}

.hk-mhgrup-m {
	display: flex;
	align-items: center;
	margin: var(--bosluk-2) 0 0;
	color: var(--metin-baslik);
	font-size: 15px;
	line-height: 22px;
	font-weight: 700;
}

.hk-mhizmetler-m {
	display: grid;
	margin-top: calc(-1 * var(--bosluk-2)) !important;
	padding-left: 36px !important;
}

.hk-mhizmetler-m a {
	display: flex;
	align-items: center;
	min-height: 40px;
	color: var(--metin);
	text-decoration: none;
	font-size: 15px;
	line-height: 22px;
}

.hk-mhizmetler-m a[aria-current] {
	color: var(--baglanti);
	font-weight: 600;
}

/* B · mobil: fotoğraflı karolar ve fotoğraflı grup başlıkları */
.hk-mkarolar-mb {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--bosluk-4) var(--bosluk-3);
}

.hk-mkarolar-mb .hk-karo-mb__ad {
	font-size: 14px;
	line-height: 20px;
}

.hk-mhgrup-mb__baslik {
	display: flex;
	align-items: center;
	gap: var(--bosluk-3);
	margin: 0;
	color: var(--metin-baslik);
	font-size: 15px;
	line-height: 22px;
	font-weight: 700;
}

.hk-mhgrup-mb__baslik > span:last-child {
	display: flex;
	align-items: center;
}

.hk-mhgrup-mb__gorsel {
	flex: none;
	width: 64px;
	height: 44px;
}

.hk-mhgrup-mb .hk-mhizmetler-m {
	margin-top: var(--bosluk-1) !important;
	padding-left: 76px !important;
}

/* C · mobil: koyu, katman katman */
.hk-mobil-m--c {
	background: var(--grafit);
}

.hk-katman-mc__ust {
	display: grid;
	gap: var(--bosluk-1);
	padding: var(--bosluk-3) 0 var(--bosluk-3);
	border-bottom: var(--kenar-ince) solid var(--cizgi);
}

.hk-katman-mc__geri {
	display: inline-flex;
	align-items: center;
	gap: var(--bosluk-1);
	justify-self: start;
	min-height: 36px;
	padding: 0;
	margin-left: -4px;
	border: 0;
	background: none;
	color: var(--baglanti);
	font-family: var(--font-sans);
	font-size: 15px;
	line-height: 22px;
	font-weight: 600;
	cursor: pointer;
}

.hk-katman-mc__geri .hk-simge {
	width: 18px;
	height: 18px;
}

.hk-katman-mc__baslik {
	margin: 0;
	color: var(--metin-baslik);
	font-size: 24px;
	line-height: 32px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.hk-mobil-m--c .hk-mobil-satir-m {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto auto;
	justify-content: stretch;
}

.hk-mobil-m--c .hk-mobil-m__liste .hk-mobil-satir-m:not(:has(.hk-satir-mc__no)) {
	display: flex;
	justify-content: space-between;
}

.hk-mobil-m--c .hk-satir-mc__no {
	min-width: 26px;
}

.hk-katman-mc__tumu {
	display: grid;
	justify-items: start;
	gap: var(--bosluk-3);
	padding: var(--bosluk-5) 0 var(--bosluk-6);
}

.hk-katman-mc__grup {
	display: grid;
	gap: var(--bosluk-4);
	padding: var(--bosluk-4) 0 var(--bosluk-6);
}

.hk-mobil-m--c .hk-hizmetler-mc {
	grid-template-columns: minmax(0, 1fr);
	padding-top: var(--bosluk-4);
}

.hk-mobil-m--c .hk-hizmet-mc__metin {
	-webkit-line-clamp: 3;
}

/* ---------- Sayfalardaki menü: A · açık liste paneli (Beest kararı, 15 Ekim
   2026; menu_a.py) ----------
   Panel ana menüde düğmenin hemen ardından gelir (klavye sırası). Üst alan
   konumlu (yapışkan) olduğu için panel üst
   alanın altına, tam genişlikte yerleşir; panel açıkken üst alan açık temaya
   geçer (ortak.MENU_JS), ikisi tek beyaz
   yüzey olur. Ana menünün liste kuralı (.hk-ana-menu ul: yatay sıra) panelin
   listelerine geçmesin diye panel listeleri
   burada ayrıca tanımlanır. Örtü sabit konumlu, üst alanın arkasında; sayfayı
   karartır. Mobil menü üst alanın hemen
   altında açılır, ekrandan uzunsa kendi içinde kayar; geniş ekranda gizli. 14
   Ekim'de seçilen B'nin sayfa kuralları
   15 Ekim'de kaldırıldı (B menü denemeleri panolarında duruyor). */

/* anasayfa-a.css'teki .hk-ust-alan__menu-satiri .hk-ana-menu ul {
   justify-content: center } sütunları daraltıp ortalamasın */
.hk-ana-menu .hk-gruplar-ma {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	justify-content: stretch;
	gap: var(--bosluk-3);
}

.hk-ana-menu .hk-markalar-ma,
.hk-ana-menu .hk-hgrup-ma__liste {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	justify-content: stretch;
	gap: 0;
}

.hk-ust-ortu {
	position: fixed;
	inset: 0;
	z-index: calc(var(--katman-menu) - 1);
	background: rgb(17 18 18 / 0.6);
	cursor: pointer;
}

.hk-ust-ortu[hidden] {
	display: none;
}

.hk-mobil-m--ust {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: var(--katman-menu);
	max-height: calc(100dvh - 100%);
	overflow-y: auto;
	overscroll-behavior: contain;
	border-top: var(--kenar-ince) solid var(--cizgi);
	box-shadow: 0 24px 48px rgb(0 0 0 / 0.35);
}

@container (min-width: 960px) {

	.hk-mobil-m--ust {
		display: none;
	}
}

/* === MENÜ DENEMELERİ sonu === */

/* === HİZMETLER DENEMELERİ başı === */

/* Hizmetler denemeleri (Beest, 14–15 Ekim 2026): A bento ızgara, B sekmeli
   gezgin, C proje hattı, E dikey sekmeler.
   Yalnızca tuvaldeki Hizmetler denemeleri panolarında kullanılır. D (sistem
   çizimi) seçildi; onun ve ortak "Sektörler ve
   uygulamalar" bölümünün kuralları Hizmetler sayfasının dosyasında
   (hizmetler_d.css). Renk geçişleri 120ms;
   prefers-reduced-motion açıksa hareket yok (tasarım sistemi). */

/* ---------- A · Bento ızgara: beş grup farklı boyutlu kutularda, hizmetler
   açıkta ---------- */
.hk-bento-hz {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--bosluk-3);
}

.hk-bento-hz__kutu {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	scroll-margin-top: 152px;
	border: var(--kenar-ince) solid var(--cizgi);
	border-radius: var(--kose-orta);
	background: var(--yuzey);
	color: var(--metin);
}

.hk-bento-hz__kutu[data-theme="koyu"] {
	border-color: var(--grafit);
}

/* Yazılım: logo mavisi kutu, yazılar grafit (logo mavisi zemine beyaz yazı
   yok) */
.hk-bento-hz__kutu--yazilim {
	border-color: var(--logo-mavisi);
	background: var(--logo-mavisi);
	--metin-baslik: var(--grafit);
	--metin: var(--grafit);
	--cizgi: rgb(35 37 37 / 0.24);
	--baglanti: var(--grafit);
}

.hk-bento-hz__gorsel {
	position: relative;
	flex: none;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--grafit);
}

.hk-bento-hz__gorsel > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 900ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.hk-bento-hz__kutu:hover .hk-bento-hz__gorsel > img {
	transform: scale(1.04);
}

.hk-bento-hz__not {
	position: absolute;
	right: var(--bosluk-3);
	top: var(--bosluk-3);
	z-index: 1;
	padding: 4px var(--bosluk-3);
	border-radius: 999px;
	background: rgb(35 37 37 / 0.8);
	color: var(--beyaz);
	font-family: var(--font-sans);
	font-size: 12px;
	line-height: 16px;
}

.hk-bento-hz__govde {
	display: grid;
	gap: var(--bosluk-3);
	align-content: start;
	flex: 1;
	min-width: 0;
	padding: var(--bosluk-5) var(--bosluk-5) var(--bosluk-4);
}

.hk-bento-hz__ust {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 2px var(--bosluk-3);
	align-items: center;
}

.hk-bento-hz__no {
	display: inline-grid;
	place-items: center;
	min-width: 40px;
	height: 28px;
	padding: 0 6px;
	border-radius: var(--kose-kucuk);
	background: var(--logo-mavisi);
	color: var(--grafit);
	font-family: var(--font-mono);
	font-size: 14px;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.hk-bento-hz__kutu--yazilim .hk-bento-hz__no {
	background: var(--grafit);
	color: var(--logo-mavisi);
}

.hk-bento-hz__baslik {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 26px;
	line-height: 32px;
	font-weight: 700;
	letter-spacing: -0.015em;
	color: var(--metin-baslik);
}

.hk-bento-hz__sayi {
	grid-column: 2;
	font-family: var(--font-sans);
	font-size: 12px;
	line-height: 16px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--metin);
	white-space: nowrap;
}

.hk-bento-hz__liste {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hk-bento-hz__hizmet {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-content: start;
	column-gap: var(--bosluk-3);
	row-gap: 2px;
	height: 100%;
	box-sizing: border-box;
	padding: var(--bosluk-3) 0;
	border-top: var(--kenar-ince) solid var(--cizgi);
	color: inherit;
	text-decoration: none;
}

.hk-bento-hz__ad {
	grid-column: 1;
	font-family: var(--font-sans);
	font-size: 17px;
	line-height: 24px;
	font-weight: 600;
	color: var(--metin-baslik);
}

.hk-bento-hz__metin {
	grid-column: 1;
	font-family: var(--font-sans);
	font-size: 14px;
	line-height: 22px;
	color: var(--metin);
}

.hk-bento-hz__hizmet > .hk-simge {
	grid-column: 2;
	grid-row: 1;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	color: var(--metin);
	transition: transform 200ms ease, color 120ms ease;
}

.hk-bento-hz__hizmet:hover .hk-bento-hz__ad {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

.hk-bento-hz__hizmet:hover > .hk-simge {
	color: var(--metin-baslik);
	transform: translate(2px, -2px);
}

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

@container (min-width: 720px) {

	.hk-bento-hz {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--bosluk-4);
	}

	.hk-bento-hz__kutu--tedarik-ve-egitim {
		grid-column: 1 / -1;
		flex-direction: row;
	}

	.hk-bento-hz__kutu--tedarik-ve-egitim .hk-bento-hz__gorsel {
		width: 40%;
		aspect-ratio: auto;
		min-height: 220px;
	}
}

@container (min-width: 1200px) {

	/* 12 sütun: üstte Tasarım ve proje 5, Pano 3 (fotoğraf üstte), Yazılım 4;
   altta Saha 7 (iki sütun liste), Tedarik ve eğitim 5 */
	.hk-bento-hz {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		gap: var(--bosluk-5);
	}

	.hk-bento-hz__kutu--tasarim-ve-proje {
		grid-column: span 5;
	}

	.hk-bento-hz__kutu--pano {
		grid-column: span 3;
	}

	.hk-bento-hz__kutu--yazilim {
		grid-column: span 4;
	}

	.hk-bento-hz__kutu--saha {
		grid-column: span 7;
	}

	.hk-bento-hz__kutu--tedarik-ve-egitim {
		grid-column: span 5;
	}

	.hk-bento-hz__kutu--pano .hk-bento-hz__gorsel {
		aspect-ratio: 16 / 10;
	}

	.hk-bento-hz__kutu--tedarik-ve-egitim .hk-bento-hz__gorsel {
		width: 32%;
	}

	.hk-bento-hz__baslik {
		font-size: 24px;
		line-height: 30px;
	}

	.hk-bento-hz__kutu--saha .hk-bento-hz__liste {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--bosluk-5);
	}

	.hk-bento-hz__govde {
		padding: var(--bosluk-6) var(--bosluk-6) var(--bosluk-5);
		gap: var(--bosluk-4);
	}
}

/* ---------- B · Sekmeli gezgin: Uygulamalar sayfasındaki desen; solda
   numaralı hizmetler ---------- */
.hk-gezgin-u--hz .hk-gezgin-u__kart {
	min-height: 380px;
}

.hk-gezgin-u__oge.hk-gezgin-u__oge--hz {
	grid-template-columns: 40px minmax(0, 1fr) auto;
	min-height: 56px;
}

.hk-gezgin-u__sira {
	display: inline-grid;
	place-items: center;
	height: 28px;
	border-radius: var(--kose-kucuk);
	background: var(--zemin-ikincil);
	color: var(--metin-baslik);
	font-family: var(--font-mono);
	font-size: 13px;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.hk-gezgin-u__oge--hz[aria-pressed="true"] .hk-gezgin-u__sira {
	background: var(--logo-mavisi);
	color: var(--grafit);
}

.hk-gezgin-u__not {
	position: absolute;
	right: var(--bosluk-3);
	top: var(--bosluk-3);
	z-index: 1;
	padding: 4px var(--bosluk-3);
	border-radius: 999px;
	background: rgb(35 37 37 / 0.8);
	color: var(--beyaz);
	font-family: var(--font-sans);
	font-size: 12px;
	line-height: 16px;
}

/* ---------- C · Proje hattı: koyu girişte beş grup bir projenin akışı gibi
   soldan sağa ---------- */

/* girişin üstü katalog girişiyle aynı (solda metin, sağda fotoğraf);
   fotoğraf daha küçük, hat hemen altında */
.hk-hat-hz-giris .hk-foto-h {
	aspect-ratio: 16 / 10;
}

@container (min-width: 960px) {

	.hk-hat-hz-giris .hk-giris__ic {
		grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
	}
}

.hk-hat-hz {
	--hat-ara: var(--bosluk-5);
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1.8fr) minmax(0, 1.1fr);
	grid-template-rows: auto auto auto 1fr;
	gap: 0 var(--hat-ara);
	margin: 0;
	padding: 0 0 var(--bosluk-8);
	list-style: none;
}

.hk-hat-hz__durak {
	position: relative;
	display: grid;
	grid-row: span 4;
	grid-template-rows: subgrid;
	gap: 0;
	align-content: start;
	min-width: 0;
	scroll-margin-top: 152px;
}

/* akış: her düğümden sonrakine kesikli logo mavisi çizgi ve ok (Uygulamalar
   D'deki hat gibi); çizgi soldan sağa akar */
.hk-hat-hz__durak:not(:last-child)::before {
	content: "";
	position: absolute;
	top: 15px;
	left: 60px;
	right: calc(10px - var(--hat-ara));
	height: 2px;
	pointer-events: none;
	background: repeating-linear-gradient(90deg, var(--logo-mavisi) 0 8px, transparent 8px 16px);
	animation: hk-hat-hz-akis 1.6s linear infinite;
}

.hk-hat-hz__durak:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 11px;
	right: calc(5px - var(--hat-ara));
	pointer-events: none;
	border: 5px solid transparent;
	border-left-color: var(--logo-mavisi);
	border-right-width: 0;
}

@keyframes hk-hat-hz-akis {

	to {
		background-position: 16px 0;
	}
}

@keyframes hk-hat-hz-akis-dikey {

	to {
		background-position: 0 16px;
	}
}

.hk-hat-hz__dugum {
	display: inline-grid;
	place-items: center;
	justify-self: start;
	width: 48px;
	height: 32px;
	margin-bottom: var(--bosluk-4);
	border-radius: var(--kose-kucuk);
	background: var(--logo-mavisi);
	color: var(--grafit);
	font-family: var(--font-mono);
	font-size: 14px;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.hk-hat-hz__ad {
	margin: 0 0 var(--bosluk-1);
	font-family: var(--font-sans);
	font-size: 24px;
	line-height: 30px;
	font-weight: 700;
	letter-spacing: -0.015em;
	color: var(--metin-baslik);
}

.hk-hat-hz__sayi {
	margin: 0 0 var(--bosluk-3);
	font-family: var(--font-sans);
	font-size: 12px;
	line-height: 16px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--logo-mavisi);
}

.hk-hat-hz__hizmetler {
	display: grid;
	align-content: start;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hk-hat-hz__hizmet {
	display: grid;
	align-content: start;
	gap: 2px;
	height: 100%;
	box-sizing: border-box;
	padding: var(--bosluk-3) 0;
	border-top: var(--kenar-ince) solid rgb(197 198 198 / 0.22);
	color: inherit;
	text-decoration: none;
}

.hk-hat-hz__hizmet-ad {
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 22px;
	font-weight: 600;
	color: var(--metin-baslik);
	transition: color 120ms ease;
}

.hk-hat-hz__metin {
	font-family: var(--font-sans);
	font-size: 14px;
	line-height: 22px;
	color: var(--metin);
}

.hk-hat-hz__hizmet:hover .hk-hat-hz__hizmet-ad {
	color: var(--logo-mavisi);
}

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

@container (max-width: 1199px) {

	/* hat dikey: düğümler solda, akış çizgisi yukarıdan aşağı; hizmetler iki
   sütun */
	.hk-hat-hz {
		--hat-ara: var(--bosluk-6);
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: none;
		gap: var(--hat-ara);
		padding: 0 0 var(--bosluk-7) 64px;
	}

	.hk-hat-hz__durak {
		grid-row: auto;
		grid-template-rows: none;
	}

	.hk-hat-hz__dugum {
		position: absolute;
		left: -64px;
		top: 0;
		margin: 0;
	}

	.hk-hat-hz__ad {
		padding-top: 1px;
	}

	.hk-hat-hz__durak:not(:last-child)::before {
		top: 40px;
		bottom: calc(10px - var(--hat-ara));
		left: -41px;
		right: auto;
		width: 2px;
		height: auto;
		background: repeating-linear-gradient(180deg, var(--logo-mavisi) 0 8px, transparent 8px 16px);
		animation-name: hk-hat-hz-akis-dikey;
	}

	.hk-hat-hz__durak:not(:last-child)::after {
		top: auto;
		bottom: calc(5px - var(--hat-ara));
		left: -45px;
		right: auto;
		border: 5px solid transparent;
		border-top-color: var(--logo-mavisi);
		border-bottom-width: 0;
	}

	.hk-hat-hz__hizmetler {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--bosluk-5);
	}
}

@container (max-width: 599px) {

	.hk-hat-hz {
		--hat-ara: var(--bosluk-5);
		padding-left: 60px;
	}

	.hk-hat-hz__dugum {
		left: -60px;
		width: 44px;
		height: 30px;
		font-size: 13px;
	}

	.hk-hat-hz__durak:not(:last-child)::before {
		top: 38px;
		left: -39px;
	}

	.hk-hat-hz__durak:not(:last-child)::after {
		left: -43px;
	}

	.hk-hat-hz__ad {
		font-size: 22px;
		line-height: 28px;
	}

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

	/* B */
	.hk-gezgin-u--hz .hk-gezgin-u__icerik .hk-dugme-dizisi {
		grid-template-columns: minmax(0, 1fr);
	}

	/* A */
	.hk-bento-hz__govde {
		padding: var(--bosluk-4) var(--bosluk-4) var(--bosluk-3);
	}

	.hk-bento-hz__baslik {
		font-size: 22px;
		line-height: 28px;
	}

	.hk-bento-hz__no {
		min-width: 36px;
		height: 26px;
		font-size: 13px;
	}

	.hk-bento-hz__ad {
		font-size: 16px;
		line-height: 22px;
	}

	.hk-bento-hz__gorsel {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {

	.hk-hat-hz__durak::before {
		animation: none;
	}

	.hk-bento-hz__gorsel > img,
	.hk-bento-hz__hizmet > .hk-simge,
	.hk-hat-hz__hizmet-ad {
		transition: none;
	}
}

/* ---------- E · Dikey sekmeler: solda büyük grup adları, sağda grubun
   fotoğraf bandı ve bütün hizmet kartları ---------- */
.hk-dikey-hz-giris .hk-foto-h {
	aspect-ratio: 16 / 10;
}

@container (min-width: 960px) {

	.hk-dikey-hz-giris .hk-giris__ic {
		grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
	}
}

.hk-dikey-hz {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	gap: var(--bosluk-7);
	align-items: start;
}

.hk-dikey-hz__sekmeler {
	position: sticky;
	top: 152px;
	display: grid;
	border-top: var(--kenar-ince) solid var(--cizgi);
}

.hk-dikey-hz__sekme {
	position: relative;
	display: grid;
	grid-template-columns: 36px minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--bosluk-3);
	width: 100%;
	min-height: 76px;
	box-sizing: border-box;
	padding: var(--bosluk-4) var(--bosluk-4) var(--bosluk-4) var(--bosluk-5);
	cursor: pointer;
	border: 0;
	border-bottom: var(--kenar-ince) solid var(--cizgi);
	background: none;
	text-align: left;
	font-family: var(--font-sans);
	color: var(--metin);
	transition: background-color 120ms ease, color 120ms ease;
}

.hk-dikey-hz__sekme::before {
	content: "";
	position: absolute;
	left: 0;
	top: -1px;
	bottom: -1px;
	width: 4px;
	background: transparent;
}

.hk-dikey-hz__sekme:hover {
	background: var(--zemin-ikincil);
}

.hk-dikey-hz__sekme[aria-selected="true"] {
	background: var(--zemin-ikincil);
}

.hk-dikey-hz__sekme[aria-selected="true"]::before {
	background: var(--logo-mavisi);
}

.hk-dikey-hz__sekme:focus-visible {
	outline: var(--odak-kalinligi) solid var(--odak);
	outline-offset: calc(-1 * var(--odak-kalinligi));
}

.hk-dikey-hz__no {
	font-family: var(--font-mono);
	font-size: 14px;
	line-height: 1;
	color: var(--metin);
}

.hk-dikey-hz__sekme[aria-selected="true"] .hk-dikey-hz__no {
	color: var(--koyu-mavi);
}

.hk-dikey-hz__ad {
	font-size: 22px;
	line-height: 28px;
	font-weight: 700;
	letter-spacing: -0.015em;
	color: var(--metin);
	text-wrap: balance;
}

.hk-dikey-hz__sekme:hover .hk-dikey-hz__ad,
.hk-dikey-hz__sekme[aria-selected="true"] .hk-dikey-hz__ad {
	color: var(--metin-baslik);
}

.hk-dikey-hz__sayi {
	display: inline-grid;
	place-items: center;
	min-width: 28px;
	height: 28px;
	border-radius: 999px;
	border: var(--kenar-ince) solid var(--cizgi);
	font-family: var(--font-mono);
	font-size: 13px;
	line-height: 1;
	color: var(--metin-baslik);
}

.hk-dikey-hz__sekme[aria-selected="true"] .hk-dikey-hz__sayi {
	border-color: var(--grafit);
	background: var(--grafit);
	color: var(--beyaz);
}

.hk-dikey-hz__icerik {
	min-width: 0;
}

.hk-dikey-hz__panel {
	display: grid;
	gap: var(--bosluk-4);
}

.hk-dikey-hz__panel[hidden] {
	display: none;
}

.hk-dikey-hz__bas {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: flex-end;
	min-height: 220px;
	overflow: hidden;
	border-radius: var(--kose-orta);
	background: var(--grafit);
}

.hk-dikey-hz__bas > img {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hk-dikey-hz__bas::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(to top, rgb(35 37 37 / 0.96) 0%, rgb(35 37 37 / 0.7) 40%, rgb(35 37 37 / 0.1) 100%);
}

.hk-dikey-hz__not {
	position: absolute;
	right: var(--bosluk-3);
	top: var(--bosluk-3);
	z-index: 1;
	padding: 4px var(--bosluk-3);
	border-radius: 999px;
	background: rgb(35 37 37 / 0.8);
	color: var(--beyaz);
	font-family: var(--font-sans);
	font-size: 12px;
	line-height: 16px;
}

.hk-dikey-hz__bas-metin {
	display: grid;
	gap: var(--bosluk-2);
	padding: var(--bosluk-5) var(--bosluk-6);
}

.hk-dikey-hz__ust {
	display: flex;
	align-items: center;
	gap: var(--bosluk-3);
	margin: 0;
	font-family: var(--font-sans);
	font-size: 12px;
	line-height: 16px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--acik-gri);
}

.hk-dikey-hz__bas-no {
	display: inline-grid;
	place-items: center;
	min-width: 40px;
	height: 26px;
	border-radius: var(--kose-kucuk);
	background: var(--logo-mavisi);
	color: var(--grafit);
	font-family: var(--font-mono);
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0;
}

.hk-dikey-hz__baslik {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 36px;
	line-height: 42px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--metin-baslik);
}

.hk-dikey-hz__kartlar {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--bosluk-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hk-dikey-hz__kartlar--tek {
	grid-template-columns: minmax(0, 1fr);
}

.hk-dikey-hz__kartlar > li:last-child:nth-child(odd) {
	grid-column: 1 / -1;
}

.hk-dikey-hz__kart {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-content: start;
	gap: var(--bosluk-1) var(--bosluk-3);
	height: 100%;
	box-sizing: border-box;
	padding: var(--bosluk-5);
	border: var(--kenar-ince) solid var(--cizgi);
	border-radius: var(--kose-orta);
	background: var(--beyaz);
	color: inherit;
	text-decoration: none;
	transition: border-color 120ms ease;
}

.hk-dikey-hz__kart-no {
	grid-column: 1;
	margin-bottom: var(--bosluk-1);
	font-family: var(--font-mono);
	font-size: 13px;
	line-height: 16px;
	color: var(--koyu-mavi);
}

.hk-dikey-hz__kart-ad {
	grid-column: 1;
	font-family: var(--font-sans);
	font-size: 18px;
	line-height: 24px;
	font-weight: 600;
	color: var(--metin-baslik);
}

.hk-dikey-hz__kart-metin {
	grid-column: 1;
	font-family: var(--font-sans);
	font-size: 14px;
	line-height: 22px;
	color: var(--metin);
}

.hk-dikey-hz__kart > .hk-simge {
	grid-column: 2;
	grid-row: 1 / span 2;
	align-self: center;
	width: 22px;
	height: 22px;
	color: var(--metin);
	transition: transform 200ms ease, color 120ms ease;
}

.hk-dikey-hz__kart:hover {
	border-color: var(--metin-baslik);
}

.hk-dikey-hz__kart:hover .hk-dikey-hz__kart-ad {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

.hk-dikey-hz__kart:hover > .hk-simge {
	color: var(--metin-baslik);
	transform: translateX(3px);
}

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

@container (max-width: 959px) {

	/* E: sekmeler iki sütunlu düğmeler (yatay kaymaz) */
	.hk-dikey-hz {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--bosluk-5);
	}

	.hk-dikey-hz__sekmeler {
		position: static;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--bosluk-2);
		border-top: 0;
	}

	.hk-dikey-hz__sekme {
		grid-template-columns: auto minmax(0, 1fr) auto;
		gap: var(--bosluk-2);
		min-height: 56px;
		padding: var(--bosluk-2) var(--bosluk-3);
		border: var(--kenar-ince) solid var(--cizgi);
		border-radius: var(--kose-orta);
	}

	.hk-dikey-hz__sekme::before {
		display: none;
	}

	.hk-dikey-hz__sekme:last-child {
		grid-column: 1 / -1;
	}

	.hk-dikey-hz__sekme[aria-selected="true"] {
		border-color: var(--grafit);
		background: var(--grafit);
	}

	.hk-dikey-hz__sekme[aria-selected="true"] .hk-dikey-hz__no {
		color: var(--logo-mavisi);
	}

	.hk-dikey-hz__sekme[aria-selected="true"] .hk-dikey-hz__ad {
		color: var(--beyaz);
	}

	.hk-dikey-hz__sekme[aria-selected="true"] .hk-dikey-hz__sayi {
		border-color: var(--logo-mavisi);
		background: var(--logo-mavisi);
		color: var(--grafit);
	}

	.hk-dikey-hz__ad {
		font-size: 16px;
		line-height: 20px;
	}

	.hk-dikey-hz__no {
		font-size: 12px;
	}

	.hk-dikey-hz__sayi {
		min-width: 24px;
		height: 24px;
		font-size: 12px;
	}
}

@container (max-width: 599px) {

	.hk-dikey-hz__bas {
		min-height: 168px;
	}

	.hk-dikey-hz__bas-metin {
		padding: var(--bosluk-4);
	}

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

	.hk-dikey-hz__kartlar {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--bosluk-3);
	}

	.hk-dikey-hz__kart {
		padding: var(--bosluk-4);
	}

	.hk-dikey-hz__kart-ad {
		font-size: 17px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.hk-dikey-hz__kart > .hk-simge {
		transition: none;
	}
}

/* === HİZMETLER DENEMELERİ sonu === */

/* === HİZMETLER başı === */

/* Hizmetler sayfası: D · Sistem çizimi (Beest kararı, 15 Ekim 2026) ve
   "Sektörler ve uygulamalar" bölümü. Hizmetler
   denemelerindeki yönler de bu bölümü kullanır. Renk geçişleri 120ms;
   prefers-reduced-motion açıksa hareket yok
   (tasarım sistemi). */

/* ---------- Ortak: sektörler ve uygulamalardan örnekler tek bölümde
   ---------- */
.hk-sektor-hz__kartlar {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--bosluk-5);
}

.hk-sektor-hz .hk-sektor-a .hk-cizim-alani {
	aspect-ratio: 2 / 1;
}

.hk-sektor-hz__alt-baslik {
	margin: var(--bosluk-4) 0 calc(-1 * var(--bosluk-5));
	font-family: var(--font-sans);
	font-size: 22px;
	line-height: 28px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--metin-baslik);
}

.hk-sektor-hz__ornekler {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--bosluk-5);
}

.hk-sektor-hz__ornekler .hk-proje-b {
	aspect-ratio: 4 / 3;
}

/* D · Sistem çizimi: çizim sınıfları (koyu zemin; ana sayfa girişindeki pano
   çiziminin dili) */
.hk-sistem-hz__cizim svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.cz-ana {
	fill: rgb(255 255 255 / 0.03);
	stroke: rgb(197 198 198 / 0.6);
	stroke-width: 1.5;
}

.cz-yuz {
	fill: rgb(255 255 255 / 0.022);
	stroke: rgb(197 198 198 / 0.38);
	stroke-width: 1.25;
}

.cz-kagit {
	fill: rgb(255 255 255 / 0.06);
	stroke: rgb(197 198 198 / 0.45);
	stroke-width: 1;
}

.cz-ince {
	fill: none;
	stroke: rgb(197 198 198 / 0.32);
	stroke-width: 1;
}

.cz-ince-2 {
	fill: none;
	stroke: rgb(197 198 198 / 0.2);
	stroke-width: 1;
}

.cz-cizgi {
	fill: none;
	stroke: rgb(197 198 198 / 0.55);
	stroke-width: 1.5;
}

.cz-plaka {
	fill: rgb(255 255 255 / 0.03);
}

.cz-kanal {
	fill: #2d2f2f;
	stroke: rgb(197 198 198 / 0.3);
	stroke-width: 1;
}

.cz-kesik {
	fill: none;
	stroke: rgb(197 198 198 / 0.28);
	stroke-width: 1;
	stroke-dasharray: 3 3;
}

.cz-ray {
	fill: rgb(255 255 255 / 0.11);
}

.cz-cihaz {
	fill: #2f3131;
	stroke: rgb(197 198 198 / 0.5);
	stroke-width: 1;
}

.cz-cihaz2 {
	fill: #373939;
	stroke: rgb(197 198 198 / 0.6);
	stroke-width: 1;
}

.cz-sonuk {
	fill: rgb(255 255 255 / 0.16);
}

.cz-sonuk-2 {
	fill: rgb(255 255 255 / 0.22);
}

.cz-led,
.cz-mavi {
	fill: #009ee3;
}

.cz-mavi-acik {
	fill: rgb(0 158 227 / 0.35);
}

.cz-ekran-mavi {
	fill: rgb(0 158 227 / 0.16);
	stroke: rgb(0 158 227 / 0.6);
	stroke-width: 1;
}

.cz-mavi-c {
	fill: none;
	stroke: #009ee3;
	stroke-width: 1.5;
}

.cz-sema {
	fill: none;
	stroke: rgb(197 198 198 / 0.6);
	stroke-width: 1.25;
}

.cz-sema-kalin {
	fill: none;
	stroke: rgb(197 198 198 / 0.75);
	stroke-width: 2.5;
}

.cz-sema-yazi {
	fill: rgb(197 198 198 / 0.75);
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: 700;
	text-anchor: middle;
}

.cz-sema-yazi--mavi {
	fill: #009ee3;
}

.cz-klemens {
	fill: none;
	stroke: rgb(197 198 198 / 0.35);
	stroke-width: 1;
}

.cz-klemens-mavi {
	fill: rgb(0 158 227 / 0.45);
}

.cz-kadran {
	fill: rgb(255 255 255 / 0.08);
	stroke: rgb(197 198 198 / 0.55);
	stroke-width: 1;
}

.cz-ibre {
	fill: none;
	stroke: rgb(197 198 198 / 0.8);
	stroke-width: 1.5;
}

.cz-ekran {
	fill: #1b1c1c;
	stroke: rgb(197 198 198 / 0.4);
	stroke-width: 1;
}

.cz-ekran-baslik {
	fill: #006e9e;
}

.cz-ekran-sekme {
	fill: rgb(255 255 255 / 0.35);
}

.cz-ekran-sekme--acik {
	fill: #fff;
}

.cz-segment {
	fill: none;
	stroke: #009ee3;
	stroke-width: 3;
}

.cz-vana {
	fill: rgb(0 158 227 / 0.25);
	stroke: #009ee3;
	stroke-width: 1.25;
}

.cz-trend {
	fill: none;
	stroke: #009ee3;
	stroke-width: 1.5;
	stroke-linejoin: round;
}

.cz-kol-dis {
	fill: none;
	stroke: rgb(197 198 198 / 0.6);
	stroke-width: 15;
	stroke-linecap: round;
}

.cz-kol-ic {
	fill: none;
	stroke: #2f3131;
	stroke-width: 12;
	stroke-linecap: round;
}

.cz-kol-dis--ince {
	stroke-width: 12;
}

.cz-kol-ic--ince {
	stroke-width: 9;
}

.cz-eklem {
	fill: #373939;
	stroke: rgb(197 198 198 / 0.6);
	stroke-width: 1.25;
}

.cz-tutucu {
	fill: none;
	stroke: rgb(197 198 198 / 0.75);
	stroke-width: 2.5;
	stroke-linecap: round;
}

.cz-bant {
	fill: none;
	stroke: rgb(197 198 198 / 0.7);
	stroke-width: 2;
}

.cz-urun {
	fill: rgb(255 255 255 / 0.05);
	stroke: rgb(197 198 198 / 0.5);
	stroke-width: 1.25;
}

.cz-urun--mavi {
	fill: rgb(0 158 227 / 0.12);
	stroke: #009ee3;
	stroke-width: 1.5;
}

.cz-isin {
	fill: none;
	stroke: #009ee3;
	stroke-width: 1.25;
	stroke-dasharray: 2 2;
}

.cz-kutu {
	fill: rgb(255 255 255 / 0.04);
	stroke: rgb(197 198 198 / 0.5);
	stroke-width: 1.25;
}

.cz-zemin {
	fill: none;
	stroke: rgb(197 198 198 / 0.3);
	stroke-width: 1.5;
}

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

.cz-no {
	display: none;
}

.hk-sistem-hz__cizim :is(.cz-ana, .cz-yuz, .cz-kagit, .cz-ince, .cz-ince-2, .cz-cizgi, .cz-kanal, .cz-kesik, .cz-cihaz, .cz-cihaz2, .cz-mavi-c,
.cz-sema, .cz-sema-kalin, .cz-klemens, .cz-kadran, .cz-ibre, .cz-ekran, .cz-ekran-mavi, .cz-vana, .cz-trend, .cz-eklem, .cz-tutucu, .cz-bant,
.cz-urun, .cz-isin, .cz-kutu, .cz-zemin, .cz-akis) {
	vector-effect: non-scaling-stroke;
}

.cz-no-daire {
	fill: #009ee3;
}

.cz-no-yazi {
	fill: #232525;
	font-family: var(--font-mono);
	font-size: 30px;
	text-anchor: middle;
}

/* seçili grubun parçası öne çıkar, öbürleri soluklaşır */
.cz-parca {
	transition: opacity 120ms ease;
}

.hk-sistem-hz__cizim[data-secili] .cz-parca {
	opacity: 0.5;
}

.hk-sistem-hz__cizim[data-secili="tasarim-ve-proje"] .cz-parca--tasarim-ve-proje,
.hk-sistem-hz__cizim[data-secili="pano"] .cz-parca--pano,
.hk-sistem-hz__cizim[data-secili="yazilim"] .cz-parca--yazilim,
.hk-sistem-hz__cizim[data-secili="saha"] .cz-parca--saha,
.hk-sistem-hz__cizim[data-secili="tedarik-ve-egitim"] .cz-parca--tedarik-ve-egitim {
	opacity: 1;
}

.hk-sistem-hz__cizim[data-secili="tasarim-ve-proje"] .cz-parca--tasarim-ve-proje .cz-ana,
.hk-sistem-hz__cizim[data-secili="pano"] .cz-parca--pano .cz-ana,
.hk-sistem-hz__cizim[data-secili="yazilim"] .cz-parca--yazilim .cz-cihaz2,
.hk-sistem-hz__cizim[data-secili="saha"] .cz-parca--saha .cz-ana,
.hk-sistem-hz__cizim[data-secili="tedarik-ve-egitim"] .cz-parca--tedarik-ve-egitim .cz-ana {
	stroke: #009ee3;
}

@media (prefers-reduced-motion: reduce) {

	.cz-akis {
		animation: none;
	}

	.cz-parca {
		transition: none;
	}
}

/* ---------- D · Sistem çizimi: girişte teknik çizim; parça etiketleri
   sekme, sağda grubun hizmetleri ---------- */

/* girişte düğme ve açıklama metni yok (Beest, 15 Ekim 2026): solda başlık ve
   altında çizim; sağda grup paneli en üstten başlar */
.hk-sistem-hz-giris__metin {
	grid-area: metin;
	display: grid;
	gap: var(--bosluk-4);
	justify-items: start;
	align-content: start;
	max-width: 720px;
}

.hk-sistem-hz-giris__metin .hk-sayfa-yolu {
	margin-bottom: var(--bosluk-1);
}

.hk-sistem-hz-giris__metin .hk-ornek-not-k {
	margin-top: 0;
}

/* panel iki satırı kaplar, en az sol sütun boyunda; çizim başlığın hemen
   altında, grup değişince yerinde kalır */
.hk-sistem-hz {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	grid-template-rows: auto 1fr;
	grid-template-areas: "metin panel" "sahne panel";
	gap: var(--bosluk-6);
	padding-block: var(--bosluk-6) var(--bosluk-8);
}

.hk-sistem-hz__sahne {
	grid-area: sahne;
	align-self: start;
}

.hk-sistem-hz__sahne {
	position: relative;
	min-width: 0;
}

.hk-sistem-hz__cizim {
	margin: 0;
}

.hk-sistem-hz__etiketler {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.hk-sistem-hz__etiket {
	position: absolute;
	transform: translateY(-100%);
	pointer-events: auto;
	display: inline-flex;
	align-items: center;
	gap: var(--bosluk-2);
	min-height: 40px;
	box-sizing: border-box;
	padding: 4px var(--bosluk-3) 4px 5px;
	cursor: pointer;
	border: var(--kenar-ince) solid rgb(197 198 198 / 0.35);
	border-radius: 999px;
	background: rgb(35 37 37 / 0.94);
	font-family: var(--font-sans);
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
	color: var(--beyaz);
	text-align: left;
	white-space: nowrap;
	transition: border-color 120ms ease, background-color 120ms ease, color 120ms ease;
}

.hk-sistem-hz__etiket:hover {
	border-color: var(--logo-mavisi);
}

.hk-sistem-hz__etiket[aria-selected="true"] {
	border-color: var(--logo-mavisi);
	background: var(--logo-mavisi);
	color: var(--grafit);
}

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

.hk-sistem-hz__no {
	display: inline-grid;
	place-items: center;
	flex: none;
	min-width: 32px;
	height: 28px;
	padding: 0 4px;
	box-sizing: border-box;
	border-radius: 999px;
	background: var(--logo-mavisi);
	color: var(--grafit);
	font-family: var(--font-mono);
	font-size: 13px;
	line-height: 1;
	font-weight: 400;
}

.hk-sistem-hz__etiket[aria-selected="true"] .hk-sistem-hz__no {
	background: var(--grafit);
	color: var(--logo-mavisi);
}

/* etiketlerin çizimdeki yeri: parçanın sol üstü (sistem_cizimi.ETIKET) */
.hk-sistem-hz__etiket--tasarim-ve-proje {
	left: 2.5%;
	top: 36.04%;
}

.hk-sistem-hz__etiket--pano {
	left: 28.75%;
	top: 30.19%;
}

.hk-sistem-hz__etiket--yazilim {
	left: 54.17%;
	top: 37.01%;
}

.hk-sistem-hz__etiket--saha {
	left: 73.33%;
	top: 55.19%;
}

.hk-sistem-hz__etiket--tedarik-ve-egitim {
	left: 70.83%;
	top: 10.06%;
}

/* Çizimde yeri olmayan bir grup varsa (yönetim panelinden eklenen grup; Beest
   kararı, 16 Ekim 2026) bütün sekmeler
   çizimin altında üçlü düğme sırası olur, çizimdeki parçalar grup
   numarasıyla işaretlenir (mobildeki gibi). */
.hk-sistem-hz__sahne--liste .hk-sistem-hz__etiketler {
	position: static;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--bosluk-2);
	margin-top: var(--bosluk-4);
	pointer-events: auto;
}

.hk-sistem-hz__sahne--liste .hk-sistem-hz__etiket {
	position: static;
	transform: none;
	min-height: 48px;
	border-radius: var(--kose-orta);
	white-space: normal;
}

.hk-sistem-hz__sahne--liste .cz-no {
	display: inline;
}

.hk-sistem-hz__paneller {
	grid-area: panel;
	display: grid;
	min-width: 0;
}

.hk-sistem-hz__panel {
	display: flex;
	flex-direction: column;
	gap: var(--bosluk-3);
	min-height: 560px;
	box-sizing: border-box;
	padding: var(--bosluk-6);
	border: var(--kenar-ince) solid rgb(197 198 198 / 0.22);
	border-radius: var(--kose-orta);
	background: rgb(35 37 37 / 0.92);
}

.hk-sistem-hz__panel[hidden] {
	display: none;
}

.hk-sistem-hz__ust {
	display: flex;
	align-items: center;
	gap: var(--bosluk-3);
	margin: 0;
	font-family: var(--font-sans);
	font-size: 12px;
	line-height: 16px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--logo-mavisi);
}

.hk-sistem-hz__panel-no {
	display: inline-grid;
	place-items: center;
	min-width: 48px;
	height: 32px;
	border-radius: var(--kose-kucuk);
	background: var(--logo-mavisi);
	color: var(--grafit);
	font-family: var(--font-mono);
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 0;
}

.hk-sistem-hz__baslik {
	margin: 0 0 var(--bosluk-2);
	font-family: var(--font-sans);
	font-size: 32px;
	line-height: 38px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--metin-baslik);
}

.hk-sistem-hz__hizmetler {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
	border-bottom: var(--kenar-ince) solid rgb(197 198 198 / 0.22);
}

.hk-sistem-hz__hizmet {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: var(--bosluk-3);
	row-gap: 2px;
	padding: var(--bosluk-3) 0;
	border-top: var(--kenar-ince) solid rgb(197 198 198 / 0.22);
	color: inherit;
	text-decoration: none;
}

.hk-sistem-hz__hizmet-ad {
	grid-column: 1;
	font-family: var(--font-sans);
	font-size: 17px;
	line-height: 24px;
	font-weight: 600;
	color: var(--metin-baslik);
	transition: color 120ms ease;
}

.hk-sistem-hz__metin {
	grid-column: 1;
	font-family: var(--font-sans);
	font-size: 14px;
	line-height: 22px;
	color: var(--metin);
}

.hk-sistem-hz__hizmet > .hk-simge {
	grid-column: 2;
	grid-row: 1;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	color: var(--metin);
	transition: transform 200ms ease, color 120ms ease;
}

.hk-sistem-hz__hizmet:hover .hk-sistem-hz__hizmet-ad,
.hk-sistem-hz__hizmet:hover > .hk-simge {
	color: var(--logo-mavisi);
}

.hk-sistem-hz__hizmet:hover > .hk-simge {
	transform: translate(2px, -2px);
}

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

.hk-sistem-hz__sonraki {
	display: inline-flex;
	align-items: center;
	gap: var(--bosluk-2);
	align-self: flex-start;
	margin-top: auto;
	padding: var(--bosluk-3) 0 0;
	cursor: pointer;
	border: 0;
	background: none;
	font-family: var(--font-sans);
	font-size: 15px;
	line-height: 22px;
	font-weight: 600;
	color: var(--logo-mavisi);
}

.hk-sistem-hz__sonraki .hk-simge {
	width: 18px;
	height: 18px;
	transition: transform 200ms ease;
}

.hk-sistem-hz__sonraki:hover .hk-simge {
	transform: translateX(3px);
}

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

@container (max-width: 959px) {

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

	/* örnekler yatay kayar (ana sayfadaki proje galerisi gibi); tek kalan kart
   olmasın */
	.hk-sektor-hz__ornekler {
		display: flex;
		gap: var(--bosluk-4);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		margin-inline: calc(-1 * var(--sayfa-kenari));
		padding-inline: var(--sayfa-kenari);
		scroll-padding-inline: var(--sayfa-kenari);
	}

	.hk-sektor-hz__ornekler > * {
		flex: 0 0 44%;
		scroll-snap-align: start;
	}

	/* D: tek sütun; etiketler çizimin altında iki sütunlu düğmeler, çizimde
   parçaların numarası */
	.hk-sistem-hz {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: none;
		grid-template-areas: "yol" "cizim" "baslik" "etiketler" "panel";
		gap: var(--bosluk-5);
		padding-block: var(--bosluk-5) var(--bosluk-7);
	}

	/* Mobilde sıra öbür görselli girişlerdeki gibi: sayfa yolu, çizim, başlık
   (kayıtlı karar "Mobil girişte sıra: sayfa
     yolu, görsel, metin"; Beest, 17 Ekim 2026: "Rapordakileri şablonlara göre
     düzelt"); grup düğmeleri başlığın altında,
     panellerinin hemen üstünde. Metin sütununun ve sahnenin kutusu kalkar. */
	.hk-sistem-hz-giris__metin,
	.hk-sistem-hz__sahne {
		display: contents;
	}

	.hk-sistem-hz__cizim {
		grid-area: cizim;
	}

	.hk-sistem-hz__sahne > .hk-sistem-hz__etiketler {
		grid-area: etiketler;
		margin-top: 0;
	}

	.hk-sistem-hz-giris__metin > .hk-sayfa-yolu {
		grid-area: yol;
		margin-bottom: 0;
	}

	.hk-sistem-hz-giris__metin > .hk-giris-k__baslik {
		grid-area: baslik;
	}

	.hk-sistem-hz__etiketler {
		position: static;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--bosluk-2);
		margin-top: var(--bosluk-4);
		pointer-events: auto;
	}

	.hk-sistem-hz__etiket {
		position: static;
		transform: none;
		min-height: 48px;
		border-radius: var(--kose-orta);
		white-space: normal;
	}

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

	.hk-sistem-hz__etiket:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}

	.hk-sistem-hz__panel {
		min-height: 0;
	}

	.cz-no {
		display: inline;
	}
}

@container (max-width: 599px) {

	/* Ortak bölüm: sektör kartları ve örnekler yatay kayar */
	.hk-sektor-hz__kartlar,
	.hk-sektor-hz__ornekler {
		display: flex;
		gap: var(--bosluk-3);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		margin-inline: calc(-1 * var(--sayfa-kenari-mobil));
		padding-inline: var(--sayfa-kenari-mobil);
		scroll-padding-inline: var(--sayfa-kenari-mobil);
	}

	.hk-sektor-hz__kartlar > *,
	.hk-sektor-hz__ornekler > * {
		flex: 0 0 80%;
		scroll-snap-align: start;
	}

	.hk-sektor-hz__alt-baslik {
		margin: var(--bosluk-2) 0 calc(-1 * var(--bosluk-4));
		font-size: 20px;
		line-height: 26px;
	}

	.hk-sistem-hz {
		padding-top: var(--bosluk-4);
	}

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

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

	.hk-sistem-hz__hizmet-ad {
		font-size: 16px;
		line-height: 22px;
	}
}

.hk-sektor-hz__kartlar::-webkit-scrollbar,
.hk-sektor-hz__ornekler::-webkit-scrollbar {
	display: none;
}

@media (prefers-reduced-motion: reduce) {

	.hk-sistem-hz__hizmet > .hk-simge,
	.hk-sistem-hz__sonraki .hk-simge {
		transition: none;
	}
}

/* === HİZMETLER sonu === */

/* === IŞIK BANDI · ŞABLONLAR başı === */

/* Güven şeridi olan şablonlarda ana sayfadaki ışık bandı (Beest kararı, 17 Ekim
   2026; 15 Ekim'den beri girişin
   içindeki pafta antetindeydi): Uygulamalar, Projeler ve Hakkımızda'da
   rakamlar, ürün kategorisinde dört hizmet sözü.
   Girişin altında kenardan kenara derin mavi bant; içinde gezinen ışık, ince
   ızgara, ışık süpürmesi, üst kenarda akan
   ışık; her öğenin önünde hareketli çizgi ikonu (hero/guven_ikonlar.py),
   rakamlar sıfırdan sayar (kuruluş yılı sayılmaz).
   Aşağıdaki bant kuralları ana sayfadakinin (anasayfa-a.css "IŞIK BANDI")
   birebir kopyası: şablon panoları ana sayfa
   CSS'inin bant kuralları olmayan sürümüne bağlı (6152deaf…). Temada tek
   bileşen olur. Şablonlara özgü kurallar
   (giriş, üç rakam, hizmet sözleri, yeni ikonların hareketleri) kopyanın
   altında, .hk-giris-k altında. */
.hk-gs {
	margin: 0;
}

.hk-gs__oge {
	position: relative;
}

.hk-gs dt,
.hk-gs dd {
	margin: 0;
}

.hk-gs__deger {
	display: flex;
	align-items: center;
	flex: none;
	font-family: var(--font-sans);
	font-size: 44px;
	line-height: 52px;
	font-weight: 700;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	color: var(--beyaz);
	white-space: nowrap;
}

.hk-gs__arti {
	color: var(--hk-arti, var(--logo-mavisi));
}

.hk-gs__ad {
	font-family: var(--font-sans);
	font-size: 17px;
	line-height: 22px;
	font-weight: 600;
	color: var(--beyaz);
}

.hk-gs__ikon {
	display: grid;
	place-items: center;
	flex: none;
}

/* Sayan rakamlar: asıl rakam yerinde ama saydam (genişliği tutar, ekran okuyucu
   onu okur); üstünde CSS sayacı 0'dan
   rakama sayar. @property'yi tanımayan tarayıcı sayacı atlar, son değeri
   gösterir. */
@property --hk-sayac {
	syntax: "<integer>";
	inherits: false;
	initial-value: 0;
}

@keyframes hk-say {

	from {
		--hk-sayac: 0;
	}

	to {
		--hk-sayac: var(--hk-son);
	}
}

.hk-gs__sayi {
	position: relative;
	display: inline-block;
	color: transparent;
}

.hk-gs__sayi::after {
	content: counter(hk-sayac);
	content: counter(hk-sayac) / "";
	counter-reset: hk-sayac var(--hk-sayac);
	position: absolute;
	inset: 0;
	text-align: right;
	color: var(--beyaz);
	animation: hk-say 1.6s cubic-bezier(0.2, 0.6, 0.25, 1) both;
	animation-delay: calc(0.3s + var(--i) * 0.15s);
}

@keyframes hk-gir {

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

/* Hareketli çizgi ikonları (renkler --ik-cizgi, --ik-vurgu, --ik-isik,
   --ik-zemin) */
.hk-ik {
	display: block;
	flex: none;
	width: var(--ik-boy, 48px);
	height: var(--ik-boy, 48px);
	overflow: visible;
	fill: none;
	stroke: var(--ik-cizgi, var(--acik-gri));
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.hk-ik .v {
	stroke: var(--ik-vurgu, var(--logo-mavisi));
}

.hk-ik .ince {
	stroke-width: 1.1;
	opacity: 0.55;
}

.hk-ik .led {
	fill: var(--ik-isik, var(--logo-mavisi));
	stroke: none;
	animation: hk-yanip 1.5s ease-in-out infinite;
}

.hk-ik .ik-disli-a {
	animation: hk-don 9s linear infinite;
}

.hk-ik .ik-disli-b {
	animation: hk-don 7s linear infinite reverse;
}

.hk-ik .ik-rozet {
	fill: var(--ik-zemin, var(--grafit));
	stroke: var(--ik-vurgu, var(--logo-mavisi));
}

.hk-ik .ik-tik {
	stroke-width: 1.9;
	stroke-dasharray: 12;
	stroke-dashoffset: 12;
	animation: hk-tik 4s ease-in-out infinite;
}

.hk-ik .ik-pencere {
	fill: transparent;
	animation: hk-pencere 2.1s ease-in-out infinite;
}

.hk-ik .ik-duman {
	fill: var(--ik-cizgi, var(--acik-gri));
	stroke: none;
	opacity: 0;
	transform-box: fill-box;
	transform-origin: center;
	animation: hk-duman 2.6s ease-out infinite;
}

.hk-ik .ik-nabiz {
	transform-box: fill-box;
	transform-origin: center;
	animation: hk-nabiz 2.2s ease-out infinite;
}

.hk-ik .ik-oynat {
	fill: var(--ik-isik, var(--logo-mavisi));
	stroke: var(--ik-isik, var(--logo-mavisi));
	stroke-width: 1.2;
}

.hk-ik .ik-ilerleme {
	transform-origin: 10.5px 28.5px;
	animation: hk-ilerle 5s linear infinite;
}

@keyframes hk-don {

	to {
		transform: rotate(360deg);
	}
}

@keyframes hk-tik {

	0%,
	15% {
		stroke-dashoffset: 12;
		opacity: 1;
	}

	40%,
	88% {
		stroke-dashoffset: 0;
		opacity: 1;
	}

	100% {
		stroke-dashoffset: 0;
		opacity: 0;
	}
}

@keyframes hk-pencere {

	0%,
	100% {
		fill: transparent;
	}

	30%,
	60% {
		fill: var(--ik-isik, var(--logo-mavisi));
	}
}

@keyframes hk-duman {

	0% {
		opacity: 0;
		transform: translateY(0) scale(0.5);
	}

	25% {
		opacity: 0.8;
	}

	100% {
		opacity: 0;
		transform: translateY(-8px) scale(1.4);
	}
}

@keyframes hk-nabiz {

	0% {
		transform: scale(0.85);
		opacity: 0.9;
	}

	100% {
		transform: scale(1.65);
		opacity: 0;
	}
}

@keyframes hk-ilerle {

	0% {
		transform: scaleX(0);
	}

	88% {
		transform: scaleX(1);
		opacity: 1;
	}

	100% {
		transform: scaleX(1);
		opacity: 0;
	}
}

.hk-bant {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: linear-gradient(100deg, color-mix(in oklab, var(--koyu-mavi), #000 22%) 0%, var(--koyu-mavi) 30%, color-mix(in oklab, var(--koyu-mavi), var(--logo-mavisi) 30%) 58%, var(--koyu-mavi) 82%, color-mix(in oklab, var(--koyu-mavi), #000 18%) 100%);
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.25), 0 -18px 48px -26px rgb(0 158 227 / 0.6);
	--ik-cizgi: var(--beyaz);
	--ik-vurgu: color-mix(in oklab, var(--logo-mavisi), #fff 62%);
	--ik-isik: var(--beyaz);
	--ik-zemin: var(--koyu-mavi);
	--hk-arti: color-mix(in oklab, var(--logo-mavisi), #fff 62%);
}

.hk-bant::before {                                        /* gezinen ışık */
	content: "";
	position: absolute;
	z-index: -1;
	inset: -70% -25%;
	pointer-events: none;
	background:
		radial-gradient(28% 50% at 22% 50%, rgb(0 158 227 / 0.5), transparent 70%),
		radial-gradient(22% 46% at 68% 55%, rgb(160 222 250 / 0.16), transparent 70%);
	animation: hk-aurora 16s ease-in-out infinite alternate;
}

.hk-bant::after {                                         /* ızgara (girişteki ızgaranın açığı) */
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(rgb(255 255 255 / 0.08) 1px, transparent 1px),
		linear-gradient(90deg, rgb(255 255 255 / 0.08) 1px, transparent 1px),
		linear-gradient(rgb(255 255 255 / 0.035) 1px, transparent 1px),
		linear-gradient(90deg, rgb(255 255 255 / 0.035) 1px, transparent 1px);
	background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
	background-position: -1px -1px;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
}

.hk-bant__isik {
	position: absolute;
	z-index: -1;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

.hk-bant__isik::before {                                  /* ışık süpürmesi */
	content: "";
	position: absolute;
	top: -40%;
	bottom: -40%;
	left: 0;
	width: 240px;
	background: linear-gradient(100deg, transparent, rgb(255 255 255 / 0.13) 50%, transparent);
	transform: translateX(-320px) skewX(-18deg);
	animation: hk-supur 7s ease-in-out infinite;
	animation-delay: 1.6s;
}

.hk-bant__isik::after {                                   /* üst kenarda akan ışık */
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 260px;
	height: 2px;
	background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.9), transparent);
	box-shadow: 0 0 12px rgb(160 222 250 / 0.9);
	animation: hk-kenar 4.5s linear infinite;
}

@keyframes hk-kenar {

	from {
		transform: translateX(-280px);
	}

	to {
		transform: translateX(calc(100vw + 20px));
	}
}

@keyframes hk-aurora {

	0% {
		transform: translateX(-9%);
	}

	50% {
		transform: translateX(3%) scaleY(1.15);
	}

	100% {
		transform: translateX(11%);
	}
}

@keyframes hk-supur {

	0% {
		transform: translateX(-320px) skewX(-18deg);
	}

	38%,
	100% {
		transform: translateX(calc(100vw + 320px)) skewX(-18deg);
	}
}

.hk-gs--bant {
	display: grid;
	grid-template-columns: repeat(4, auto);
	padding-block: 28px;
	text-shadow: 0 1px 2px rgb(0 40 60 / 0.3);
}

/* 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-gs--bant {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: auto;
	}

	.hk-gs--bant:has(> :nth-child(6)) {
		grid-auto-flow: row;
		grid-template-columns: repeat(3, auto);
	}
}

.hk-gs--bant .hk-gs__oge {
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	align-items: center;
	gap: var(--bosluk-4);
	padding-inline: 28px 12px;
	animation: hk-gir 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
	animation-delay: calc(0.1s + var(--i) * 0.1s);
}

.hk-gs--bant .hk-gs__oge:first-child {
	padding-left: 0;
}

.hk-gs--bant .hk-gs__oge + .hk-gs__oge {
	border-left: var(--kenar-ince) solid rgb(255 255 255 / 0.2);
}

.hk-gs--bant .hk-gs__ikon {
	--ik-boy: 60px;
	margin: -4px var(--bosluk-4) -4px 0;
}

.hk-gs--bant .hk-ik {
	transition: filter 0.25s ease;
}

.hk-gs--bant .hk-gs__oge:hover .hk-ik {
	filter: drop-shadow(0 0 8px rgb(255 255 255 / 0.55));
}

/* 1179 px ve altında ikon ve rakam üstte, etiket altında; 959 px altında 2 ×
   2 */
@container (max-width: 1179px) {

	.hk-gs--bant .hk-gs__oge {
		flex-direction: column-reverse;
		justify-content: flex-end;
		align-items: flex-start;
		gap: var(--bosluk-2);
		padding-inline: 20px 8px;
	}

	.hk-gs--bant .hk-gs__ikon {
		--ik-boy: 40px;
		margin-right: var(--bosluk-3);
	}

	.hk-gs--bant .hk-gs__deger {
		font-size: 36px;
		line-height: 44px;
	}

	.hk-gs--bant .hk-gs__ad {
		font-size: 15px;
		line-height: 20px;
	}
}

@container (max-width: 959px) {

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

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

@container (max-width: 599px) {

	.hk-gs--bant {
		padding-block: 24px;
		column-gap: var(--bosluk-4);
	}

	.hk-gs--bant .hk-gs__oge,
	.hk-gs--bant .hk-gs__oge + .hk-gs__oge {
		padding-inline: 0;
		border-left: 0;
	}

	.hk-gs--bant .hk-gs__ikon {
		--ik-boy: 34px;
		margin-right: var(--bosluk-2);
	}

	.hk-gs--bant .hk-gs__deger {
		font-size: 30px;
		line-height: 36px;
	}

	.hk-gs--bant .hk-gs__ad {
		font-size: 14px;
		line-height: 19px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.hk-gs *,
	.hk-gs *::before,
	.hk-gs *::after,
	.hk-bant::before,
	.hk-bant__isik::before,
	.hk-bant__isik::after {
		animation: none !important;
	}

	.hk-bant__isik {
		display: none;
	}

	.hk-gs__sayi {
		color: inherit;
	}

	.hk-gs__sayi::after {
		content: none;
	}

	.hk-ik .ik-tik {
		stroke-dashoffset: 0;
	}

	.hk-ik .ik-duman {
		opacity: 0;
	}
}

/* Yeni ikonların hareketleri (takvim, belge, sohbet, kod, anahtar, baret,
   pergel; guven_ikonlar.py) */
.hk-ik .ik-yaz {
	stroke-dasharray: 16;
	stroke-dashoffset: 16;
	animation: hk-yaz 3.6s ease-in-out infinite;
}

.hk-ik .ik-yaz-uzun {
	stroke-dasharray: 34;
	stroke-dashoffset: 34;
	animation: hk-yaz-uzun 3.2s ease-in-out infinite;
}

.hk-ik .ik-kod-sol {
	animation: hk-kod-sol 3.2s ease-in-out infinite;
}

.hk-ik .ik-kod-sag {
	animation: hk-kod-sag 3.2s ease-in-out infinite;
}

.hk-ik .ik-anahtar {
	animation: hk-anahtar 3.4s ease-in-out infinite;
}

.hk-ik .ik-ciz {
	stroke-dasharray: 46;
	stroke-dashoffset: 46;
	animation: hk-ciz 3.8s ease-in-out infinite;
}

@keyframes hk-yaz {

	0%,
	10% {
		stroke-dashoffset: 16;
		opacity: 1;
	}

	45%,
	85% {
		stroke-dashoffset: 0;
		opacity: 1;
	}

	100% {
		stroke-dashoffset: 0;
		opacity: 0;
	}
}

@keyframes hk-yaz-uzun {

	0%,
	10% {
		stroke-dashoffset: 34;
	}

	45%,
	100% {
		stroke-dashoffset: 0;
	}
}

@keyframes hk-kod-sol {

	0%,
	100% {
		transform: translateX(0);
	}

	50% {
		transform: translateX(-2.5px);
	}
}

@keyframes hk-kod-sag {

	0%,
	100% {
		transform: translateX(0);
	}

	50% {
		transform: translateX(2.5px);
	}
}

@keyframes hk-anahtar {

	0%,
	15% {
		transform: rotate(0);
	}

	45%,
	60% {
		transform: rotate(-22deg);
	}

	90%,
	100% {
		transform: rotate(0);
	}
}

@keyframes hk-ciz {

	0%,
	10% {
		stroke-dashoffset: 46;
		opacity: 1;
	}

	55%,
	85% {
		stroke-dashoffset: 0;
		opacity: 1;
	}

	100% {
		stroke-dashoffset: 0;
		opacity: 0;
	}
}

/* Giriş: masaüstünde ilk ekranı doldurur, bant ekranın altına oturur (ana
   sayfadaki gibi; çok yüksek ekranda en çok
   820 px). Sağdaki görsel (fotoğraf mozaiği, sektör çizimi, kategori çizimi)
   ekranın yüksekliğine göre küçülür:
   ekran − pay. Pay = üst alan 129 + girişin iç boşlukları 32 + 32 + bant
   (rakamlar 108, 1180 px altında 148; hizmet
   sözleri 144, 1180 px altında 136). Görsel sayfa yolu satırını da kaplar
   (SAYFA YOLU SATIRI). 1366 × 768'de bant
   ilk ekranın altına oturur; uzun grup adlı kategorilerde de (metin sütunu
   görselden uzun olduğunda boyu metin
   belirler). Tuvalde 100svh panonun boyu olduğundan panoda giriş 820 px,
   görsel asıl boyunda görünür. */
.hk-giris-k.hk-giris--bant {
	--hk-giris-pay: 301px;
}

.hk-giris-k.hk-giris--bant-deger {
	--hk-giris-pay: 337px;
}

.hk-giris-k.hk-giris--bant .hk-giris__ic {
	padding-bottom: var(--bosluk-6);
}

@container (min-width: 960px) {

	.hk-giris-k.hk-giris--bant {
		display: flex;
		flex-direction: column;
		min-height: min(calc(100svh - 129px), 820px);
		box-sizing: border-box;
	}

	.hk-giris-k.hk-giris--bant > .hk-giris__ic {
		flex: 1 0 auto;
		align-content: start;
	}

	.hk-giris-k.hk-giris--bant .hk-mozaik-h,
	.hk-giris-k.hk-giris--bant .hk-sektorler-hm {
		height: clamp(400px, calc(100svh - var(--hk-giris-pay)), 540px);
	}

	.hk-giris-k.hk-giris--bant .hk-cizim {
		--hk-cizim-boy: clamp(400px, calc(100svh - var(--hk-giris-pay)), 558px);
		justify-self: start;
		width: min(calc(100% + 24px), calc(var(--hk-cizim-boy) * 680 / 600));
	}
}

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

	.hk-giris-k.hk-giris--bant .hk-mozaik-h {
		height: clamp(400px, calc(100svh - var(--hk-giris-pay)), 480px);
	}
}

@container (max-width: 1179px) {

	.hk-giris-k.hk-giris--bant {
		--hk-giris-pay: 341px;
	}

	.hk-giris-k.hk-giris--bant-deger {
		--hk-giris-pay: 329px;
	}
}

/* Üç rakam (Uygulamalar, Projeler, Hakkımızda): 960 px ve üstünde ana sayfadaki
   gibi tek satır; 600–959 px'te de üç
   sütun (ana sayfadaki 2 × 2 bir hücreyi boş bırakırdı); 599 px ve altında
   üç satır, rakamlar alt alta aynı yerden. */
@container (max-width: 959px) {

	.hk-giris-k .hk-gs--bant:has(> :nth-child(3):last-child) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.hk-giris-k .hk-gs--bant:has(> :nth-child(3):last-child) > .hk-gs__oge:nth-child(3) {
		padding-left: 20px;
		border-left: var(--kenar-ince) solid rgb(255 255 255 / 0.2);
	}
}

@container (max-width: 599px) {

	.hk-giris-k .hk-gs--bant:has(> :nth-child(3):last-child) {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 0;
		padding-block: 8px;
	}

	.hk-giris-k .hk-gs--bant:has(> :nth-child(3):last-child) > .hk-gs__oge:nth-child(n) {
		flex-direction: row-reverse;
		justify-content: flex-end;
		align-items: center;
		gap: var(--bosluk-3);
		padding: 14px 0;
		border-left: 0;
	}

	.hk-giris-k .hk-gs--bant:has(> :nth-child(3):last-child) > .hk-gs__oge + .hk-gs__oge {
		border-top: var(--kenar-ince) solid rgb(255 255 255 / 0.2);
	}

	.hk-giris-k .hk-gs--bant:has(> :nth-child(3):last-child) .hk-gs__deger {
		min-width: 140px;
	}
}

/* Hizmet sözleri (ürün kategorisi): ikon, ad ve kısa açıklama; ikon solda. 960
   px ve üstünde dört sütun (960–1179 px'te
   ikon ve yazı küçük, bant alçak kalsın), 600–959 px'te 2 × 2, 599 px ve
   altında dört satır. Açıklama da beyaz: bandın
   en açık yerinde beyaz 4,6:1 (saydam beyaz 4,5'in altına düşüyor). */
.hk-gs--deger {
	padding-inline: 0;
	list-style: none;
}

@container (width > 959px) {

	.hk-gs--bant.hk-gs--deger {
		grid-auto-columns: minmax(0, 1fr);
	}   /* sözler eşit genişlikte, sayısından bağımsız */
}

.hk-gs--deger .hk-gs__oge {
	flex-direction: row;
	justify-content: flex-start;
	align-items: flex-start;
	gap: var(--bosluk-4);
}

.hk-gs--deger .hk-gs__ikon {
	--ik-boy: 48px;
	margin: 0;
}

.hk-gs--deger .hk-gs__metin {
	display: grid;
	gap: var(--bosluk-1);
	min-width: 0;
}

.hk-gs--deger .hk-gs__ad,
.hk-gs--deger .hk-gs__aciklama {
	margin: 0;
}

.hk-gs--deger .hk-gs__aciklama {
	font-family: var(--font-sans);
	font-size: 14px;
	line-height: 20px;
	color: var(--beyaz);
}

@container (max-width: 1179px) {

	.hk-gs--deger .hk-gs__oge {
		flex-direction: row;
		align-items: flex-start;
		gap: var(--bosluk-3);
	}

	.hk-gs--deger .hk-gs__ikon {
		--ik-boy: 32px;
		margin: 0;
	}

	.hk-gs--deger .hk-gs__aciklama {
		font-size: 13px;
		line-height: 18px;
	}
}

@container (max-width: 959px) {

	.hk-gs--deger .hk-gs__ikon {
		--ik-boy: 36px;
	}

	.hk-gs--deger .hk-gs__aciklama {
		font-size: 14px;
		line-height: 20px;
	}
}

@container (max-width: 599px) {

	.hk-gs--bant.hk-gs--deger {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 0;
		padding-block: 8px;
	}

	.hk-gs--deger .hk-gs__oge:nth-child(n) {
		padding: 14px 0;
		border-left: 0;
	}

	.hk-gs--deger .hk-gs__oge + .hk-gs__oge {
		border-top: var(--kenar-ince) solid rgb(255 255 255 / 0.2);
	}

	.hk-gs--deger .hk-gs__ikon {
		--ik-boy: 34px;
	}

	.hk-gs--deger .hk-gs__ad {
		font-size: 15px;
		line-height: 20px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.hk-ik .ik-yaz,
	.hk-ik .ik-yaz-uzun,
	.hk-ik .ik-ciz {
		stroke-dashoffset: 0;
	}
}

/* === IŞIK BANDI · ŞABLONLAR sonu === */

/* === SAYFA YOLU SATIRI başı === */

/* Görselli girişlerde sayfa yolu metin sütunundan çıktı, girişin ızgarasında
   kendi satırında (Beest, 17 Ekim 2026:
   "Rapordakileri şablonlara göre düzelt"; denetim raporundaki öneri):
   masaüstünde her girişte aynı yerde, girişin en
   üstünde (görselsiz girişlerdeki gibi, sayfanın üstünden 162 px); metin
   görselin yanında, sayfa yolunun altındaki
   alanda dikeyde ortada; görsel her iki satırı kaplar, yeri değişmedi. Mobilde
   sıra değişmedi: sayfa yolu, görsel,
   metin. İşaretlemede sayfa yolu .hk-giris__ic'in ilk öğesi (ortak.py
   yol_disari). */
@container (min-width: 960px) {

	.hk-giris-k .hk-giris__ic:has(> .hk-giris__yol) {
		grid-template-areas: "yol gorsel" "metin gorsel";
		grid-template-rows: auto auto;
		row-gap: var(--bosluk-5);
	}

	.hk-giris-k .hk-giris__ic > .hk-giris__yol {
		grid-area: yol;
		align-self: start;
		margin: 0;
	}

	.hk-giris-k .hk-giris__ic:has(> .hk-giris__yol) > .hk-giris__metin {
		grid-area: metin;
		align-self: center;
	}

	.hk-giris-k .hk-giris__ic:has(> .hk-giris__yol) > :not(.hk-giris__yol, .hk-giris__metin) {
		grid-area: gorsel;
	}
}

@container (max-width: 959px) {

	.hk-giris-k .hk-giris__ic > .hk-giris__yol {
		order: -2;
		margin-bottom: 0;
	}
}

/* === SAYFA YOLU SATIRI sonu === */

/* === UZUN KATEGORİ BAŞLIĞI başı === */

/* Ürün kategorisi: uzun grup adları (Beest isteği, 15 Ekim 2026: öbür yedi
   grubun sayfası PLC şablonuyla). 88 px'lik
   başlık "PLC." ve "Pano." gibi kısa adlara göre; tek satıra sığmayan adlarda
   (ör. "Operatör paneli (HMI)", "Güvenlik
   PLC'si ve güvenlik rölesi") başlık 60 px, 1199 px ve altında 56 px, 599 px ve
   altında 40 px. Böylece başlık en çok iki
   satır olur, giriş ve antet masaüstünde ilk ekrana sığar (1366 × 768'de de;
   çizim payı aynı: --hk-giris-pay 355 px). */
.hk-giris-k__baslik--uzun {
	font-size: 60px;
	line-height: 60px;
}

@container (max-width: 1199px) {

	.hk-giris-k__baslik--uzun {
		font-size: 56px;
		line-height: 56px;
	}
}

@container (max-width: 599px) {

	.hk-giris-k__baslik--uzun {
		font-size: 40px;
		line-height: 44px;
	}
}

/* === UZUN KATEGORİ BAŞLIĞI sonu === */

/* ============================================================ Bölüm kitaplığı
   · Banner (duyuru bandı)
   Beest kararı, 16 Ekim 2026: Harvekon sayfalara banner'ı kendisi ekler
   (yönetim panelinde desen olarak; metin, düğme
   ve görsel düzenlenir, renk ve ölçüler sabit). Üç yön:
   A · koyu bant: etiket, başlık ve kısa metin solda, düğmeler sağda (geniş
   duyuru, kampanya dışı haber, etkinlik).
   B · logo mavisi şerit: simge, tek satırlık duyuru ve bağlantı (kısa bilgi;
   ör. tatil günleri).
   C · görselli kart: açık kart, solda fotoğraf (gerçek fotoğraf; örnek
   görsel etiketli), sağda metin ve düğme. */
.hk-banner {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	border-radius: var(--kose-orta);
}

.hk-banner__govde {
	display: grid;
	gap: var(--bosluk-3);
	justify-items: start;
	align-content: center;
	min-width: 0;
}

.hk-banner__etiket {
	display: inline-flex;
	align-items: center;
	gap: var(--bosluk-2);
	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);
}

.hk-banner__etiket::before {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--logo-mavisi);
	box-shadow: 0 0 0 4px rgb(0 158 227 / 0.25);
}

.hk-banner__baslik {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 32px;
	line-height: 38px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--metin-baslik);
	text-wrap: balance;
}

.hk-banner__metin {
	margin: 0;
	max-width: 60ch;
	font-family: var(--font-sans);
	font-size: 17px;
	line-height: 26px;
	color: var(--metin);
}

/* A · koyu bant: teknik ızgaralı grafit zemin, köşelerde pafta işaretleri
   (antet gibi) */
.hk-banner--koyu {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--bosluk-7);
	align-items: center;
	padding: var(--bosluk-7) var(--bosluk-8);
	overflow: visible;
	border: var(--kenar-ince) solid rgb(0 158 227 / 0.55);
	border-radius: 0;
	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-banner__kose {
	position: absolute;
	width: 14px;
	height: 14px;
	border: 0 solid var(--logo-mavisi);
	pointer-events: none;
}

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

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

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

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

.hk-banner--koyu .hk-banner__eylem {
	display: grid;
	gap: var(--bosluk-3);
	min-width: 240px;
}

.hk-banner--koyu .hk-banner__eylem .hk-dugme {
	justify-content: center;
}

/* B · logo mavisi şerit: grafit yazı (logo mavisi üstünde 5,1:1) */
.hk-banner--serit {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: var(--bosluk-4);
	align-items: center;
	padding: var(--bosluk-4) var(--bosluk-5);
	background: var(--logo-mavisi);
}

.hk-banner__simge {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: var(--kose-daire);
	background: var(--grafit);
	color: var(--logo-mavisi);
}

.hk-banner__simge .hk-simge {
	width: 22px;
	height: 22px;
}

.hk-banner--serit .hk-banner__metin {
	max-width: none;
	color: var(--grafit);
}

.hk-banner--serit .hk-banner__metin strong {
	font-weight: 700;
}

.hk-banner--serit .hk-banner__baglanti {
	display: inline-flex;
	align-items: center;
	gap: var(--bosluk-2);
	min-height: 44px;
	padding-inline: var(--bosluk-3);
	border-radius: var(--kose-orta);
	background: var(--grafit);
	color: var(--beyaz);
	text-decoration: none;
	font-family: var(--font-sans);
	font-size: 15px;
	line-height: 20px;
	font-weight: 600;
	white-space: nowrap;
}

.hk-banner--serit .hk-banner__baglanti .hk-simge {
	width: 18px;
	height: 18px;
	color: var(--logo-mavisi);
	transition: transform 120ms ease;
}

.hk-banner--serit .hk-banner__baglanti:hover .hk-simge {
	transform: translateX(3px);
}

.hk-banner--serit .hk-banner__baglanti:focus-visible {
	outline: var(--odak-kalinligi) solid var(--grafit);
	outline-offset: var(--odak-boslugu);
}

/* C · görselli kart */
.hk-banner--gorsel {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	border: var(--kenar-ince) solid var(--cizgi);
	background: var(--yuzey);
}

.hk-banner__gorsel {
	position: relative;
	min-height: 340px;
	margin: 0;
	background: var(--grafit);
}

.hk-banner__gorsel > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hk-banner--gorsel .hk-banner__govde {
	padding: var(--bosluk-7) var(--bosluk-8);
}

.hk-banner--gorsel .hk-dugme-dizisi {
	margin-top: var(--bosluk-3);
}

@container (max-width: 959px) {

	.hk-banner--koyu {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--bosluk-5);
		padding: var(--bosluk-6);
	}

	.hk-banner--koyu .hk-banner__eylem {
		min-width: 0;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hk-banner--serit {
		grid-template-columns: auto minmax(0, 1fr);
	}

	.hk-banner--serit .hk-banner__baglanti {
		grid-column: 1 / -1;
		justify-self: start;
	}

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

	.hk-banner__gorsel {
		min-height: 0;
		aspect-ratio: 16 / 10;
	}

	.hk-banner--gorsel .hk-banner__govde {
		padding: var(--bosluk-6);
	}
}

@container (max-width: 599px) {

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

	.hk-banner__metin {
		font-size: 16px;
		line-height: 24px;
	}

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

	.hk-banner--koyu .hk-banner__eylem {
		grid-template-columns: minmax(0, 1fr);
	}

	.hk-banner--serit {
		padding: var(--bosluk-4);
		align-items: start;
	}

	.hk-banner--gorsel .hk-banner__govde {
		padding: var(--bosluk-5);
	}

	.hk-banner--gorsel .hk-dugme-dizisi {
		display: grid;
		width: 100%;
	}
}

/* === BÖLÜM KİTAPLIĞI · BANNER sonu === */

/* === ÜST ALAN HAREKETİ başı === */

/* Motion ana sayfanın üst alan davranışları bütün şablonlarda (Beest kararı, 16
   Ekim 2026: "tamam yaz sonra her şablona
   navbarı entegre et"). menu_a.py üst alana hk-ust-alan--hareket sınıfını
   ekler; kurallar yalnızca bu sınıfın altında
   (menü denemeleri ve esneklik panoları değişmez). Süreler ve eğriler
   Motion'dakiler. Kaydırınca açık temada üst alan
   yarı saydam ve arkası bulanık; panel ya da mobil menü açıkken opak ve
   gölgesiz. Ana menü bağlantısının altındaki çizgi
   üzerine gelince soldan dolar; bulunulan bölümde ve açık panelin düğmesinde
   vurgu renginde. Panel ve mobil menü perde
   gibi açılır (clip-path), panel öğeleri sırayla belirir (data-sira, --sira);
   kapanırken de canlanır (data-kapanan,
   ortak.MENU_JS 500 ms sonra gizler; kapanırken tıklama almaz). Örtü yumuşakça
   kararır, arkası bulanır. Menü
   düğmesindeki üç çizgi X'e döner. İlerleme çizgisi yalnızca ana sayfada
   (hk-ust-alan__ilerleme,
   anasayfa.ust_alan_ana). Hareket azaltma açıkken tasarım sistemi bütün
   canlandırmaları kapatır; kapanan öğe o zaman
   hemen gizlenir. */
.hk-ust-alan--hareket,
.hk-ust-alan--hareket + .hk-ust-ortu {
	--hk-egri: cubic-bezier(0.2, 0.7, 0.2, 1);
	--hk-egri-yumusak: cubic-bezier(0.16, 1, 0.3, 1);
}

.hk-ust-alan--hareket.hk-ust-alan--yapiskan {
	transition: background-color 0.5s var(--hk-egri), border-color 0.5s var(--hk-egri), box-shadow 0.5s var(--hk-egri);
}

.hk-ust-alan--hareket :is(.hk-arama__alan, .hk-ana-menu__baglanti, .hk-ust-alan__menu-satiri) {
	transition: background-color 0.5s var(--hk-egri), color 0.5s var(--hk-egri), border-color 0.5s var(--hk-egri), box-shadow 0.3s var(--hk-egri);
}

.hk-ust-alan--hareket .hk-dugme {
	transition: background-color 0.35s var(--hk-egri), color 0.35s var(--hk-egri), border-color 0.35s var(--hk-egri), box-shadow 0.35s var(--hk-egri);
}

.hk-ust-alan--hareket .hk-ust-alan__logo img {
	transition: opacity 0.5s var(--hk-egri), visibility 0.5s;
}

.hk-ust-alan--hareket[data-theme="acik"] {
	background: color-mix(in srgb, var(--yuzey) 90%, transparent);
	border-bottom-color: color-mix(in srgb, var(--cizgi) 70%, transparent);
	-webkit-backdrop-filter: saturate(1.4) blur(14px);
	backdrop-filter: saturate(1.4) blur(14px);
	box-shadow: 0 10px 30px rgb(35 37 37 / 0.07);
}

.hk-ust-alan--hareket[data-menu-acik="true"] {
	background: var(--yuzey);
	box-shadow: none;
}

/* ana menü: alttaki çizgi (önceki alt kenarlığın yerinde, yazının
   genişliğinde) */
.hk-ust-alan--hareket .hk-ana-menu__baglanti {
	position: relative;
}

.hk-ust-alan--hareket .hk-ana-menu__baglanti,
.hk-ust-alan--hareket .hk-ana-menu__baglanti:is(:hover, [aria-current], [aria-expanded="true"]) {
	border-bottom-color: transparent;
}

.hk-ust-alan--hareket .hk-ana-menu__baglanti::after {
	content: "";
	position: absolute;
	left: var(--bosluk-3);
	right: var(--bosluk-3);
	bottom: calc(-1 * var(--kenar-kalin));
	height: var(--kenar-kalin);
	background: var(--metin-baslik);
	transform: scaleX(0);
	transform-origin: 100% 50%;
	transition: transform 0.5s var(--hk-egri-yumusak), background-color 0.3s var(--hk-egri);
}

.hk-ust-alan--hareket .hk-ana-menu__baglanti:hover::after {
	transform: scaleX(1);
	transform-origin: 0 50%;
}

.hk-ust-alan--hareket .hk-ana-menu__baglanti:is([aria-current], [aria-expanded="true"])::after {
	transform: scaleX(1);
	background: var(--vurgu);
}

.hk-ust-alan--hareket :is(.hk-ana-menu__baglanti, .hk-mobil-satir-m) .hk-simge {
	transition: transform 0.5s var(--hk-egri-yumusak);
}

/* paneller: perde gibi açılır, öğeler sırayla belirir; kapanan panel
   öbürünün altında kalır */
.hk-ust-alan--hareket .hk-panel-ma {
	border-bottom: var(--kenar-ince) solid var(--cizgi);
	box-shadow: 0 24px 60px rgb(35 37 37 / 0.18);
	animation: hk-ust-perde-ac 0.7s var(--hk-egri-yumusak) backwards, hk-ust-belir 0.4s var(--hk-egri) backwards;
}

.hk-ust-alan--hareket[data-kapanan="urunler"] #urunler-menusu,
.hk-ust-alan--hareket[data-kapanan="hizmetler"] #hizmetler-menusu {
	z-index: calc(var(--katman-menu) - 1);
	pointer-events: none;
	animation: hk-ust-perde-kapa 0.7s var(--hk-egri-yumusak) both, hk-ust-sol 0.4s var(--hk-egri) both;
}

.hk-ust-alan--hareket .hk-panel-ma [data-sira] {
	animation: hk-ust-yuksel 0.7s var(--hk-egri-yumusak) backwards, hk-ust-belir 0.5s var(--hk-egri) backwards;
	animation-delay: calc(var(--sira, 0) * 35ms + 80ms);
}

/* örtü: yumuşakça kararır, arkası bulanır; menü kapanırken solar */
.hk-ust-alan--hareket + .hk-ust-ortu {
	background: rgb(26 28 28 / 0.45);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	animation: hk-ust-belir 0.5s var(--hk-egri) backwards;
}

.hk-ust-alan--hareket[data-menu-acik="false"] + .hk-ust-ortu {
	pointer-events: none;
	animation: hk-ust-sol 0.5s var(--hk-egri) both;
}

/* mobil menü: perde gibi açılır ve kapanır */
.hk-ust-alan--hareket .hk-mobil-m--ust {
	box-shadow: 0 24px 60px rgb(35 37 37 / 0.2);
	animation: hk-ust-perde-ac 0.7s var(--hk-egri-yumusak) backwards;
}

.hk-ust-alan--hareket[data-kapanan="mobil"] .hk-mobil-m--ust {
	pointer-events: none;
	animation: hk-ust-perde-kapa 0.7s var(--hk-egri-yumusak) both;
}

/* Açılış canlandırmaları bitince öğe kendi stiline döner (backwards: üzerine
   gelme durumları çalışır, perde gölgeyi
   kesmez); kapanışlar son karede kalır (both), öğe gizlenene kadar görünmez.
   Perde gölge kesilmesin diye 80 px aşağıda biter. */
@keyframes hk-ust-perde-ac {

	from {
		clip-path: inset(0 0 100% 0);
	}

	to {
		clip-path: inset(0 0 -80px 0);
	}
}

@keyframes hk-ust-perde-kapa {

	from {
		clip-path: inset(0 0 -80px 0);
	}

	to {
		clip-path: inset(0 0 100% 0);
	}
}

@keyframes hk-ust-belir {

	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes hk-ust-sol {

	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}

@keyframes hk-ust-yuksel {

	from {
		transform: translateY(10px);
	}

	to {
		transform: none;
	}
}

/* menü düğmesi: üç çizgi, menü açıkken X */
.hk-ust-alan--hareket .hk-menu-ikon {
	position: relative;
	display: block;
	flex: none;
	width: var(--simge);
	height: var(--simge);
}

.hk-ust-alan--hareket .hk-menu-ikon > span {
	position: absolute;
	left: 3px;
	right: 3px;
	height: 2px;
	border-radius: 1px;
	background: currentcolor;
	transition: transform 0.5s var(--hk-egri-yumusak), opacity 0.3s var(--hk-egri);
}

.hk-ust-alan--hareket .hk-menu-ikon > span:nth-child(1) {
	top: 4px;
}

.hk-ust-alan--hareket .hk-menu-ikon > span:nth-child(2) {
	top: 9px;
}

.hk-ust-alan--hareket .hk-menu-ikon > span:nth-child(3) {
	top: 14px;
}

.hk-ust-alan--hareket [aria-expanded="true"] > .hk-menu-ikon > span:nth-child(1) {
	transform: translateY(5px) rotate(45deg);
}

.hk-ust-alan--hareket [aria-expanded="true"] > .hk-menu-ikon > span:nth-child(2) {
	opacity: 0;
	transform: scaleX(0.2);
}

.hk-ust-alan--hareket [aria-expanded="true"] > .hk-menu-ikon > span:nth-child(3) {
	transform: translateY(-5px) rotate(-45deg);
}

/* ilerleme çizgisi (yalnızca ana sayfada): üst alanın alt kenarında, sayfa
   kaydıkça soldan dolar */
.hk-ust-alan--hareket .hk-ust-alan__ilerleme {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	z-index: calc(var(--katman-menu) + 1);
	height: 2px;
	pointer-events: none;
}

.hk-ust-alan--hareket .hk-ust-alan__ilerleme > span {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, var(--koyu-mavi), var(--logo-mavisi));
	transform: scaleX(var(--ilerleme, 0));
	transform-origin: 0 50%;
	box-shadow: 0 0 10px rgb(0 158 227 / 0.6);
}

@media (prefers-reduced-motion: reduce) {

	.hk-ust-alan--hareket[data-kapanan="urunler"] #urunler-menusu,
	.hk-ust-alan--hareket[data-kapanan="hizmetler"] #hizmetler-menusu,
	.hk-ust-alan--hareket[data-kapanan="mobil"] .hk-mobil-m--ust,
	.hk-ust-alan--hareket[data-menu-acik="false"] + .hk-ust-ortu {
		display: none;
	}
}

/* Mobil menü açıkken alttaki talep çubuğu (ürün, hizmet ve proje sayfası) aşağı
   kayıp gizlenir: menünün altını örtmez,
   menünün sonundaki Ara, WhatsApp ve e-posta görünür (denetim raporundaki
   düzeltme; Beest onayı, 17 Ekim 2026). Menü
   kapanınca geri gelir. Gizliyken odak almaz (visibility). */
.hk-ust-alan--hareket ~ .hk-mobil-cubuk {
	transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s;
}

.hk-ust-alan--hareket[data-menu-acik="true"] ~ .hk-mobil-cubuk {
	transform: translateY(100%);
	visibility: hidden;
	transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.5s;
}

/* === ÜST ALAN HAREKETİ sonu === */