/**
 * Harvekon · WordPress uyum stilleri (PLAN, K56).
 *
 * Paketin stilleri (assets/paket/css/) değiştirilmeden yüklenir; bu dosya
 * onlardan sonra gelir. Her kuralın gerekçesi üstünde yazılıdır. Tasarımı
 * değiştiren bir kural buraya sorulmadan eklenmez (K38).
 */

/*
 * Palet köprüsü (K44, K56): paketin ana renkleri theme.json paletinden gelir;
 * Harvekon genel stillerde paletteki bir rengi değiştirince paketteki
 * bileşenler de değişir. tokens.css ana renkleri hem :root'ta hem de her açık
 * bölümde ([data-theme="acik"]) yeniden tanımlar; köprü aynı seçiciyle ve
 * ondan sonra yüklenir. Koyu bölümler ([data-theme="koyu"]) yalnızca
 * anlamsal değişkenleri değiştirir; onlar da bu ana renklere bağlıdır.
 * Sınır: paketteki saydamlıklı rgb() ve #hex sabitleri, yazı boyları ve
 * boşluklar bağlanmaz.
 */
:root,
[data-theme="acik"] {
	--logo-mavisi: var(--wp--preset--color--logo-mavisi);
	--koyu-mavi: var(--wp--preset--color--koyu-mavi);
	--grafit: var(--wp--preset--color--grafit);
	--koyu-gri: var(--wp--preset--color--koyu-gri);
	--acik-gri: var(--wp--preset--color--acik-gri);
	--cok-acik-gri: var(--wp--preset--color--cok-acik-gri);
	--beyaz: var(--wp--preset--color--beyaz);
	--hata: var(--wp--preset--color--hata);
}

/*
 * Ana sayfanın palet köprüsü (K56, K72): ana-sayfa.css ana renklerini
 * yalnızca :root'ta tanımlar. Altı ad yukarıdaki köprüyle aynı (koyu-mavi,
 * grafit, koyu-gri, acik-gri, beyaz, hata); iki ad yalnızca ana sayfada var
 * ve burada bağlanır. Öbür şablonlar bu adları kullanmaz.
 * Sınır: --gece (grafitin derin tonu) paletin dışındadır; ana-sayfa.css'teki
 * #hex sabitleri (SVG çizimlerin içi dahil) ve saydamlıklı rgba() değerleri
 * bağlanmaz.
 */
:root {
	--mavi: var(--wp--preset--color--logo-mavisi);
	--kagit: var(--wp--preset--color--cok-acik-gri);
}

/*
 * Logonun dokunma alanı (Aşama 3.5, erişilebilirlik farkı c; Beest kararı,
 * 17 Ekim 2026): 600 px altında logo bağlantısı 32 px yüksek; tasarım
 * sisteminin dokunma hedefi 40 px. Görünmeyen bir genişletme tıklama alanını
 * 40 px yapar; bağlantının kutusu ve görünüşü değişmez.
 */
@container (max-width: 599px) {

	.hk-ust-alan__logo {
		position: relative;
	}

	.hk-ust-alan__logo::after {
		position: absolute;
		inset: -4px 0;
		content: "";
	}
}

/*
 * Aynı genişletme ana sayfada (K66 c, K72): ana-sayfa.css logoyu 600 px
 * altında 32 px yapar; paket burada kap sorgusu değil medya sorgusu kullanır.
 */
@media (max-width: 599px) {

	.ust__logo {
		position: relative;
	}

	.ust__logo::after {
		position: absolute;
		inset: -4px 0;
		content: "";
	}
}

/*
 * Üst alandaki odak (K114): kökün `scroll-padding-top`'u odaklanan öğeyi
 * yapışkan üst alanın altına getirir (sablon-temeli.css 152 px; ana sayfada
 * ana-sayfa.js üst alanın boyu + 16 px yazar, satır içi). Odak üst alanın
 * içindeyken tarayıcı imleci ya da öğeyi bu payın altına getirmek için sayfayı
 * yukarı kaydırıyordu; öğe üst alanla yerinde kaldığı için her tuşta yeniden:
 * aşağıdayken arama kutusuna yazınca her harfte sayfa kayıyor (1440 px'te
 * 115, 375 px'te 59 px), ok tuşunda ve Tab'la üst alana girerken başa
 * dönüyordu. Üst alandaki öğe her zaman görünür; pay odak üst alanın
 * dışındayken kalır. `!important`: ana sayfadaki pay satır içi stil.
 */
