/* ============================================================================
 * İnsan Kaynakları sayfası (page-insan-kaynaklari.php, slug
 * insan-kaynaklari). Başlık, breadcrumb ve dış container product-archive.css
 * ORTAK gelir (aynı hizalama — Tarihçe / Değerlerimiz / Kalite Politikamız
 * ile birebir aynı). Sadece bu sayfaya özel: 4 dikey kart (Kariyer Yönetimi,
 * İnsan Kaynakları Yaklaşımımız, Çalışan İmkanları, Genel Başvuru) ve Genel
 * Başvuru kartındaki Contact Form 7 formu.
 *
 * XD "İnsan Kaynakları" artboard'undan (native 1920,
 * artboard-d83c1a3e-0b9c-4cba-b1da-d35a4c8a1f30 — Tada.xd, extracted via
 * graphicContent.agc layer tree — 4 kart arkaplan rect'i "Rectangle 679/780/
 * 781/737", her biri x=140 y=[-125,405,935,1465] genişlik 1640, ilk 3'ü
 * height 460, Genel Başvuru height 825): 4 kart, her biri 1640 genişlik
 * (product-archive.css container formülüyle birebir), görsel sütunu 795×460
 * r30 (ilk 3 kart), Genel Başvuru kartının görseli 794×825 r30 (form daha
 * uzun olduğu için kart da daha uzun). Görsel her zaman kart kenarına tam
 * yaslı (0 dolgu); metin sütunu da TAM AYNI genişlikte (795 native — kart
 * arkaplanının sol/sağ kenarına göre iki sütun da 1640-795-50(gap)=795,
 * yani gerçek %50/%50 bölünme, 1.05fr değil), aralarındaki gap 50 native
 * (kariyer başlığının x'i: 6242, kart sol kenarı: 6192 → 50 dolgu). Başlık
 * Montserrat ExtraBold 32px (32/19.2=1.67vw), paragraf Montserrat Regular
 * 16px/line-height 1.5 (satır aralığı ölçümü: iki satırlı paragrafların
 * satır y-offsetleri 15→39, delta 24 = 16×1.5). Kartlar arası dikey boşluk
 * 70 native (card2 top 405 - card1 bottom 335 = 70 → 70/19.2=3.65vw).
 * "Açık Pozisyonlarımız"/"Genel Başvuru" butonları bu artboard'ın kendi
 * graphicContent.agc katman ağacında metin/şekil olarak YOK (muhtemelen
 * bağlı bir Symbol/Component örneği XD export'ta düzleştirilmemiş) — buton
 * geometrisi ve içerik sütununun dikey üst/alt dolgusu bu nedenle XD'den
 * birebir çıkarılamadı; yatay dolguyla aynı 50 native değeri simetrik en
 * yakın bilinen değer olarak kullanıldı (CLAUDE.md §10: "en yakın bilinen
 * değeri uygula, TODO olarak işaretle" kuralı) — görsel QA ile teyit
 * edilmeli.
 * ==========================================================================*/

.ik-cards {
	display: flex;
	flex-direction: column;
	gap: clamp(28px, 3.65vw, 70px);
}

/* ---- Kart iskeleti (4 kart de ortak) ---- */
.ik-card {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(24px, 2.6vw, 50px);
	align-items: stretch;
	background: var(--tada-white);
	border: 1px solid var(--tada-gray-200);
	border-radius: clamp(20px, 1.56vw, 30px);
	overflow: hidden;
	margin: 0;
}

/* .ik-card'ın kendi overflow:hidden'ı yalnızca KARTIN dış sınırına denk
   gelen 2 köşeyi yuvarlatır — metinle birleşen iç 2 köşe kare kalırdı.
   Görselin kendi wrapper'ına aynı kart radius token'ını (clamp(20px,
   1.56vw,30px)) ve kendi overflow:hidden'ını vermek, görselin DÖRT
   köşesini de (kart kenarına değsin ya da içerik sütununa değsin) bağımsız
   olarak yuvarlatır. */
.ik-card__media {
	align-self: stretch;
	overflow: hidden;
	border-radius: clamp(20px, 1.56vw, 30px);
}
.ik-card__image {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 795 / 460;
	object-fit: cover;
	border-radius: inherit;
}
/* Genel Başvuru kartı formla birlikte daha uzun — görseli de aynı oranda
   uzatır (XD: 794×825, ~0.96:1) böylece iki sütun her zaman aynı yükseklikte
   kalır. Kart yüksekliği form içeriğine göre native orandan biraz sapabilir
   (bkz. .ik-card--basvuru .ik-card__content); bu durumda object-fit: cover
   varsayılan ortalı kırpma yerine sol tarafa (kadının yüz/gövde konumuna)
   yaslanır, böylece ekstra kırpma her zaman sağdaki (arka plandaki
   meslektaşlar) taraftan gelir — kadının yüzü asla kırpılmaz. */
.ik-card--basvuru .ik-card__image {
	aspect-ratio: 794 / 825;
	object-position: 38% 22%;
}

/* Reuses the exact same "no image selected yet" convention as
   .kalite-empty-state (kalite-politikamiz.css) — a plain neutral box with no
   baked-in text on the public frontend; the hint only prints for logged-in
   editors who can actually fix it. */
.ik-empty-state {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-height: 160px;
	background: var(--tada-gray-100);
	border: 1px dashed var(--tada-gray-400);
	border-radius: inherit;
	box-sizing: border-box;
	padding: 16px;
	text-align: center;
}
.ik-empty-state__hint {
	margin: 0;
	font-family: Montserrat, Arial, sans-serif;
	font-size: 12px;
	line-height: 1.4;
	color: var(--tada-gray-700);
}

.ik-card__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	box-sizing: border-box;
}

/* Görsel sağ sütunda olan kartlar (Kariyer Yönetimi, Çalışan İmkanları):
   içerik sol sütunda, kart kenarına değen tarafı (sol) dolgu alır; gap
   tarafı (sağ) dolgu almaz — görsel gap'in hemen yanından başlar. Dolgu
   değeri (50 native) yatay eksende XD'den birebir ölçüldü (bkz. dosya başı
   notu); dikey üst/alt için XD'de buton geometrisi eksik olduğundan aynı
   değer simetrik en yakın bilinen değer olarak kullanıldı. */
.ik-card--content-left .ik-card__content {
	padding: clamp(26px, 2.6vw, 50px) 0 clamp(26px, 2.6vw, 50px) clamp(26px, 2.6vw, 50px);
}
/* Görsel sol sütunda olan kartlar (İK Yaklaşımımız, Genel Başvuru): içerik
   sağ sütunda, kart kenarına değen tarafı (sağ) dolgu alır; gap tarafı
   (sol) dolgu almaz. Aynı teknik .kalite-policy__content ile birebir. */
.ik-card--reverse .ik-card__content {
	padding: clamp(26px, 2.6vw, 50px) clamp(26px, 2.6vw, 50px) clamp(26px, 2.6vw, 50px) 0;
}
/* Genel Başvuru kartında form, başlık/açıklamadan belirgin biçimde daha
   uzun — içerik sütununu üstten hizalamak (ortalamak yerine) başlığı
   kartın tepesinde, görselle aynı hizada tutar. Üst dolgu XD'den birebir
   ölçüldü: "Genel Başvuru" başlığı kart üst kenarından 81 native piksel
   aşağıda başlıyor (81/19.2=4.22vw). Alt dolgu XD'de buton geometrisi
   eksik olduğundan diğer kartların 50-native değeriyle simetrik tutuldu.
   Bu, ≤1024 (mobil/tablet) için hâlâ geçerli taban değer — masaüstüne özel
   kompakt sürüm aşağıdaki @media (min-width:1025px) bloğunda. */
.ik-card--basvuru .ik-card__content {
	justify-content: flex-start;
	padding-top: clamp(28px, 4.22vw, 81px);
	padding-bottom: clamp(26px, 2.6vw, 50px);
}

/* 32px native (32/19.2=1.67vw), Montserrat ExtraBold — XD'de tek satır
   ("Çalışanlarımıza Sunduğumuz İmkanlar" dahil, 36 karakter). Önceki
   2.2vw değeri XD'nin gerçek oranından çok daha büyüktü (1440'ta ~32px
   render ediyordu, 24px olması gerekirken) — bu yüzden başlıklar hem
   büyük görünüyor hem de üçüncü kart başlığı iki satıra düşüyordu; doğru
   1.67vw ile 1440'ta ~24px'e iner ve tek satıra sığar. */
.ik-card__title {
	margin: 0 0 clamp(16px, 1.98vw, 38px);
	font-family: Montserrat, Arial, sans-serif;
	font-weight: 800;
	font-size: clamp(22px, 1.67vw, 32px);
	line-height: 1.2;
	color: var(--tada-black);
}
/* 16px native (16/19.2=0.83vw), Montserrat Regular, line-height 1.5 —
   XD'deki iki satırlı paragrafların satır y-offsetleri (15→39, delta 24 =
   16×1.5) ölçülerek doğrulandı. */
.ik-card__description {
	font-family: Montserrat, Arial, sans-serif;
	font-weight: 400;
	font-size: clamp(13px, 0.83vw, 16px);
	line-height: 1.5;
	color: var(--tada-black);
}
/* Genel Başvuru kartına özel, daha sıkı başlık/açıklama boşlukları —
   "Genel Başvuru" ty=1546, açıklama ty=1574 (delta 28); açıklama ty=1574,
   "Adınız" etiketi ty=1674 (delta 100, açıklamanın kendi ~48px'lik iki
   satır yüksekliği düşülünce ~52 net boşluk kalır). Diğer 3 kartın kendi
   (daha geniş, ortalanmış içerikte doğal olarak oluşan) boşluklarına
   dokunmuyor. */
.ik-card--basvuru .ik-card__title {
	margin-bottom: clamp(10px, 1.46vw, 28px);
}
.ik-card--basvuru .ik-card__description {
	margin-bottom: clamp(24px, 2.7vw, 52px);
}
.ik-card__description p {
	margin: 0 0 1em;
}
.ik-card__description p:last-child {
	margin-bottom: 0;
}

/* ---- Butonlar (Açık Pozisyonlarımız / Genel Başvuru) ---- */
.ik-card__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin-top: clamp(20px, 2vw, 32px);
}
.ik-btn {
	display: inline-flex;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	min-height: 56px;
	padding: 15px 32px;
	border: 1.5px solid transparent;
	border-radius: 999px;
	font-family: Montserrat, Arial, sans-serif;
	font-weight: 700;
	font-size: 12px;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .22s ease, color .22s ease, border-color .22s ease;
}
/* Normal zemin --tada-red-active (#9e262d) — kırmızı buton token'ı, genel
   CTA'larda kullanılan daha parlak --tada-red (#b1262d) değil, açıkça
   istenen #9e262d ile eşleşiyor. Hover/focus-visible: #000000 — projenin
   --tada-black token'ı (#111111) değil, açıkça istenen saf siyah. */