html:has(.ust :focus),
html:has(.hk-ust-alan--yapiskan :focus) {
	scroll-padding-top: 0 !important;
}

/*
 * Lenis 1.3.27'nin kendi stilleri (lenis/dist/lenis.css; MIT, Copyright (c)
 * 2024 darkroom.engineering; lisans: assets/kutuphaneler/). Ana sayfanın
 * stilleri (ana-sayfa.css) bunları kendisi içerir; öbür şablonlar için burada.
 * Kurallar aynen alındı, yalnızca girinti depodaki biçime çevrildi.
 */
html.lenis,
html.lenis body {
	height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
	overflow: clip;
}

.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical],
.lenis [data-lenis-prevent-horizontal] {
	overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
	pointer-events: none;
}

.lenis.lenis-autoToggle {
	transition-property: overflow;
	transition-duration: 1ms;
	transition-behavior: allow-discrete;
}

/*
 * Ürün modalının boş satırları (K49, K76): paketteki modal her zaman görselli,
 * kodlu ve markalı tek ürünü gösterir. Sitede modal tıklanan ürünle dolar;
 * görseli, kodu, markası ya da kategorisi olmayan üründe o satır `hidden`
 * özniteliğiyle gizlenir (assets/js/urun-teklif.js). Paketin stilleri pafta
 * ve bilgi satırlarına `display` verdiği için tarayıcının `[hidden]` kuralı
 * ezilir; bu kural onu geri getirir. Dolu satırların görünüşü değişmez.
 */
.hk-teklif-m__pafta[hidden],
.hk-teklif-m__bilgi > [hidden] {
	display: none;
}

/*
 * Proje kartındaki bağlantılar (K76, K79): paketteki proje kartının
 * "Kullanılan ürün ve hizmetler" satırı köşeli parantezli bir yer tutucu
 * metindir; sitede ürün ve hizmet sayfalarına bağlantılardır. Paketin
 * stillerinde bu satırdaki `a` için kural yok; tarayıcının varsayılan rengi
 * (#0000EE) koyu kartta 1,5:1 kontrast verir. Paketin metin içi bağlantı
 * kalıbı (.hk-uyari-k__metin a) uygulanır: başlık rengi, alt çizgi,
 * üzerine gelince bağlantı rengi.
 */
.hk-vaka-karti__ayrinti dd a {
	color: var(--metin-baslik);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.hk-vaka-karti__ayrinti dd a:hover {
	color: var(--baglanti);
}

/*
 * Sayfalamanın N. sayfası (K78, R9; tasarım uzantısı): paket yalnızca 1.
 * sayfanın sayfalamasını çiziyor (en çok altı öğe; dar kapta ok yazıları
 * gizlenir ve tek satıra sığar). N. sayfada Önceki, 1, "…", N−1, N, N+1,
 * "…", son, Sonraki dokuz öğedir; dar kapta iki satıra düşer. Paketin aynı
 * eşiğinde (599 px) "…"ya komşu N−1 ve N+1 (`data-komsu`) gizlenir; yedi öğe
 * tek satıra sığar. Geniş kapta görünüş değişmez.
 */
@container (max-width: 599px) {

	.hk-sayfalama li[data-komsu] {
		display: none;
	}
}

/*
 * Proje sayfasının künyesi ve kapsamı (6b; tasarım uzantısı): paket fotoğraf
 * yerlerini yer tutucu kutuyla (.hk-gorsel-yeri) çiziyor; sitede projenin
 * fotoğrafı paketin görsel kutusundadır (.hk-gorsel-kutusu--kapla). Kutuya
 * paketteki yer tutucunun ölçüleri uygulanır: masaüstünde tablonun boyunu
 * iki satırda paylaşır (tek fotoğrafta tek satır), dar kapta 3:2. Kullanılan
 * ürünler paketteki çipte (.hk-urunler-p li) düz metindir; sitede ürün
 * sayfasına bağlantıdır: çipin rengi, alt çizgi (tarayıcının varsayılan
 * bağlantı rengi mavi kartta okunmaz).
 */
.hk-kunye-p__fotolar .hk-gorsel-kutusu {
	position: relative;
	aspect-ratio: auto;
	height: 100%;
	min-height: 160px;
}

/* Fotoğrafın kendi yüksekliği satırı büyütmesin: boy tablodan gelir. */
.hk-kunye-p__fotolar .hk-gorsel-kutusu > img {
	position: absolute;
	inset: 0;
}

.hk-kunye-p__fotolar:has(> :only-child) {
	grid-template-rows: minmax(0, 1fr);
}

.hk-urunler-p a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.hk-urunler-p a:hover {
	text-decoration-thickness: 2px;
}

@container (max-width: 959px) {

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

	.hk-kunye-p__fotolar:has(> :only-child) {
		grid-template-rows: none;
	}
}

/*
 * Yazar kutusu (7a): pakette fotoğrafın yerinde "Fotoğraf" yer tutucusu
 * (`.hk-gorsel-yeri--kare`) var; sitede yazarın kendi fotoğrafı `img` olarak
 * aynı kare kutuyu doldurur. Fotoğraf yoksa kutu basılmaz (Beest kararı,
 * 19 Ekim 2026), metin sütunu tam genişlik olur.
 */
.hk-yazar__foto {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--kose-orta);
}

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