.ik-btn--primary {
	background: var(--tada-red-active);
	border-color: var(--tada-red-active);
	color: var(--tada-white);
}
.ik-btn--primary:hover,
.ik-btn--primary:focus-visible {
	background: #000000;
	border-color: #000000;
	color: var(--tada-white);
}
.ik-btn--ghost {
	background: var(--tada-white);
	border-color: var(--tada-gray-400);
	color: var(--tada-black);
}
.ik-btn--ghost:hover,
.ik-btn--ghost:focus-visible {
	background: #000000;
	border-color: #000000;
	color: var(--tada-white);
}

/* ---- Çalışan İmkanları — giriş metni / liste / kapanış ----
   Aynı paragraf tipografisi (16px native / 0.83vw / line-height 1.5) —
   dosya başındaki ölçüm notuna bkz. */
.ik-imkanlar__intro {
	margin: clamp(10px, 1vw, 16px) 0 clamp(6px, 0.6vw, 10px);
	font-family: Montserrat, Arial, sans-serif;
	font-weight: 400;
	font-size: clamp(13px, 0.83vw, 16px);
	line-height: 1.5;
	color: var(--tada-black);
}
.ik-imkanlar__list {
	margin: 0 0 clamp(10px, 1vw, 16px);
	padding: 0;
	list-style: none;
}
.ik-imkanlar__list li {
	position: relative;
	padding-left: 20px;
	font-family: Montserrat, Arial, sans-serif;
	font-size: clamp(13px, 0.83vw, 16px);
	line-height: 1.5;
	color: #000000;
}
.ik-imkanlar__list li::before {
	content: "•";
	position: absolute;
	left: 0;
	color: #000000;
	font-weight: 700;
}
.ik-imkanlar__closing {
	margin: 0;
	font-family: Montserrat, Arial, sans-serif;
	font-size: clamp(13px, 0.83vw, 16px);
	line-height: 1.5;
	color: var(--tada-black);
}

/* ============================================================================
 * Genel Başvuru — Contact Form 7 formu (template-parts/insan-kaynaklari/
 * basvuru.php içinde [contact-form-7] shortcode'u ile render edilir; alan
 * markup'ı inc/acf.php -> tada_seed_insan_kaynaklari_cf7_form()'da tanımlı,
 * sınıf adları burada tanımlananlarla eşleşir: ik-basvuru-form__row/
 * __field/__consent). CF7'nin kendi doğrulama/geri bildirim/AJAX
 * davranışına dokunulmaz — yalnızca görünüm.
 * ==========================================================================*/
/* Form geometrisi XD'den birebir ölçüldü (Rectangle 739/782/744/783/746 —
   Ad/Soyad/E-posta/Telefon/Pozisyon input kutuları): input yüksekliği 60
   native (60/19.2=3.125vw); etiket-input arası 20 native (1.04vw); bir
   satırın input alt kenarından bir sonraki satırın input üst kenarına 67
   native boşluk (label yüksekliği + 20'lik etiket-input aralığı düşülünce
   __field'ın kendi margin-bottom'u ~25 native / 1.3vw kalır); Ad/Soyad
   input kutuları arası yatay boşluk 50 native (2.6vw). Etiket font-size 18
   native (0.94vw) — önceki 13px sabit değerden belirgin biçimde büyük,
   XD'nin gerçek ölçüsüyle eşleşiyor. Input border/radius/focus-visible
   rengi kasıtlı olarak değiştirilmedi. */
.ik-basvuru__form-wrap {
	margin-top: 0;
}
.ik-basvuru-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 clamp(20px, 2.6vw, 50px);
}
.ik-basvuru-form__field {
	display: flex;
	flex-direction: column;
	gap: clamp(6px, 1.04vw, 20px);
	margin: 0 0 clamp(10px, 1.3vw, 25px);
}
.ik-basvuru-form__field label {
	font-family: Montserrat, Arial, sans-serif;
	font-weight: 700;
	font-size: clamp(13px, 0.94vw, 18px);
	color: var(--tada-black);
}
.ik-basvuru-form__field .wpcf7-form-control-wrap {
	display: block;
}
.ik-basvuru-form__field input[type="text"],
.ik-basvuru-form__field input[type="email"],
.ik-basvuru-form__field input[type="tel"] {
	box-sizing: border-box;
	width: 100%;
	height: clamp(40px, 3.125vw, 60px);
	padding: 0 18px;
	background: var(--tada-white);
	border: 1px solid var(--tada-gray-400);
	border-radius: 12px;
	font-family: Montserrat, Arial, sans-serif;
	font-size: 14px;
	color: var(--tada-black);
	transition: border-color .2s ease;
}
.ik-basvuru-form__field input[type="text"]:focus-visible,
.ik-basvuru-form__field input[type="email"]:focus-visible,
.ik-basvuru-form__field input[type="tel"]:focus-visible {
	border-color: var(--tada-red);
}
/* Custom "Dosya Seç" / "Dosya seçilmedi" control — the real
   `<input type="file">` (still fully focusable/keyboard/drag-drop-operable,
   the only thing CF7's own validation touches) is stacked on top via
   opacity:0 + absolute inset:0, so every native click/keyboard/drag
   interaction lands on it directly; the styled button + status span below
   are purely decorative (aria-hidden, see inc/acf.php form markup).
   assets/js/main.js listens for the real input's `change` event to update
   the status span's text — without JS the native (English-locale) control
   still shows through and works normally, nothing breaks. */
/* Pozisyon input'undan dosya kontrolüne, dosya kontrolünden KVKK'ya geçiş
   — XD'de bu iki geçişte de etiket yok (görünür "CV / Dosya Yükleme"
   etiketi kaldırıldı, bkz. inc/acf.php form markup), bu yüzden genel satır
   boşluğundan (25 native) biraz daha dar: 30 native (1.56vw) ölçüldü. */