/*
 * Çekirdeğin görsel bloğu (7a, K62 ek denetim 2): çekirdek görselin yazısına
 * `.wp-block-image :where(figcaption)` ile .5em üst, 1em alt boşluk verir.
 * Paketin yazı gövdesinde yazıyla görsel arasındaki boşluğu `figure` ızgarası
 * (`.hk-icerik figure`, gap) verir; çekirdeğin boşluğu üstüne eklenmesin.
 */
.hk-icerik .wp-block-image figcaption {
	margin: 0;
}

/*
 * Blog listesi (7b): pakette yazı kartının ve öne çıkan yazının görsel alanında
 * çizim var (`.hk-cizim-alani > svg`, `.hk-one-cikan-bg__cizim > svg`). Yazının
 * öne çıkan görseli (fotoğraf) aynı alanı doldurur: kartta 16:9 kutu,
 * öne çıkan yazıda iç boşluksuz bütün alan.
 */
.hk-yazi-karti-bg > .hk-cizim-alani > img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hk-one-cikan-bg__cizim:has(> img) {
	position: relative;
	padding: 0;
}

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

/*
 * Harita (7c): pakette haritanın yerinde yer tutucu çizim var
 * (`.hk-harita-i__cizim`, kutuyu dolduran SVG). Ayardaki statik harita
 * görseli aynı kutuyu doldurur; not ve atıf görselin üstünde kalır.
 */
.hk-harita-i__gorsel {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * Google Haritalar (K115): iframe paketteki kutuyu doldurur; kenar ve köşe
 * kutunun. Yüklenene kadar kutunun ızgarası görünür. Klavyeyle haritaya
 * girilince odak halkasını Google haritanın içinde çizer (kartın bağlantıları,
 * düğmeler); odak çocuk belgedeyken üst belgede :focus eşleşmez. Google'ın
 * haritası betik ister: betiksiz kipte boş kutunun ortasında kaydın
 * bağlantısı (`<noscript>`).
 */
.hk-harita-i__cerceve {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.hk-harita-i__betiksiz {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	padding: var(--bosluk-4);
}

/*
 * Uygulama gezgini (K105; Beest, 21 Ekim 2026): kartın iki sütunlu olduğu
 * genişlikte bütün kartlar en uzun kartın boyunda (`--hk-gezgin-kart-boy`,
 * uygulamalar.js ölçer; betiksiz paketteki 480 px), Teklif iste ve WhatsApp
 * kartın altında. Pakette kart en az 480 px'ti, metni uzun kartta uzuyor,
 * düğmeler metnin altında kartlar arasında yer değiştiriyordu. Telefonda
 * (tek sütunlu kart) paketteki gibi.
 */
@container (min-width: 720px) {

	.hk-gezgin-u__kart {
		min-height: max(480px, var(--hk-gezgin-kart-boy, 0px));
	}

	.hk-gezgin-u__icerik {
		display: flex;
		flex-direction: column;
	}

	.hk-gezgin-u__icerik > .hk-dugme-dizisi {
		margin-top: auto;
	}
}

/*
 * Önizleme notu (7ç, K91): uygulamanın ve videonun önizlemesinde gezginin
 * başında, yalnızca kaydı düzenleyebilen kullanıcıya. Pakette karşılığı yok
 * (yayında hiç basılmaz); paketin renk ve yazı belirteçleriyle sade bir kutu.
 */
.hk-onizleme-notu {
	margin: 0 0 var(--bosluk-5);
	padding: var(--bosluk-3) var(--bosluk-4);
	border: var(--kenar-ince) dashed var(--logo-mavisi);
	border-radius: var(--kose-kucuk);
	background: var(--beyaz);
	color: var(--grafit);
	font-family: var(--font-sans);
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
}

/*
 * 404, kırık bağlantı kutusu (7d, K94): konu pakette kısa bir yer tutucu
 * ("Kırık bağlantı: [Bulunamayan adres]"), sitede gerçek adres (en çok 300
 * karakter). Paketin `white-space: nowrap`'ı uzun adreste kutuyu taşırıyordu
 * (1440 px'te 113 karakterlik adresle 374 px yatay taşma, metin sütunu 0).
 * Değer paketin 599 px altındaki kuralıyla her genişlikte kırılır; geniş
 * düzende konu kutusu en çok 440 px (metin sütunu daralıp kaybolmasın).
 */
.hk-bildir-bl__konu-deger {
	white-space: normal;
	overflow-wrap: anywhere;
}

@container (min-width: 1200px) {

	.hk-bildir-bl__konu {
		max-width: 440px;
	}
}

/*
 * Işık bandı (9. adım, K97; K72'deki kural bütün şablonlara): paketin
 * `.hk-gs--bant .hk-gs__oge` giriş canlandırması (`hk-gir`, 0,7 sn ve sıra
 * gecikmesi, `backwards`) ve rakamların 0'dan sayması (`hk-say`, 1,6 sn)
 * kategori, Uygulamalar, Projeler ve Hakkımızda'nın ilk ekranındaki bandı
 * yaklaşık 1 saniye gizli ve eksik gösteriyordu; saf CSS olduğu için
 * betiksiz kipte de. CLAUDE.md kural 10: ilk ekran gizli başlamaz. Paketin
 * hareket azaltma kuralının aynısı: bant baştan görünür, sayı kendi metniyle.
 */
.hk-gs--bant .hk-gs__oge {
	animation: none;
}

.hk-gs__sayi {
	color: inherit;
}

.hk-gs__sayi::after {
	content: none;
}

/*
 * Kontrast (9. adım, K97; CLAUDE.md kural 9, en az 4,5:1). Paketteki iki
 * küçük metin eşiğin altında kalıyordu:
 * - ürün galerisinin "1/5" sayısı: yarı saydam grafit etikette logo mavisi,
 *   açık fotoğrafta yaklaşık 2,9:1; etiketin öbür metni gibi beyaz (8:1'in
 *   üstünde);
 * - arama şeridindeki sonuç sayısı rozeti: logo mavisi zeminde %75 opaklıkta
 *   grafit, 3,5:1; tam opak grafit 5,1:1.
 */
.hk-galeri__etiket b {
	color: var(--beyaz);
}

.hk-capalar-ar .hk-capalar-k__sayi {
	opacity: 1;
}

/*
 * Teklif formları Contact Form 7'den (Aşama 6.1, K100). CF7'nin kendi CSS'i
 * yüklenmez (`wpcf7_load_css`); aşağıdakiler formun işlemesi için gereken
 * kurallar ve CF7'nin eklediği öğelerin paketteki karşılıkları.
 *
 * CF7'nin işaretlemesi: alanın çevresinde `span.wpcf7-form-control-wrap`,
 * formun başında gizli alan kümesi, sonunda yanıt alanı, formun önünde ekran
 * okuyucu iletisi. Bunlar CF7'nin stilindeki gibi gizlenir.
 */
.wpcf7 .screen-reader-response {
	position: absolute;
	overflow: hidden;
	clip-path: inset(50%);
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow-wrap: normal !important;
}

.wpcf7 .hidden-fields-container {
	display: none;
}

.wpcf7-form-control-wrap {
	position: relative;
	display: block;
}

/*
 * Doğrulama: paketin hata durumlarının yalnızca stili var, işaretlemesi yok
 * (bilesenler.css'teki `.hk-alan--hata`, `.hk-alan__hata`,
 * `.hk-form-mesaji--hata`). CF7'nin hatalı alanı ve ipucu aynı görünümle;
 * ana sayfadaki `aria-invalid` kuralı pakette var (ana-sayfa.css).
 */
.hk-alan .wpcf7-not-valid.hk-alan__girdi {
	border: var(--kenar-kalin) solid var(--hata);
	padding: calc(var(--bosluk-3) - 1px);
}

.hk-alan .wpcf7-not-valid-tip,
.alan .wpcf7-not-valid-tip,
.wpcf7-form .hk-dogrulama-ipucu {
	display: block;
	margin-top: var(--bosluk-2, 8px);
	color: var(--hata);
	font-family: var(--font-sans);
	font-size: 14px;
	line-height: 22px;
	font-weight: 600;
}

/*
 * Turnstile işaretlenmeden gönderilince kutunun altındaki ileti
 * (teklif-ortak.js), kutuya yakın.
 */
.wpcf7-form .hk-dogrulama-ipucu {
	margin-top: calc(-1 * var(--bosluk-2, 8px));
}

/*
 * Yanıt alanı: başarı iletisi paketteki gibi formun üstünde
 * (`.hk-teklif-m__sonuc`, `.teklif__sonuc`); CF7'nin alttaki alanı yalnızca
 * hata, istenmeyen ileti ve gönderim hatasında, paketteki hata iletisinin
 * görünümüyle görünür.
 */
.wpcf7-form .wpcf7-response-output {
	display: none;
}

.wpcf7-form:is(.invalid, .unaccepted, .spam, .failed, .aborted) .wpcf7-response-output {
	display: block;
	padding: var(--bosluk-4, 16px);
	border: var(--kenar-kalin, 2px) solid var(--hata);
	border-radius: var(--kose-orta, 4px);
	background: var(--yuzey, #fff);
	color: var(--metin-baslik, inherit);
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 26px;
}

/*
 * Turnstile: paketteki kesik çizgili kutu widget'ın yer tutucusu; gerçek
 * widget gelince çerçeve kalkar, ölçü kalır. Anahtar tanımlı değilse
 * (`[turnstile]` boş) kutu görünmez.
 */
.hk-form__dogrulama:has(.cf-turnstile),
.form__dogrulama:has(.cf-turnstile) {
	border: 0;
}

.hk-form__dogrulama:empty,
.form__dogrulama:empty {
	display: none;
}

/*
 * Ana sayfanın formu: paketteki sırayla giriş canlandırması (`nth-child`,
 * ana-sayfa.css) formun çocuklarını sayar; CF7'nin başa eklediği gizli alan
 * kümesi sırayı bir adım kaydırıyor. Gecikmeler paketteki sırayla.
 */
.teklif.acik .form.wpcf7-form > *:nth-child(2) {
	animation-delay: 0s;
}

.teklif.acik .form.wpcf7-form > *:nth-child(3) {
	animation-delay: 0.05s;
}

.teklif.acik .form.wpcf7-form > *:nth-child(4) {
	animation-delay: 0.1s;
}

.teklif.acik .form.wpcf7-form > *:nth-child(5) {
	animation-delay: 0.15s;
}

.teklif.acik .form.wpcf7-form > *:nth-child(6) {
	animation-delay: 0.2s;
}

.teklif.acik .form.wpcf7-form > *:nth-child(7) {
	animation-delay: 0.25s;
}

.teklif.acik .form.wpcf7-form > *:nth-child(8) {
	animation-delay: 0.3s;
}

.teklif.acik .form.wpcf7-form > *:nth-child(n + 9) {
	animation-delay: 0.35s;
}

/*
 * Ürün modalının görsel kutusu (paketteki `.hk-teklif-m__pafta`; K49, paket
 * eki 4). Kutu 4:3 oranlı bir ızgara; görsel `height: 100%` ve
 * `object-fit: contain` ile içine sığar. Paketin örnek görseli kareye yakın;
 * dik bir ürün görselinde (ör. 182×400) ızgaranın satırı görselin
 * yüksekliğine uzuyor, kutu 4:3'ten çıkıp sol paneli ve modalı taşırıyordu.
 * Satır ve sütun kutunun kendi ölçüsüne bağlanır; görsel kutunun içinde
 * küçülür, oranı korunur.
 */
.hk-teklif-m__pafta {
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: minmax(0, 1fr);
	min-height: 0;
}

.hk-teklif-m__pafta > img {
	min-width: 0;
	min-height: 0;
}