.ik-basvuru-form__field--file {
	margin-bottom: clamp(12px, 1.56vw, 30px);
}
.ik-basvuru-form__file-control {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 16px;
	max-width: 100%;
}
/* The real input is visually hidden but stays focusable, enabled and in the
   accessibility tree — the visible `.ik-basvuru-form__file-btn` is its <label>,
   so clicking or keyboard-activating it opens the native picker. Deliberately
   NOT the old `inset:0; width:100%; height:100%` overlay: Contact Form 7 sets
   `.wpcf7-form-control-wrap { position: relative }`, which made that wrap the
   input's containing block. The wrap holds no in-flow content, so it computes
   to 0x0 and the overlay collapsed to 0x0 — invisible and unclickable. Sizing
   the input independently of its containing block removes that coupling
   entirely. Never use display:none here: it would drop the input from the
   focus order and from form submission. */
.ik-basvuru-form__file-control input[type="file"] {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
.ik-basvuru-form__file-btn {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	cursor: pointer;
	padding: 12px 26px;
	background: var(--tada-gray-100);
	border: 1px solid var(--tada-gray-200);
	border-radius: 999px;
	font-family: Montserrat, Arial, sans-serif;
	font-weight: 700;
	font-size: 13px;
	color: var(--tada-black);
	white-space: nowrap;
	transition: background-color .22s ease, color .22s ease, border-color .22s ease;
}
.ik-basvuru-form__file-status {
	font-family: Montserrat, Arial, sans-serif;
	font-size: 12.5px;
	color: var(--tada-gray-700);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/* Hover now keys off the label itself rather than the whole control. The button
   renders identically; it just no longer lights up while the pointer is over
   the filename text, which is no longer a click target. */
.ik-basvuru-form__file-btn:hover {
	background: var(--tada-red);
	border-color: var(--tada-red);
	color: var(--tada-white);
}
.ik-basvuru-form__file-control:has(input[type="file"]:focus-visible) .ik-basvuru-form__file-btn {
	outline: 3px solid var(--tada-yellow);
	outline-offset: 2px;
}

/* Onay metni XD'de tam olarak TEK satıra sığacak şekilde 16px (0.83vw,
   diğer gövde metinleriyle aynı ölçek) — XD'nin kendi "paragraphs.lines"
   verisinde bu cümle tek satır olarak kayıtlı. Checkbox-metin arası 14
   native (0.73vw); KVKK'dan Gönder butonuna boşluk 30 native (dosya
   kontrolüyle aynı "etiketsiz geçiş" değeri). */
.ik-basvuru-form__consent {
	margin: 0 0 clamp(12px, 1.56vw, 30px);
	font-family: Montserrat, Arial, sans-serif;
	font-size: clamp(13px, 0.83vw, 16px);
	line-height: 1.5;
	color: var(--tada-black);
}
.ik-basvuru-form__consent .wpcf7-list-item {
	margin: 0;
}
.ik-basvuru-form__consent label {
	display: flex;
	align-items: flex-start;
	gap: clamp(8px, 0.73vw, 14px);
	cursor: pointer;
}
.ik-basvuru-form__consent input[type="checkbox"] {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	accent-color: var(--tada-red);
}
.ik-basvuru-form__consent a {
	color: var(--tada-red-active);
	text-decoration: underline;
}
.ik-basvuru-form__consent a:hover,
.ik-basvuru-form__consent a:focus-visible {
	color: #000000;
}

.ik-basvuru__form-wrap .wpcf7-submit {
	display: inline-flex;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	min-height: 56px;
	padding: 15px 40px;
	background: var(--tada-red);
	border: 1.5px solid var(--tada-red);
	border-radius: 999px;
	font-family: Montserrat, Arial, sans-serif;
	font-weight: 700;
	font-size: 14px;
	color: var(--tada-white);
	cursor: pointer;
	transition: background-color .22s ease, border-color .22s ease;
}
.ik-basvuru__form-wrap .wpcf7-submit:hover,
.ik-basvuru__form-wrap .wpcf7-submit:focus-visible {
	background: var(--tada-red-dark);
	border-color: var(--tada-red-dark);
}
.ik-basvuru__form-wrap .wpcf7-spinner {
	margin-left: 10px;
}
.ik-basvuru-form__field .wpcf7-not-valid-tip {
	display: block;
	margin-top: 6px;
	font-family: Montserrat, Arial, sans-serif;
	font-size: 12px;
	color: var(--tada-red);
}
.ik-basvuru__form-wrap .wpcf7-response-output {
	box-sizing: border-box;
	margin: clamp(16px, 1.6vw, 20px) 0 0;
	padding: 14px 18px;
	border-radius: 12px;
	font-family: Montserrat, Arial, sans-serif;
	font-size: 13px;
	line-height: 1.5;
}
.ik-basvuru__form-wrap form.sent .wpcf7-response-output {
	border-color: #2e7d32;
	color: #2e7d32;
	background: #eef7ee;
}
.ik-basvuru__form-wrap form.invalid .wpcf7-response-output,
.ik-basvuru__form-wrap form.failed .wpcf7-response-output,
.ik-basvuru__form-wrap form.spam .wpcf7-response-output,
.ik-basvuru__form-wrap form.aborted .wpcf7-response-output,
.ik-basvuru__form-wrap form.payment-required .wpcf7-response-output {
	border-color: var(--tada-red);
	color: var(--tada-red);
	background: var(--tada-red-soft);
}

/* ============================================================================
 * Genel Başvuru kartı — yalnızca masaüstünde (>=1025px) kompakt dikey ritim.
 * Kart, sayfanın geri kalanına göre görsel olarak baskın duracak kadar
 * uzundu (1440'ta ~913px). Üstteki temel kurallar (.ik-card--basvuru
 * .ik-card__content/__title/__description, .ik-basvuru-form__field/
 * --file/consent) hâlâ ≤1024 (mobil/tablet) için geçerli taban değer —
 * bu blok SADECE min-width:1025px'te onları ezip daha dar bir dikey ritim
 * uyguluyor, böylece "mobil form görünümüne dokunma" kuralı tam olarak
 * korunuyor. Hedef 1440'ta ~680–720px; ölçülen sonuç ~689px. Input
 * yükseklikleri, etiket font-size'ı, buton boyutu/rengi, dosya kontrolü,
 * KVKK metni ve odak durumları hiç değişmedi — yalnızca padding/margin
 * değerleri daraltıldı. Doğrulama hataları açıldığında kart bu sabit
 * yükseklikte KIRILMAZ: `min-height`/`height`/`overflow:hidden` kullanılmadı,
 * kart tamamen içerik-güdümlü kalıyor ve hata mesajlarıyla birlikte doğal
 * olarak büyüyor (ölçüldü: 688.78px → 816.03px, hiçbir şey kırpılmadan).
 * ==========================================================================*/
@media (min-width: 1025px) {
	.ik-card--basvuru .ik-card__content {
		padding-top: clamp(40px, 4vw, 64px);
		padding-bottom: clamp(36px, 3.4vw, 52px);
	}
	.ik-card--basvuru .ik-card__title {
		margin-bottom: clamp(12px, 1.3vw, 20px);
	}
	.ik-card--basvuru .ik-card__description {
		margin-bottom: clamp(20px, 1.9vw, 32px);
	}
	.ik-basvuru-form__field {
		gap: clamp(6px, 0.7vw, 10px);
		margin-bottom: clamp(12px, 1.1vw, 18px);
	}
	.ik-basvuru-form__field--file {
		margin-bottom: clamp(10px, 1.05vw, 18px);
	}
	.ik-basvuru-form__consent {
		margin-bottom: clamp(10px, 1.05vw, 18px);
	}
}

/* ============================================================================
 * Responsive. Masaüstü (>=1025px) — Genel Başvuru kartının yukarıdaki dikey
 * ritim kompaktlaştırması dışında — tamamen onaylı ve dondurulmuş; bu blok
 * ona HİÇBİR şekilde dokunmuyor, yalnızca <=1024px için ayrı bir yerleşim
 * tanımlıyor.
 *
 * <=1024px: dört kart da AYNI sistemden çalışır — sağ/sol dönüşümlü
 * masaüstü düzeni tamamen terk edilir, hepsi "görsel üstte / içerik altta"
 * akışına geçer. Bu, markup'ı (kartların DOM sırası hâlâ card1/3 için
 * content-önce, card2/4 için media-önce) DEĞİŞTİRMEDEN, grid item'lara
 * `order` vererek yapılıyor: `.ik-card__media{order:1}` +
 * `.ik-card__content{order:2}` her kartta DOM sırasından bağımsız olarak
 * görseli her zaman üste, içeriği her zaman alta taşır — kart bazında özel/
 * çelişkili bir order kuralı yok, tüm kartlar tek bir ortak kuraldan geçiyor.
 * Kart/görsel `border-radius` için AYRI bir mobil değeri yok — masaüstünde
 * kullanılan `clamp(20px,1.56vw,30px)` token'ı zaten ~1282px altında her
 * zaman 20px tabanına oturuyor, aynen yeniden kullanılıyor.
 * ==========================================================================*/
@media (max-width: 1024px) {
	.ik-card {
		grid-template-columns: 1fr;
	}
	.ik-card__media {
		order: 1;
		width: 100%;
		height: clamp(220px, 50vw, 360px);
	}
	/* Genel Başvuru görseli portre kadrajlı (794:825) — diğer 3 kartın
	   yatay 795:460 kadrajından daha uzun bir mobil yükseklik bandı
	   gerektiriyor, kadının başı/gövdesi/elindeki dosyalar kesilmesin diye.
	   object-position (38% 22%, masaüstüyle aynı) değişmedi. */
	.ik-card--basvuru .ik-card__media {
		height: clamp(280px, 65vw, 460px);
	}
	.ik-card__content {
		order: 2;
	}
	/* Tüm kartlarda TEK bir dolgu sistemi — masaüstünün "görsel kenarı 0,
	   kart kenarı 50-native" asimetrik dolgusu artık anlamsız (görsel tam
	   genişlikte üstte, içerik tam genişlikte altta); dört köşe de eşit. */
	.ik-card--content-left .ik-card__content,
	.ik-card--reverse .ik-card__content {
		padding: clamp(20px, 4vw, 32px);
	}
	.ik-card--basvuru .ik-card__content {
		padding: clamp(20px, 4vw, 32px);
	}
}

@media (max-width: 768px) {
	.ik-card__title { font-size: 24px; margin-bottom: 12px; }
	.ik-card--basvuru .ik-card__title { margin-bottom: 12px; }

	/* 768px ve altında form kesin olarak tek kolon (bkz. görev talimatı) —
	   769–1024 arası, kart artık tam genişlikte olduğu için Ad/Soyad çifti
	   rahatça yan yana sığıyor, o bantta değiştirilmedi. */
	.ik-basvuru-form__row { grid-template-columns: 1fr; }
}

/* Kariyer Yönetimi butonları: 481–1024 arası yan yana kalabilir (yeterince
   geniş kart genişliği + flex-wrap zaten sığmazsa doğal olarak alta düşürür);
   yalnızca <=480'de kesin olarak alt alta ve tam genişliğe zorlanır. Buton
   rengi/hover/font-size (12px, #9e262d/beyaz, hover #000000) masaüstüyle
   birebir aynı token'lardan geliyor — bu breakpoint'lerde hiç ezilmiyor. */
@media (max-width: 480px) {
	.ik-card__actions { flex-direction: column; align-items: stretch; }
	.ik-btn { width: 100%; }
}

/* ============================================================================
 * TABLET (769–1100px) — masaüstünün yatay kart düzeninin kompakt hâli.
 *
 * Bu bant, yukarıdaki `@media (max-width: 1024px)` bloğunun "görsel üstte /
 * içerik altta" tek kolonlu akışını 769px'ten itibaren TAMAMEN geri alır ve
 * 1025–1100 arasında zaten yürürlükte olan masaüstü 2 kolonlu düzeni tüm
 * banda yayar. Dosyada o bloktan SONRA geldiği için (aynı özgüllük) kazanan
 * bu blok olur. 768px ve altı ile 1101px ve üstü tek bir kural bile
 * almadan olduğu gibi kalır.
 *
 * Kolon SIRASI masaüstüyle birebir aynı: kart 1/3 metin solda, kart 2/4
 * görsel solda (CLAUDE.md §10 / görev §10 — "tablet görünümünü yeni bir
 * tasarım olarak icat etme, masaüstündeki kurumsal ilişkiyi kompakt taşı").
 * Bu, `order` ile DOM sırasını ezmek yerine `order: 0` vererek yapılıyor;
 * markup sırası zaten masaüstü sırasıyla aynı, dolayısıyla okuma sırası ile
 * görsel sıra tablette de birbirini takip ediyor.
 *
 * Kolon ORANLARI metin miktarına göre farklılaşır (görev §2): kısa metinli
 * Kariyer Yönetimi 58/42, en uzun metinli İK Yaklaşımımız 38/62, liste
 * içeren İmkanlar 60/40, form içeren Genel Başvuru 40/60. Oranlar
 * `minmax(0, %)` ile verilir — `minmax(0, ...)` grid item'ların
 * `min-width: auto` varsayılanını kapatır, yani uzun bir kelime ya da
 * görselin intrinsic genişliği kolonu şişirip kartı taşıramaz.
 *
 * Kart yüksekliği tamamen İÇERİKTEN oluşur: hiçbir yere `height` ya da
 * kart üzerinde `min-height` konmadı. Görsel kolonuna verilen `min-height`
 * yalnızca bir TABAN — metin kısa kaldığında görselin ezilmemesi için —
 * metin uzadıkça satır o tabanı aşar ve görsel `object-fit: cover` ile
 * kolonu doldurmaya devam eder.
 * ==========================================================================*/
@media (min-width: 769px) and (max-width: 1100px) {

	/* Kartlar arası dikey mesafe (görev §9: 28–40px). Sayfa altındaki
	   footer boşluğu (.product-archive padding-bottom 36 + footer margin-top
	   16 = 52) product-archive.css'ten ortak geliyor — dokunulmadı. */
	.ik-cards {
		gap: 32px;
	}

	/* ---- Kart iskeleti: tek birleşik panel (görev §3) ----
	   Sütunlar arası boşluk 0. Masaüstünde görsel ile metin arasında 37px'lik
	   bir beyaz kanal var; tablette kart daha dar olduğu için o kanal kartı
	   iki ayrı bloğa böler gibi görünüyordu. Burada görsel doğrudan metin
	   sütununa dayanıyor, metnin kendi iç dolgusu ayrımı sağlıyor. */
	.ik-card {
		gap: 0;
		align-items: stretch;
	}

	/* Görsel artık kartın kendi `overflow: hidden`'ı tarafından kırpılıyor:
	   kendi radius'unu sıfırlamak, yalnızca kartın DIŞ köşelerine denk gelen
	   2 köşenin yuvarlanmasını, metne bakan iç 2 köşenin kare kalmasını
	   sağlar — yani çift radius ve arada beyaz boşluk oluşmaz. */
	.ik-card__media {
		position: relative;
		order: 0;
		width: auto;
		height: auto;
		min-height: 300px;
		border-radius: 0;
	}
	.ik-card__content {
		order: 0;
	}
	/* Görsel akıştan çıkarılıp kolonun içine mutlak konumlanıyor. Sebep
	   ölçümle bulundu: akışta bırakıldığında `height: 100%` grid satırının
	   yüksekliği daha belli değilken `auto`ya düşüyor ve görselin KENDİ
	   intrinsic yüksekliği satırı belirliyordu — İK Yaklaşımımız ve
	   İmkanlar kartları bu yüzden 1500px'e fırlamıştı (WordPress'in
	   `sizes="auto"` srcset'i bu kartlarda en büyük dosyayı seçiyor).
	   `position: absolute` ile görsel intrinsic boyut katkısı yapmaz; satır
	   yüksekliğini yalnızca metin sütunu ve aşağıdaki `min-height` tabanı
	   belirler, görsel de `object-fit: cover` ile ne kadar yer kalırsa onu
	   doldurur. `aspect-ratio` da bu yüzden serbest bırakılıyor — masaüstü
	   795:460 kadrajı burada geçersiz (görev §4 — `transform: scale()` YOK). */
	.ik-card__image {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		max-width: none;
		aspect-ratio: auto;
	}

	/* Tek dolgu sistemi — masaüstünün "gap tarafı 0" asimetrik dolgusu
	   burada geçersiz (gap zaten 0), dört kenar da eşit. */
	.ik-card--content-left .ik-card__content,
	.ik-card--reverse .ik-card__content,
	.ik-card--basvuru .ik-card__content {
		padding: 30px;
	}

	/* ---- Tipografi ----
	   Başlık 24px (22–26 bandı). Masaüstünün vw tabanlı clamp'leri bu bantta
	   tabanlarına oturup 22px/13px'e düşüyordu; 820px'lik bir ekran için bu,
	   ~400px genişliğindeki bir metin sütununda gereğinden küçük kalıyor. */
	.ik-card__title {
		font-size: 24px;
		line-height: 1.25;
		margin-bottom: 14px;
	}
	/* Gövde metni 14.5px/22px — TAHMİN DEĞİL, kardeş kurumsal sayfaların
	   tablet bandından ölçülen değer: tarihce.css'in kendi
	   `@media (min-width: 769px) and (max-width: 1100px)` bloğu
	   `.tarihce-item__body`/`.tarihce-panel__closing` için birebir
	   `font-size: 14.5px; line-height: 22px` tanımlıyor ve bu, 820px'te
	   kurumsal sayfalardaki en çok kullanılan akan gövde metni (16 örnek).
	   Önceki 15px/1.55 (=23.25px) değeri, 820px'te tüm kurumsal sayfaların
	   gövde ölçüleri arasında (Hakkımızda 12.5px, Kalite 12.5px, Tarihçe
	   14.5px, Değerlerimiz 15px/22.5px) hem en büyüğü hem de en gevşek
	   satır aralığına sahip olanıydı — bu yüzden başlıkla yarışıyordu.
	   Kural DÖRT kartın da gövdesine birlikte uygulanıyor: ölçüm, ilk kartın
	   paragrafının diğerlerinden büyük OLMADIĞINI gösterdi (dördü de aynı
	   computed değerdeydi), dolayısıyla yalnız ilk kartı küçültmek onu tek
	   başına aykırı hâle getirirdi. */
	.ik-card__description,
	.ik-imkanlar__intro,
	.ik-imkanlar__closing,
	.ik-imkanlar__list li {
		font-size: 14.5px;
		line-height: 22px;
	}

	/* ---- 1. Kariyer Yönetimi — metin sol / görsel sağ, 58/42 ----
	   Metin sütunu 58% seçildi çünkü iki butonun ölçülen toplam genişliği
	   (186.6 + 148.4 + 13 gap = 348px) 60% - 2×30 dolgu = 402px iç genişliğe
	   tek satırda rahatça sığıyor; 56%'da pay ~17px'e iniyordu. */
	.ik-card--kariyer {
		grid-template-columns: minmax(0, 58%) minmax(0, 42%);
	}
	/* Kısa metinli kart — görsel tabanı 260px (görev §4: 250–300). */
	.ik-card--kariyer .ik-card__media {
		min-height: 260px;
	}

	/* ---- 2. İK Yaklaşımımız — görsel sol / metin sağ, 38/62 ----
	   Sayfanın en uzun metni (3 paragraf); metin sütununu genişletmek kart
	   yüksekliğini doğrudan kısaltıyor. */
	.ik-card--yaklasim {
		grid-template-columns: minmax(0, 38%) minmax(0, 62%);
	}
	/* Kadraj: kaynak fotoğraf yatay (768×444), tablet kolonu dikey — cover
	   yalnızca YATAY eksende kırpıyor. Varsayılan ortalı kırpmada gülen
	   kişinin yüzü sağ kenarda yarılanıyordu (ölçüldü: yüz kaynağın ~%70'i,
	   ortalı pencere %31–69 arasını gösteriyor). %75 penceresi %47–84
	   arasını alır: yüz de, öndeki tokalaşma da kadrajın içinde kalır. */
	.ik-card--yaklasim .ik-card__image {
		object-position: 75% center;
	}

	/* ---- 3. Çalışan İmkanları — metin sol / görsel sağ, 60/40 (görev §7) ---- */
	.ik-card--imkanlar {
		grid-template-columns: minmax(0, 60%) minmax(0, 40%);
	}
	/* Kadraj: toplantı fotoğrafında iki kişi kaynağın iki UCUNDA (kadın
	   ~%22, erkek ~%78); ortalı kırpma tam ikisinin ARASINA, raflara
	   düşüyor ve her ikisini de yarılıyordu. %78, erkeği kadrajın öznesi
	   yapar, kadın da sol kenarda kısmen kalır. */
	.ik-card--imkanlar .ik-card__image {
		object-position: 78% center;
	}
	/* Liste ile üstündeki giriş paragrafı ve altındaki kapanış cümlesi
	   arasında kontrollü nefes; maddeler birbirine yapışmasın diye satır
	   arası boşluk maddenin kendi line-height'ından ayrı veriliyor. */
	.ik-imkanlar__intro {
		margin: 14px 0 10px;
	}
	.ik-imkanlar__list {
		margin-bottom: 12px;
	}
	.ik-imkanlar__list li {
		padding-left: 22px;
	}
	.ik-imkanlar__list li + li {
		margin-top: 6px;
	}

	/* ---- 6. Kariyer Yönetimi butonları ----
	   Aynı satırda, normal akışta (absolute YOK). `white-space: nowrap`
	   etiketlerin ("Açık Pozisyonlarımız") iki satıra kırılmasını
	   engelliyor; yatay dolgu 32 -> 26px'e inince ikili bandın en dar ucunda
	   (769px) bile tek satıra sığıyor — ölçüldü: 184 + 145 + 13 = 342px,
	   metin sütununun iç genişliği 357px. Taban kuraldaki `flex-wrap: wrap`
	   bilerek KORUNUYOR: etiketler ACF'den düzenlenebilir olduğu için çok
	   uzun bir özel etiket girildiğinde ikili kartı taşırmak yerine alt
	   satıra düşsün. Renk/hover/font-size/min-height masaüstüyle aynı
	   token'lardan geliyor, hiçbiri ezilmiyor. */
	.ik-card__actions {
		gap: 13px;
		margin-top: 22px;
	}
	.ik-btn {
		padding-left: 26px;
		padding-right: 26px;
		white-space: nowrap;
	}

	/* ---- 8. Genel Başvuru — görsel sol / form sağ, 40/60 ----
	   Form sütunu 60% -> iç genişlik 770×0.6 - 60 = 402px; ikili satırlarda
	   her alan ~193px kalıyor, "Adınız / Soyadınız" ve "E-Mail / Telefon"
	   çiftleri yan yana okunabilir genişlikte duruyor. */
	.ik-card--basvuru {
		grid-template-columns: minmax(0, 40%) minmax(0, 60%);
	}
	/* Kart, formun kendi yüksekliğinden uzun; görsel kolonu `stretch` +
	   height:100% ile kartı baştan sona dolduruyor, altta boşluk kalmıyor.
	   object-position masaüstüyle aynı (38% 22%) — kadraj bu dar/uzun
	   sütunda yatay eksende kırpılıyor ve %38 değeri kadının yüzünü
	   kırpılan bölgenin dışında tutuyor. */
	.ik-card--basvuru .ik-card__media {
		/* `height: auto` şart: yukarıdaki `@media (max-width: 1024px)` bloğu
		   bu karta daha özgül bir `height: clamp(280px, 65vw, 460px)`
		   veriyor ve genel `.ik-card__media { height: auto }` kuralımı
		   eziyordu — ölçümde görsel 460px'te kalıp altında ~200px beyaz
		   boşluk bırakıyordu. */
		height: auto;
		min-height: 320px;
	}
	.ik-card--basvuru .ik-card__title {
		margin-bottom: 12px;
	}
	.ik-card--basvuru .ik-card__description {
		margin-bottom: 20px;
	}

	/* Form: iki kolonlu satırlar korunur, alanlar KÜÇÜLTÜLMEZ — input
	   yüksekliği bu bantta clamp tabanı olan 40px yerine 46px, etiket 13px
	   yerine 14px. Yalnızca dikey ritim (alan arası boşluk) sıkılaştırıldı. */
	.ik-basvuru-form__row {
		gap: 0 16px;
	}
	.ik-basvuru-form__field {
		gap: 8px;
		margin-bottom: 14px;
	}
	.ik-basvuru-form__field label {
		font-size: 14px;
	}
	.ik-basvuru-form__field input[type="text"],
	.ik-basvuru-form__field input[type="email"],
	.ik-basvuru-form__field input[type="tel"] {
		height: 46px;
	}
	.ik-basvuru-form__field--file,
	.ik-basvuru-form__consent {
		margin-bottom: 18px;
	}
	.ik-basvuru-form__consent {
		font-size: 13.5px;
	}
}

/* ============================================================================
 * Scroll reveal — kart sırası (Faz 4).
 *
 * Her kart kendi `data-animate="fade-up"` öğesini taşır (bkz.
 * template-parts/insan-kaynaklari/*.php): görsel + metin + butonlar + form
 * TEK parça olarak, kart viewport'a girdiğinde ve yalnızca bir kez açılır.
 * Ortak stagger konteyneri YOK — `.ik-cards` bir `data-animate` taşımıyor,
 * yani kart sayısı arttıkça uzayan global bir zincir oluşmaz ve hiçbir kart
 * bir üstündekinin bitmesini beklemez.
 *
 * Buradaki tek kural, aynı ekranda BİRLİKTE açılan kartlarda sıranın tersine
 * dönmesini engellemek. Kariyer kartı (ilk kart) 160ms gecikmeli — H1 (0ms)
 * ve breadcrumb (80ms) ile aynı üç adımlı girişi tamamlıyor. Sonraki kartlar
 * gecikmesiz bırakılsaydı, yüklemede birlikte görünen ikinci kart birincinin
 * 160ms ÖNÜNDEN açılırdı; ölçülen davranış (gerçek render, rootMargin -8%):
 *   1440x900  → yüklemede Kariyer + Yaklaşımımız birlikte eşikte
 *   820x1180  → yüklemede Kariyer + Yaklaşımımız + İmkanlar birlikte eşikte
 *   390x844   → yüklemede Kariyer + Yaklaşımımız (kartın üst ~72px'i) eşikte
 * Bu yüzden sonraki kartlara da aynı 160ms veriliyor: birlikte açılan grup
 * hep aynı anda başlar (asla ters sıra), tek başına açılan kart ise ilk kartla
 * birebir aynı ritmi kullanır. Sabit tek değer — kart başına artan bir
 * gecikme DEĞİL.
 *
 * İlk karta `:not(:first-child)` ile dokunulmuyor; ACF görünürlük anahtarıyla
 * (`ik_*_visible`) Kariyer kartı gizlenirse sıradaki kart gerçekten ilk kart
 * olur ve doğru şekilde 0ms alır.
 *
 * Global fade-up süresi/easing'i (main.css) aynen kullanılıyor: yeni keyframe,
 * yeni observer, sayfaya özel animasyon kodu yok.
 * ==========================================================================*/
.tada-anim .ik-cards > .ik-card:not(:first-child) {
	--tada-anim-delay: 160ms;
}